How to Use DGrid AI Gateway with the Vercel AI SDK

2026-03-26 · Source: LLM on Medium · Field: Technology & Digital — Artificial Intelligence & Machine Learning, Software Development & Engineering · Depth: Intermediate, medium

Summary

This guide details how to integrate the Vercel AI SDK with the DGrid AI Gateway to build AI-powered applications. It outlines a step-by-step process for setting up a minimal Next.js project, configuring the DGrid provider, and implementing both simple text generation and streaming chat functionalities. The workflow was validated using DGrid's base URL `https://api.dgrid.ai/v1`, the `openai/gpt-5.4` model format, the Vercel AI SDK with `@ai-sdk/openai-compatible`, and the Next.js App Router. Key steps include installing `ai`, `@ai-sdk/openai-compatible`, and `@ai-sdk/react` packages, setting the `DGRID_API_KEY` environment variable, and creating a DGrid provider using `createOpenAICompatible` with the correct `baseURL` and provider-prefixed model IDs.

Key takeaway

For AI Engineers building Next.js applications with the Vercel AI SDK who need to route model traffic through DGrid AI Gateway, ensure you configure `createOpenAICompatible` with `baseURL: 'https://api.dgrid.ai/v1'` and use DGrid's provider-prefixed model IDs like `openai/gpt-5.4`. This setup enables both non-streaming and streaming chat functionalities, streamlining your model integration and deployment to platforms like Vercel.

Key insights

Integrate Vercel AI SDK with DGrid AI Gateway for AI applications using an OpenAI-compatible interface.

Principles

• Use provider-prefixed model naming.
• Secure API keys via environment variables.

Method

Configure `createOpenAICompatible` with DGrid's base URL and API key. Implement `generateText` for single completions and `streamText` with `convertToModelMessages` for streaming chat, connecting to a React UI via `useChat`.

In practice

• Use `openai/gpt-5.4` for DGrid OpenAI models.
• Add `HTTP-Referer` and `X-Title` headers for app identification.
• Restart dev server after `.env.local` changes.

Topics

• Vercel AI SDK
• DGrid AI Gateway
• OpenAI Compatible API
• Streaming Chat
• Next.js Development

Best for: AI Engineer, Software Engineer, AI Chatbot Developer

Related on AIssential

• Perplexity with the Vercel AI SDK - Perplexity — The Vercel AI SDK now offers a Perplexity provider for integrating Sonar models with advanced features.
• OpenAI compatibility — Ollama now supports the OpenAI Chat Completions API, enabling local LLM use with existing OpenAI-compatible tools.
• Extending the Vercel AI SDK to Microsoft Foundry (TypeScript) — The Vercel AI SDK can be extended to access Microsoft Foundry's diverse LLM catalog beyond Azure OpenAI via custom provider adapters.
• “Anyone can cook”: How v0 is bringing Git workflows to vibe coding | Guillermo Rauch (Vercel CEO) — Vercel's v0 platform integrates AI-driven UI generation with Git workflows, enabling rapid, production-grade code contributions.
• ChatGPT is Dying? OpenAI Code Red, DeepSeek V3.2 Threat & Why Meta Fires Non-AI Workers | EP99.27 — OpenAI faces a "Code Red" as market share declines due to strong competition and user preference for superior, cost-effective AI tools.
• OpenAI GPT-5.5 + Codex, now available and fully-governed in Databricks — Databricks integrates OpenAI's GPT-5.5 and Codex with Unity AI Gateway for governed enterprise AI applications.

Open in AIssential →

Editorial summary, takeaway, and curation by AIssential. Original article published by LLM on Medium.