AI Gateway

The AI Gateway is a proxy service from Vercel that routes model requests to various AI providers. It offers a unified API to multiple providers and gives you the ability to set budgets, monitor usage, load-balance requests, and manage fallbacks.

It is designed to work seamlessly with AI SDK 5 and can be used as a provider in your applications.

Some of the key features of the AI Gateway include:

• Unified API: helps you switch between providers and models with minimal code changes
• High Reliability: automatically retries requests to other providers if one fails
• Spend Monitoring: monitor your spending across different providers
• Load Balancing: distribute requests across multiple providers to optimize performance
• Bring Your Own Key (BYOK): use your own provider API keys
• Provider Routing: control how requests are distributed across different AI providers and customize fallback behavior using provider options

Start using the AI Gateway by:

• Creating and using an API key
• Using an OIDC token associated with your Vercel project
• Configuring your own provider keys (BYOK)
• Learning about models and providers
• Configuring provider routing options

1. Install the AI SDK and AI Gateway packages

   Let's create a Next.js app and install the AI SDK and AI Gateway packages:

   terminal

   npx create-next-app@latest my-gateway-app
   cd my-gateway-app
   pnpm install ai@beta

2. Create an API key in the Vercel Dashboard

   Next, let's create an API key in the AI tab of the Vercel dashboard:

   1. From the Vercel dashboard, click the AI tab
   2. Click API keys on the left side bar
   3. Click Add key and proceed with Create key from the Dialog

   Once you have the API key, save it to .env.local at the root of your project so you can use it to authenticate your requests to the AI Gateway.

   .env.local

   AI_GATEWAY_API_KEY=your_api_key_here

3. Create a route handler to generate text

   Then in the Next.js app, add a GET route handler that creates a gateway provider instance. It uses the API key and calls the generateText function to generate text based on a prompt passed as a query parameter.

   When you specify a model id as a plain string, the AI SDK will use the Vercel AI Gateway provider to route the request.

   The AI Gateway provider looks for the API key in the AI_GATEWAY_API_KEY environment variable by default. You can also specify the API key directly in the createGateway function, described more in the As part of an AI SDK function call section.

   app/api/chat/route.ts

   import { generateText } from 'ai';
    
   export async function GET() {
     const result = await generateText({
       model: 'xai/grok-3',
       prompt: 'Why is the sky blue?',
     });
     return Response.json(result);
   }

4. Start your Next.js application

   Now run your Next.js app using pnpm dev and open your browser to http://localhost:3000/api/chat. You should see a response with the generated text.

The Vercel OIDC token is a way to authenticate your requests to the AI Gateway without needing to manage an API key. Vercel automatically generates the OIDC token that it associates with your Vercel project.

1. Link to a Vercel project and pull environment variables

   Before you can use the OIDC token during local development, ensure that you link your application to a Vercel project and that you pull the environment variables from Vercel. You can do this by running the following command in your terminal:

   terminal

   vercel link
   vercel env pull

2. Add a route handler to generate text

   Then in your GET route handler you can directly use the gateway provider without needing to obtain an API key or set it in an environment variable:

   app/api/chat/route.ts

   import { generateText } from 'ai';
    
   export async function GET() {
     const result = await generateText({
       model: 'xai/grok-3',
       prompt: 'Why is the sky blue?',
     });
     return Response.json(result);
   }

3. Run your Next.js application

   Now run your Next.js app using pnpm dev and open your browser to http://localhost:3000/api/chat. You should see a response with the generated text.

The AI Gateway supports using your own API key with an external AI provider to authenticate requests the Gateway makes on your behalf. This can be useful for utilizing credits they've given you or executing AI queries that have access to private cloud data. If a query made with your API key fails, AI Gateway will attempt to fulfill your query again with AI Gateway system credentials, aiming to provide improved availability for your service.

Integrating an API key like this with AI Gateway is sometimes referred to as Bring-Your-Own-Key, or BYOK. In the Vercel dashboard this feature is found in the AI tab under the Integrations section in the sidebar.

Provider keys are scoped to be available throughout your Vercel team, so you can use the same key across multiple projects.

1. Retrieve an API key from your AI provider

   First, retrieve an API key from your AI provider. This key will be used first to authenticate requests made to that provider through the AI Gateway. If a query made with your API key fails, AI Gateway will re-attempt with system credentials, aiming to provide improved availability.

