TanStack.com Documentation Hub

TanStack AI is a framework-agnostic AI toolkit designed to prevent vendor and ecosystem lock-in. It provides a set of open-source libraries that allow developers to build AI applications using their existing stack rather than being forced into a specific cloud provider or framework.

Key Features

• Multi-language Server Support: Support for JavaScript/TypeScript, PHP, and Python (including full agentic flows with tools).
• Provider Adapters: TypeScript adapters for OpenAI, Anthropic, Gemini, and Ollama.
• Open Protocol: A documented communication protocol between server and client that works over any transport layer (HTTP, WebSockets, etc.).
• Isomorphic Tool Support: Define tools once using meta-definitions to provide type safety across both server and client implementations.
• Client Libraries: Available for Vanilla JS, React, and Solid (with Svelte and others coming soon).
• Per-model Type Safety: Full typing for providerOptions on a per-model basis, accounting for different modalities like text, audio, video, and tools.
• Isomorphic Devtools: A dedicated AI devtools panel (built on TanStack Devtools) to debug LLM workflows on both the client and server sides.

TanStack Router is a type-safe routing library designed to solve common challenges in modern web development through several core pillars:

• Contextual Type Safety: Types flow seamlessly through route definitions, parameters, navigation, and state management using TypeScript's natural architecture. This eliminates the need for manual type definitions or AST transformations.
• URL State Management: The library treats the URL as a primary state management system. It provides APIs to validate, read, and update search parameters with built-in type safety and runtime validation, making app state easily shareable and bookmarkable.
• Scalable Routing: Designed to handle complex, deeply nested route hierarchies and thousands of routes without performance degradation.
• Deep Data Integration: Specifically optimized to work with TanStack Query, allowing for seamless prefetching in route loaders, streaming data to the client, and on-demand hydration.

TanStack DB is a client-side database layer powered by differential dataflow that sits on top of TanStack Query.

While TanStack Query manages the fetching and caching of server state (how to get data), TanStack DB manages the coherence and reactivity of that data once it is in the client (how to keep it fast and relational).

Key concepts:

• Collections: Wrappers around useQuery calls (REST, tRPC, GraphQL, etc.) that hold normalized data.
• Transactions: Allow for optimistic mutations; if a mutation fails, the state rolls back automatically.
• Live Queries: Declarative queries that use differential dataflow to stream only the specific rows that changed, providing sub-millisecond updates.

This architecture allows you to move from view-specific API endpoints (Option A) or heavy client-side filtering (Option B) to a model of Normalized Collections + Incremental Joins (Option C), where you load data once and perform lightning-fast joins in the browser.

Server Function Streaming combines the type safety of server functions with the real-time feedback of streaming. It is optimized for TanStack Start.

How it works: If your fetcher returns a Response object (an SSE stream), TanStack AI automatically detects it and parses the stream in real-time. If it returns anything else, it is treated as a direct result. This allows you to keep your input parameter fully typed while still receiving real-time progress events.

Server implementation:

export const generateImageStreamFn = createServerFn({ method: 'POST' })
  .validator(z.object({ prompt: z.string() }))
  .handler(({ data }) =>
    toServerSentEventsResponse(
      generateImage({
        adapter: openaiImage('gpt-image-1'),
        prompt: data.prompt,
        stream: true,
      }),
    ),
  )

Client implementation:

const { generate, result, isLoading } = useGenerateImage({
  fetcher: (input) => generateImageStreamFn({ data: input }),
})

// Client
const { generate, result, isLoading } = useGenerateImage({
  fetcher: (input) => generateImageStreamFn({ data: input }),
})

// Server
export const generateImageStreamFn = createServerFn({ method: 'POST' })
  .validator(z.object({ prompt: z.string() }))
  .handler(({ data }) =>
    toServerSentEventsResponse(
      generateImage({
        adapter: openaiImage('gpt-image-1'),
        prompt: data.prompt,
        stream: true,
      }),
    ),
  )

In TanStack Table V9, reactivity is decoupled from the Table APIs and sits underneath them. This allows different framework adapters to connect state and option reads to their respective reactive primitives.

Signal-Native Adapters (e.g., Solid)

In signal-native environments, calling a Table method (like table.getPageCount()) inside a tracked scope (component, computed, or effect) automatically registers the dependency. The framework updates only the specific reactive scope that performed the read.

React Adapter

Because React does not collect signal reads during render, the React adapter uses @tanstack/react-store.

• Default Behavior: useTable subscribes to every registered state slice. Any change schedules a re-render of the component using the hook.
• Granular Updates: You can pass a selector as the second argument to useTable to narrow the subscription, or use the Subscribe component to create localized update boundaries.