Vercel AI SDK

This guide shows you how to route the Vercel AI SDK through the to11 gateway using the OpenAI provider with a custom base URL.

These examples use the AI SDK 5+ API (inputSchema, message.parts, toUIMessageStreamResponse). On AI SDK 4 the option and method names differ.

Installation

npm install ai@^5 @ai-sdk/openai @ai-sdk/react

Configuration

Create an OpenAI provider instance pointing at the to11 gateway. Pass model ids as <provider-slug>::<model> — openai::gpt-4o below, where openai is the routing identifier of your OpenAI provider in to11. See Naming the provider in a request.

import { createOpenAI } from "@ai-sdk/openai";

const to11 = createOpenAI({
  baseURL: "https://gw.to11.ai/v1",
  apiKey: "<your OpenAI API key>", // provider credential, forwarded upstream
  headers: {
    "x-to11-authorization": "Bearer <your to11 API key>", // to11 auth — Settings → API keys
    "x-to11-project-id": "<your project id>",
  },
});

Generate text

import { generateText } from "ai";

const { text } = await generateText({
  model: to11("openai::gpt-4o"),
  prompt: "Hello from to11!",
});
console.log(text);

Stream text

import { streamText } from "ai";

const result = streamText({
  model: to11("openai::gpt-4o"),
  prompt: "Count to 10",
});

for await (const chunk of result.textStream) {
  process.stdout.write(chunk);
}

Use with Next.js

In a Next.js route handler:

// app/api/chat/route.ts
import { streamText, convertToModelMessages, type UIMessage } from "ai";
import { createOpenAI } from "@ai-sdk/openai";

const to11 = createOpenAI({
  baseURL: "https://gw.to11.ai/v1",
  apiKey: process.env.OPENAI_API_KEY!,
  headers: {
    "x-to11-authorization": `Bearer ${process.env.TO11_API_KEY!}`,
    "x-to11-project-id": process.env.TO11_PROJECT_ID!,
  },
});

export async function POST(req: Request) {
  const { messages }: { messages: UIMessage[] } = await req.json();

  const result = streamText({
    model: to11("openai::gpt-4o"),
    messages: convertToModelMessages(messages),
  });

  return result.toUIMessageStreamResponse();
}

On the client side, the useChat hook posts to /api/chat by default. Manage the input yourself and send messages with sendMessage:

// components/chat.tsx
"use client";
import { useChat } from "@ai-sdk/react";
import { useState } from "react";

export default function Chat() {
  const [input, setInput] = useState("");
  const { messages, sendMessage } = useChat();

  return (
    <div>
      {messages.map((message) => (
        <div key={message.id}>
          {message.role === "user" ? "User: " : "AI: "}
          {message.parts.map((part, i) =>
            part.type === "text" ? <span key={i}>{part.text}</span> : null,
          )}
        </div>
      ))}
      <form
        onSubmit={(e) => {
          e.preventDefault();
          sendMessage({ text: input });
          setInput("");
        }}
      >
        <input value={input} onChange={(e) => setInput(e.target.value)} />
      </form>
    </div>
  );
}

Choosing a provider package

The gateway forwards your request to the provider as you wrote it and does not convert between wire formats. Pick the AI SDK provider package that speaks the format of the provider you call:

@ai-sdk/openai for OpenAI, xAI, and the OpenAI-compatible providers. Since AI SDK 5, to11("<model>") calls the OpenAI Responses API, which the gateway serves for OpenAI and xAI providers only. For any other OpenAI-compatible provider, select Chat Completions with to11.chat("<provider-slug>::<model>").
@ai-sdk/anthropic for Anthropic.

A request in a format the provider does not speak — to11("anthropic::claude-sonnet-4-6") through the OpenAI package, for example — is rejected with 400 Bad Request and the x-to11-error-code: cross_dialect header before anything is sent to the provider. See Which SDK to call a provider with. To call an Anthropic model, point the Anthropic package at the same gateway URL:

npm install @ai-sdk/anthropic

import { createAnthropic } from "@ai-sdk/anthropic";
import { generateText } from "ai";

const to11Anthropic = createAnthropic({
  baseURL: "https://gw.to11.ai/v1",
  apiKey: "<your Anthropic API key>", // provider credential, forwarded upstream
  headers: {
    "x-to11-authorization": "Bearer <your to11 API key>", // to11 auth — Settings → API keys
    "x-to11-project-id": "<your project id>",
  },
});

const { text } = await generateText({
  model: to11Anthropic("anthropic::claude-sonnet-4-6"),
  prompt: "Hello from to11!",
});

Tool calling

import { generateText, tool } from "ai";
import { z } from "zod";

const { text, toolCalls } = await generateText({
  model: to11("openai::gpt-4o"),
  prompt: "What's the weather in Paris?",
  tools: {
    getWeather: tool({
      description: "Get current weather for a location",
      inputSchema: z.object({
        location: z.string(),
      }),
      execute: async ({ location }) => {
        return { temperature: 18, unit: "celsius", location };
      },
    }),
  },
});

​Installation

​Configuration

​Generate text

​Stream text

​Use with Next.js

​Choosing a provider package

​Tool calling

Installation

Configuration

Generate text

Stream text

Use with Next.js

Choosing a provider package

Tool calling