2. Add the API key to your Vercel team

   1. Go to the AI tab in your Vercel dashboard.
   2. Click on the Integrations section on the left sidebar.
   3. Find your provider from the list and click Add.
   4. In the dialog that appears, enter the key you retrieved from the provider.
   5. Ensure that the Enabled toggle is turned on so that the key is active.
   6. Click Add Key to complete the flow.

3. Use the API key in your AI Gateway requests

   Once the key is added, it will automatically be included in your requests to the AI Gateway. You can now use this key to authenticate your requests.

The AI Gateway's unified API is built to be flexible, allowing you to switch between different AI models and providers without rewriting parts of your application. This is useful for testing different models or when you want to change the underlying AI provider for cost or performance reasons.

Models are AI algorithms that process your input data to generate responses, such as Grok, GPT-4o, or Claude Sonnet 4. Providers are the companies or services that host these models, such as xAI, OpenAI, or Anthropic.

In some cases, multiple providers, including the model creator, host the same model. For example, you can use the xai/grok-4 model from xAI or the openai/gpt-4o model from OpenAI, following the format creator/model-name.

Different providers may have different specifications for the same model such as different pricing and performance. You can choose the one that best fits your needs.

You can view the list of supported models and providers by following these steps:

1. Go to the AI tab in your Vercel dashboard.
2. Click on the Model List section on the left sidebar.

There are two ways to specify the model and provider to use for an AI Gateway request:

• As part of an AI SDK function call
• Globally for all requests in your application

In the AI SDK, you can specify the model and provider directly in your API calls using either plain strings or the AI Gateway provider. This allows you to switch models or providers for specific requests without affecting the rest of your application.

To use AI Gateway, specify a model and provider via a plain string, for example:

import { generateText } from 'ai';
import { NextRequest } from 'next/server';
 
export async function GET() {
  const result = await generateText({
    model: 'xai/grok-3',
    prompt: 'Tell me the history of the San Francisco Mission-style burrito.',
  });
  return Response.json(result);
}

We have set the xai/grok-3 model from xAI as the default. You can change the model to any other supported model by changing the string specified as the value for the model parameter.

You can test different models by changing the model parameter and opening your browser to http://localhost:3000/api/chat.

You can also use a provider instance. This can be useful if you'd like to specify custom provider options, or if you'd like to use a Gateway provider with the AI SDK Provider Registry.

Install the @ai-sdk/gateway package directly as a dependency in your project.

pnpm install @ai-sdk/gateway@beta

You can change the model by changing the string passed to gateway().

import { generateText } from 'ai';
import { gateway } from '@ai-sdk/gateway';
import { NextRequest } from 'next/server';
 
export async function GET() {
  const result = await generateText({
    model: gateway('xai/grok-3'),
    prompt: 'Tell me the history of the San Francisco Mission-style burrito.',
  });
  return Response.json(result);
}

The example above uses the default gateway provider instance. You can also create a custom provider instance to use in your application. Creating a custom instance is useful when you need to specify a different environment variable for your API key, or when you need to set a custom base URL (for example, if you're working behind a corporate proxy server).

import { generateText } from 'ai';
import { createGateway } from '@ai-sdk/gateway';
 
const gateway = createGateway({
  apiKey: process.env.AI_GATEWAY_API_KEY, // the default environment variable for the API key
  baseURL: 'https://ai-gateway.vercel.sh/v1/ai', // the default base URL
});
 
export async function GET() {
  const result = await generateText({
    model: gateway('xai/grok-3'),
    prompt: 'Why is the sky blue?',
  });
  return Response.json(result);
}

The Vercel AI Gateway is the default provider for the AI SDK when a model is specified as a string. You can set a different provider as the default by assigning the provider instance to the globalThis.AI_SDK_DEFAULT_PROVIDER variable.

This is intended to be done in a file that runs before any other AI SDK calls. In the case of a Next.js application, you can do this in instrumentation.ts:

import { openai } from '@ai-sdk/openai';
 
export async function register() {
  // This runs once when the Node.js runtime starts
  globalThis.AI_SDK_DEFAULT_PROVIDER = openai;
 
  // You can also do other initialization here
  console.log('App initialization complete');
}

Then, you can use the generateText function without specifying the provider in each call.

import { generateText } from 'ai';
import { NextRequest } from 'next/server';
 
export async function GET(request: NextRequest) {
  const { searchParams } = new URL(request.url);
  const prompt = searchParams.get('prompt');
 
  if (!prompt) {
    return Response.json({ error: 'Prompt is required' }, { status: 400 });
  }
 
  const result = await generateText({
    model: 'gpt-4o',
    prompt,
  });
 
  return Response.json(result);
}