TanStack AI with AI Gateway

Connect TanStack AI to AI Gateway using the @tanstack/ai-vercel-gateway adapter. You can switch models by changing the model ID in your application.

Use an existing JavaScript or TypeScript project with Node.js 22 or later and a Edgenivo account.

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

pnpm i @tanstack/ai @tanstack/ai-vercel-gateway

yarn add @tanstack/ai @tanstack/ai-vercel-gateway

npm i @tanstack/ai @tanstack/ai-vercel-gateway

bun add @tanstack/ai @tanstack/ai-vercel-gateway

Create an AI Gateway API key and save it in a .env file:

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 for token setup and local development.

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

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:

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 by default. To use Chat Completions, pass { api: 'chat' } as the second argument to vercelGatewayText.

Use Chat SDK to deliver TanStack AI responses to Slack and other chat platforms. AI Gateway handles model requests, while Chat SDK handles incoming messages and replies.

Start with a bot from the Chat SDK quickstart or a framework guide, then install the TanStack AI packages and configure AI Gateway authentication as shown above.

Create a response handler that reads up to 20 recent messages from the thread. toTanStackMessages converts the history to TanStack AI's message format and orders it oldest first:

import { chat } from '@tanstack/ai';
import { vercelGatewayText } from '@tanstack/ai-vercel-gateway';
import type { Message, Thread } from 'chat';
import { toTanStackMessages } from 'chat/ai/tanstack';
 
export async function respond(thread: Thread) {
  const history: Message[] = [];
  for await (const message of thread.messages) {
    history.push(message);
    if (history.length === 20) break;
  }
 
  const stream = chat({
    adapter: vercelGatewayText('anthropic/claude-opus-5'),
    threadId: thread.id,
    systemPrompts: ['You are a helpful assistant.'],
    messages: await toTanStackMessages(history),
  });
 
  await thread.post(stream);
}

In your bot module, replace the echo handlers with the response handler, keeping your existing adapters and state configuration:

import { respond } from './respond';
 
// Keep your existing bot configuration here.
 
bot.onNewMention(async (thread) => {
  await thread.subscribe();
  await respond(thread);
});
bot.onSubscribedMessage(respond);
bot.onDirectMessage(respond);

Mention the bot or send it a direct message. The bot responds with model-generated text and uses recent conversation history for context. thread.post consumes TanStack AI's stream directly.

For browser chat, configure the Web Adapter with protocol: 'ag-ui' and connect TanStack AI's useChat to its endpoint. Follow Chat SDK with TanStack Start for authentication, the server route, and a client example. Read history through thread.messages so the Web Adapter can use its stored conversation history.

To give the model chat actions, such as posting messages or adding reactions, see createTanStackTools. Its write tools require approval by default. Follow the guide's approval handling before adding those tools; posting a stream doesn't collect approval decisions.

Use TanStack AI's decide() function with vercelGatewayDecider from @tanstack/ai-vercel-gateway to answer typed questions about application state with Jev through AI Gateway. Jev returns typed choices, scores, and boolean probabilities that your code can use to classify content and decide what happens next.

Follow Moderate product reviews with Jev and TanStack AI to build a moderation workflow in TanStack Start that publishes clear reviews and holds flagged or uncertain reviews for a moderator.

• Authenticate OAuth-protected MCP tools with TanStack AI and Edgenivo Connect.
• Follow the Using TanStack AI with Edgenivo AI Gateway guide to connect a chat UI and generate embeddings and images.
• Configure routing through modelOptions.gateway using the TanStack AI adapter reference. The adapter translates these options to providerOptions.gateway.
• Explore provider routing and model fallbacks.
• Connect to an MCP server on Edgenivo to make its tools available to TanStack AI.