---
title: TanStack AI with AI Gateway
product: vercel
url: /docs/ai-gateway/ecosystem/framework-integrations/tanstack-ai
canonical_url: "https://vercel.com/docs/ai-gateway/ecosystem/framework-integrations/tanstack-ai"
last_updated: 2018-10-20
type: how-to
prerequisites:
  - /docs/ai-gateway/ecosystem/framework-integrations
  - /docs/ai-gateway/ecosystem
related:
  - /docs/ai-gateway
  - /docs/accounts
  - /docs/ai-gateway/authentication-and-byok/api-keys
  - /docs/ai-gateway/authentication-and-byok/oidc
  - /docs/ai-gateway/sdks-and-apis/responses
summary: Connect TanStack AI to Vercel AI Gateway with the official adapter to authenticate requests and stream responses from AI models.
install_vercel_plugin: npx plugins add vercel/vercel-plugin
---

# TanStack AI with AI Gateway

Connect [TanStack AI](https://tanstack.com/ai) to [AI Gateway](/docs/ai-gateway) using the `@tanstack/ai-vercel-gateway` adapter. You can switch models by changing the model ID in your application.

## Prerequisites

Use an existing JavaScript or TypeScript project with Node.js 22 or later and a [Vercel account](/docs/accounts).

## Install the adapter

Install TanStack AI and its AI Gateway adapter in your project:

<CodeBlock>
  <Code tab="pnpm">
    ```bash
    pnpm i @tanstack/ai @tanstack/ai-vercel-gateway
    ```
  </Code>
  <Code tab="yarn">
    ```bash
    yarn i @tanstack/ai @tanstack/ai-vercel-gateway
    ```
  </Code>
  <Code tab="npm">
    ```bash
    npm i @tanstack/ai @tanstack/ai-vercel-gateway
    ```
  </Code>
  <Code tab="bun">
    ```bash
    bun i @tanstack/ai @tanstack/ai-vercel-gateway
    ```
  </Code>
</CodeBlock>

## Configure authentication

Create an [AI Gateway API key](/docs/ai-gateway/authentication-and-byok/api-keys) and save it in a `.env` file:

```bash filename=".env"
AI_GATEWAY_API_KEY=your_api_key_here
```

The adapter reads `AI_GATEWAY_API_KEY` automatically. When that variable is absent, the adapter uses `VERCEL_OIDC_TOKEN`. See [OpenID Connect authentication](/docs/ai-gateway/authentication-and-byok/oidc) for token setup and local development.

## Send a chat request

Create an entry file that passes `vercelGatewayText` to TanStack AI's `chat` function. Run this code on the server to keep your credentials private:

```ts filename="index.mts" framework=all
import { chat } from '@tanstack/ai';
import { vercelGatewayText } from '@tanstack/ai-vercel-gateway';

const stream = chat({
  adapter: vercelGatewayText('anthropic/claude-opus-5'),
  messages: [
    {
      role: 'user',
      content: 'Write a one-sentence bedtime story about a unicorn.',
    },
  ],
});

for await (const chunk of stream) {
  console.log(chunk);
}
```

```js filename="index.mjs" framework=all
import { chat } from '@tanstack/ai';
import { vercelGatewayText } from '@tanstack/ai-vercel-gateway';

const stream = chat({
  adapter: vercelGatewayText('anthropic/claude-opus-5'),
  messages: [
    {
      role: 'user',
      content: 'Write a one-sentence bedtime story about a unicorn.',
    },
  ],
});

for await (const chunk of stream) {
  console.log(chunk);
}
```

Run the TypeScript example with `tsx`, loading your API key from `.env`:

```bash filename="terminal"
pnpm dlx tsx --env-file=.env index.mts
```

For JavaScript, run `node --env-file=.env index.mjs`. Your terminal displays stream events containing the generated story.

The adapter uses the [OpenAI Responses API](/docs/ai-gateway/sdks-and-apis/responses) by default. To use [Chat Completions](/docs/ai-gateway/sdks-and-apis/openai-chat-completions), pass `{ api: 'chat' }` as the second argument to `vercelGatewayText`.

## Next steps

- Follow the [Using TanStack AI with Vercel AI Gateway](/kb/guide/tanstack-ai-vercel-ai-gateway) guide to connect a chat UI and generate embeddings and images.
- Configure routing through `modelOptions.gateway` using the [TanStack AI adapter reference](https://tanstack.com/ai/latest/docs/adapters/vercel-gateway). The adapter translates these options to `providerOptions.gateway`.
- Explore [provider routing](/docs/ai-gateway/models-and-providers/provider-filtering-and-ordering) and [model fallbacks](/docs/ai-gateway/models-and-providers/model-fallbacks).


---

[View full sitemap](/docs/sitemap)