AG-UI protocol
Client sends AG-UI requests and consumes AG-UI events, no proprietary stream format.
AG-UI compliant
Client sends AG-UI requests and consumes AG-UI events in both directions.
Agent loop
chat() runs model-tool cycle with composable (state) => boolean stop conditions.
Agent loop strategies
Agent loop strategies provided by the core @tanstack/ai library.
Building a Full Stack DevJokes App with TanStack Start
BYOK key form
OpenRouterKeyForm saves the key via byok.update and reads status with useByok.
defineByokProvider
Defines a BYOK provider with id, label, env, and with options.
onChunk and onFinish callbacks
onChunk fires on each event; onFinish fires with the completed message.
chat(options)
Creates a streaming chat response, returning an async iterable of StreamChunk.
Chat Completions adapter
openaiChatCompletions calls /v1/chat/completions for older wire formats.
chat() server function
Runs the model call and returns a stream wrapped with toServerSentEventsResponse.
chatParamsFromRequest(req)
Reads an HTTP Request, parses JSON body, and validates against AG-UI RunAgentInputSchema.
Client persistence modes
persistence: true uses the server; a storage adapter uses localStorage, sessionStorage or indexedDB.
Code Mode
Package @tanstack/ai-code-mode: model writes one TS program in a V8/QuickJS/Worker isolate.
Automated Codemod
jscodeshift codemod for client-side renames like body to forwardedProps.
Connection adapters
Provider adapters such as @tanstack/ai-openai for OpenAI, Anthropic, Grok.
createChatHook
Factory called once at module scope to register widgets and return useAppChat and useChatContext.
createChatUI
Lower-level kit for manual message traversal.
fetchHttpStream
NDJSON HTTP streaming adapter for environments that block SSE.
fetchServerSentEvents
Default SSE adapter, supports dynamic URL/headers and resumable streams.
forwardedProps
AG-UI request field carrying forwarded values; replaces legacy body/data.
Framework Agnostic Core
Core library works anywhere, including Next.js, TanStack Start, Remix 3, React Native, Express, React Router v7.
Hybrid Tools
Tools implemented for both server and client execution contexts.
Install uuid for generating unique IDs
Interrupts store
Pause for human approval and resume days later via an interrupts store.
Isomorphic Tools
Define once with toolDefinition(), implement with .server() or .client().
JSON Schema Objects
Pass raw JSON Schema objects directly; input/output types infer as unknown.
Keep Files After Reload
Reuse the same persistence object so sandbox workspace files survive provider sandbox loss.
mergeAgentTools
Merges a server-side tool registry with AG-UI client-declared tools; server tools win on collision.
Message parts
Text, thinking, tool calls and results arrive as typed parts.
metadata.tanstack Extras
TanStack-specific wire event fields placed under metadata.tanstack.
Multiple Providers
Adapters for OpenRouter, OpenAI, Anthropic, Gemini, Ollama, and more.
Nice to know
OpenAI adapter
Access OpenAI models including GPT-4o, GPT-5, DALL-E, TTS, and Whisper.
Prerequisites
Provider adapters
Eleven official adapters plus openaiCompatible; types narrow per model.
Queue Component
Maps pending sends with cancelQueued() bound per item.
Responses API adapter
openaiText calls /v1/responses and supports reasoning summaries.
Coding-agent harnesses
Server persistence middleware
withPersistence writes transcript, run status and pending approvals into your own store.
Server route streaming
chat() wrapped with toServerSentEventsResponse streams tokens back from the server route.
Server-Sent Events transport
toServerSentEventsResponse wraps the stream; other transports via Connection Adapters.
Setting up a TanStack Start Project
Speaker diarization
Use gpt-4o-transcribe-diarize for speaker-labeled transcripts.
toServerSentEventsResponse
Converts a stream to an HTTP Response with proper SSE headers.
toServerSentEventsStream
Converts a stream to a ReadableStream in Server-Sent Events format.
Step 1.1: Create a JSON File with Jokes
Step 1.2: Create Types for Our Data
Step 1.3: Create Server Functions to Read the File
Step 1.4: Consume Server Function on the Client Side
Step 1: Reading Data From a File
stop()
Aborts the client fetch; pass the same AbortController to chat() to stop the model.
stream
Adapter for in-process AsyncIterable<StreamChunk> sources.
Structured outputs
Both adapters support JSON schema structured outputs with streaming.
summarize(options)
Creates a text summarization returning a SummarizationResult with the summary text.
threadId
AG-UI standard identifier replacing deprecated conversationId.
toolDefinition()
Creates a shared tool schema from @tanstack/ai.
ToolExecutionContext
Server .server() receives { context, toolCallId, emitCustomEvent }.
Tool States
States include awaiting-input, input-streaming, input-complete, approval-requested, approval-responded.
Type-safe Model Options
Type-safe Model Options based on adapter and model selection.
Typesafe models
Typed options for every model; wrong values fail in the editor.
Typed Props
ToolProps, PartProps, InterruptProps, LayoutProps, MessageProps, InputProps, and QueueProps for exact typing.
UI framework bindings
Seven bindings: React, Vue, Solid, Svelte, Preact, Angular, plus framework-free client.
Understanding the project structure
useAppChat
Hook called in the screen to create the chat instance, rendered via chat.AppChat.
useChat hook
React hook that sends the BYOK key in an x-byok- header and updates messages as tokens arrive.
useChat hook
Client hook that updates messages as chunks arrive and exposes isLoading.
What You'll Learn
xhrHttpStream
XHR-based NDJSON adapter for React Native and Expo.
xhrServerSentEvents
XHR-based SSE adapter with resumable support.
Zod Schemas
Recommended schema option providing full TypeScript inference and runtime validation.