---
title: "Connect Vercel AI SDK to XiuRouter"
description: "Use an OpenAI-compatible server-side provider and verify text generation, streaming, and usage."
image: "https://docs.xiu.ai/og.png"
---

> XiuAI documentation index
> Full documentation index: https://docs.xiu.ai/en/llms.txt
> Check the index for current pages before reading.

# Connect Vercel AI SDK to XiuRouter

Use `@ai-sdk/openai-compatible` to connect Vercel AI SDK to XiuRouter Chat Completions. Keep both the provider and API key on the server, outside browser bundles.

## Setup options

- First setup: install the provider, save a server environment variable, and create a XiuRouter instance.
- Existing setup: the product page offers only the first-setup path. Retain the old provider instance when switching so you can roll back.
- Chat-assisted setup: unavailable; the deployment environment manages secrets and production variables.

## Before you start

Use a JavaScript or TypeScript project with server-side execution, a project-specific XiuRouter key, and an exact model ID from the current catalog.

## Install dependencies

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

Use `@ai-sdk/openai-compatible`, not `@ai-sdk/openai`.

## Save the server key

Use `.env.local` in Next.js or an uncommitted `.env` in a Node project:

```dotenv
XIUROUTER_API_KEY=YOUR_XIUROUTER_API_KEY
```

Ignore the file in Git. Do not prefix the variable with `NEXT_PUBLIC_`, which exposes it to the browser.

## Create the provider

Create a server-only file such as `lib/xiurouter.ts`:

```ts
import { createOpenAICompatible } from "@ai-sdk/openai-compatible";

export const xiurouter = createOpenAICompatible({
  name: "xiurouter",
  apiKey: process.env.XIUROUTER_API_KEY,
  baseURL: "https://router-api.xiu.ai/v1",
});
```

## Generate text

```ts
import { generateText } from "ai";
import { xiurouter } from "@/lib/xiurouter";

const { text, usage } = await generateText({
  model: xiurouter("YOUR_MODEL_ID"),
  prompt: "Explain why the sky is blue in two sentences.",
});

console.log(text);
console.log(usage);
```

The script should print a complete response and token usage.

## Stream output

```ts
import { streamText } from "ai";
import { xiurouter } from "@/lib/xiurouter";

const result = streamText({
  model: xiurouter("YOUR_MODEL_ID"),
  prompt: "Write a four-line poem.",
});

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

## Verify

1. Run the `generateText` example on the server.
2. Confirm both text and `usage` are returned.
3. Inspect the key, model, `/v1/chat/completions`, and successful result in XiuRouter.
4. Run `streamText` and verify that the stream finishes completely.
5. Test tools and structured output separately for the selected model.

## Troubleshoot

| Symptom | Next step |
| --- | --- |
| `apiKey` is `undefined` | Restart Next.js; for Node use `node --env-file=.env` or set the startup environment |
| Browser CORS errors or exposed key | Move the provider from client code to a Server Component, Route Handler, or backend |
| Model not found | Copy the exact ID and check the key's model scope |
| Wrong endpoint | Check the import and ensure Base URL ends with `/v1` |

## Roll back

Restore the old provider instance, or remove `xiurouter` and its environment variable. Confirm production traffic uses the old route before revoking the project key.

## Sources and review date

Reviewed on 2026-08-31. This translation preserves that date. Basic setup requires a full server response and matching usage record; verify tools and structured output with the target model.

Source: https://docs.xiu.ai/en/router/integrations/vercel-ai-sdk/index.mdx