Quick Start

You want a streaming chat in your app. TanStack AI streams from a server route. The hook for your framework renders the tokens.

For a React + Start app with BYOK, open Basic Chat.

For an MCP server with a tool, a resource, and a prompt, open Build an MCP Server.

For an image from a prompt, open Generate Image.

For a table that fills as JSON streams, open Streaming Structured Table.

For a blog desk where a researcher and an SEO agent run together and a writer uses their notes, open Subagents.

React Native or Expo needs an absolute server URL and an XHR transport. See Quick Start: React Native.

No UI: see Quick Start: Server Only.

1. Install

2. Stream from the server

Call chat(). Then wrap the result with toServerSentEventsResponse.

import {
  chat,
  chatParamsFromRequest,
  toServerSentEventsResponse,
} from "@tanstack/ai";
import { openaiText } from "@tanstack/ai-openai";

export async function POST(request: Request) {
  const { messages, threadId, runId } = await chatParamsFromRequest(request);

  const stream = chat({
    adapter: openaiText("gpt-5.6"),
    messages,
    threadId,
    runId,
  });

  return toServerSentEventsResponse(stream);
}

This works with TanStack Start, Next.js, SvelteKit, Hono, and any host that returns a Web Response.

A Remix controller action can return this same Response.

If your server is Node streams (Express), see Quick Start: Server Only.

Put the API key on the server:

OPENAI_API_KEY=your-openai-api-key

The adapter reads OPENAI_API_KEY at runtime. Do not send this key to the browser.

If you do not want a server key, see Bring Your Own Key.

3. Render the chat

Send a message. Tokens show up in the UI.

Later

• Tools for function calling
• Streaming for cancel, callbacks, and transports
• Adapters for other providers