> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://respan.ai/docs/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://respan.ai/docs/_mcp/server.

# Vercel AI SDK (gateway)

> Set up Vercel AI SDK with the Respan gateway.

Route Vercel AI SDK calls through the Respan gateway to use 1000+ models from different providers. Only your `RESPAN_API_KEY` is needed — no separate provider keys required.

## Setup

#### Install AI SDK and a provider

#### OpenAI-compatible

```bash
npm install ai @ai-sdk/openai
```

#### Anthropic-native

```bash
npm install ai @ai-sdk/anthropic
```

#### Google Gemini-native

```bash
npm install ai @ai-sdk/google
```

#### Set environment variables

```bash
export RESPAN_API_KEY="YOUR_RESPAN_API_KEY"
```

No provider API key is needed — the Respan gateway handles provider authentication.

#### Point your provider at Respan

#### OpenAI-compatible

This is the provider-neutral setup. It uses the Respan Chat Completions route and can call OpenAI, Anthropic, Gemini, and other chat models.

**`TypeScript`**

```typescript TypeScript
import { createOpenAI } from "@ai-sdk/openai";
import { generateText } from "ai";

const respan = createOpenAI({
  apiKey: process.env.RESPAN_API_KEY!,
  baseURL: "https://api.respan.ai/api",
});

const result = await generateText({
  model: respan.chat("gpt-5.5"),
  prompt: "Tell me a joke about AI",
});
console.log(result.text);
```

> **Note**
>
> With AI SDK 7, call `respan.chat(...)` explicitly. Calling `respan(...)` selects the Responses API, while this key-only gateway setup uses `/chat/completions`.

#### Anthropic-native

Use Anthropic's native Messages request shape. The verified native path currently uses streaming.

**`TypeScript`**

```typescript TypeScript
import { createAnthropic } from "@ai-sdk/anthropic";
import { streamText } from "ai";

const anthropic = createAnthropic({
  apiKey: process.env.RESPAN_API_KEY!,
  baseURL: "https://api.respan.ai/api/anthropic/v1",
});

const result = streamText({
  model: anthropic("claude-sonnet-4-5-20250929"),
  prompt: "Tell me a joke about AI",
});

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

> **Note**
>
> `streamText` is the verified provider-native path. For non-streaming `generateText`, use the OpenAI-compatible setup with an `anthropic/` model ID; the current native provider rejects a nullable citation field in the gateway's non-streaming response.

#### Google Gemini-native

Use Google's native `generateContent` request shape.

**`TypeScript`**

```typescript TypeScript
import { createGoogleGenerativeAI } from "@ai-sdk/google";
import { generateText } from "ai";

const google = createGoogleGenerativeAI({
  apiKey: process.env.RESPAN_API_KEY!,
  baseURL: "https://api.respan.ai/api/google/gemini/v1beta",
});

const result = await generateText({
  model: google("gemini-3.5-flash"),
  prompt: "Tell me a joke about AI",
});
console.log(result.text);
```

## Switch models

The OpenAI-compatible setup is provider-neutral. Change the model ID while keeping the same client. Provider prefixes make cross-provider routing explicit.

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

const respan = createOpenAI({
  apiKey: process.env.RESPAN_API_KEY!,
  baseURL: "https://api.respan.ai/api",
});

const r1 = await generateText({ model: respan.chat("gpt-5.5"), prompt: "Hello" });
const r2 = await generateText({ model: respan.chat("anthropic/claude-sonnet-4-5-20250929"), prompt: "Hello" });
const r3 = await generateText({ model: respan.chat("gemini/gemini-3.5-flash"), prompt: "Hello" });

console.log(r1.text, r2.text, r3.text);
```

The Anthropic- and Gemini-native providers stay on their provider-specific routes and use unprefixed model IDs.

See the [full model list](https://platform.respan.ai/platform/models).