@tanstack/solid-ai-devtools weekly downloads statistics

<div align="center"> <picture> <source media="(prefers-color-scheme: dark)" srcset="https://tanstack.com/api/readme/ai.png?theme=dark" /> <source media="(prefers-color-scheme: light)" srcset="https://tanstack.com/api/readme/ai.png" /> <img src="https://tanstack.com/api/readme/ai.png" alt="TanStack AI" width="900" /> </picture> </div> <br /> <div align="center"> <a href="https://npmjs.com/package/@tanstack/ai" target="_parent"> <img alt="NPM downloads" src="https://img.shields.io/npm/dm/@tanstack/ai.svg" /> </a> <a href="https://github.com/TanStack/ai" target="_parent"> <img alt="GitHub stars" src="https://img.shields.io/github/stars/TanStack/ai.svg?style=social&label=Star" /> </a> <a href="https://github.com/TanStack/ai/releases" target="_parent"> <img alt="Release" src="https://img.shields.io/github/v/release/tanstack/ai" /> </a> <a href="https://bundlephobia.com/result?p=@tanstack/ai@latest" target="_parent"> <img alt="Bundle size" src="https://badgen.net/bundlephobia/minzip/@tanstack/ai@latest" /> </a> <a href="https://twitter.com/tan_stack"> <img alt="Follow @TanStack" src="https://img.shields.io/twitter/follow/tan_stack.svg?style=social" /> </a> </div> <br /> <div align="center"> <a href="https://tanstack.com/blog/tanstack-open-source-awards-2026"> <img src="https://raw.githubusercontent.com/TanStack/ai/16826d81cade868956df240d6239a671e689193c/media/js-open-source-award-2026-ai-project-of-the-year.svg" alt="Winner of the 2026 JavaScript Open Source Award for AI Project of the Year" width="250" /> </a> </div>

TanStack AI

Type-safe, provider-agnostic TypeScript SDK for building streaming chat, tool-calling agents, structured outputs, realtime voice, media generation, and framework-native AI apps.

TanStack AI is built from composable activities and provider adapters. Use one provider or switch between many. Import only chat, or add image, audio, video, speech, transcription, summarization, realtime, Code Mode, devtools, and framework bindings as your app needs them.

<a href="https://tanstack.com/ai">Read the docs -></a>

Start Here

• Overview - what TanStack AI is and how the packages fit together.
• Quick Start: React - add streaming chat to a React app.
• Quick Start: Vue - build with Vue composables.
• Quick Start: Svelte - build with Svelte 5 runes.
• Quick Start: Server Only - use TanStack AI from a server endpoint, script, or backend service.
• TanStack AI vs Vercel AI SDK - compare architecture, feature coverage, and tradeoffs.

What You Can Build

• Streaming chat experiences with typed messages, tool calls, reasoning parts, and configurable connection adapters.
• Type-safe tools that can run on the server or client from one shared toolDefinition() contract.
• Structured output flows backed by JSON Schema, Zod, ArkType, Valibot, or plain JSON Schema.
• Multimodal prompts and responses that include text, images, audio, video, and documents.
• Image, audio, video, speech, transcription, and summarization workflows using a shared generation client pattern.
• Realtime voice chat with provider adapters for realtime sessions and token minting.
• Code Mode agents that let an LLM write and execute TypeScript in an isolated sandbox to orchestrate tools with loops, branches, and parallel calls.
• Devtools and observability pipelines for inspecting messages, tool calls, stream chunks, errors, usage, and OpenTelemetry traces.
• Framework-native clients for React, Solid, Vue, Svelte, and Preact, plus a headless client for custom runtimes.

Install

Install the core package and the provider/framework packages your app uses:

pnpm add @tanstack/ai @tanstack/ai-openai

For a React chat UI:

pnpm add @tanstack/ai @tanstack/ai-client @tanstack/ai-react @tanstack/ai-openai

OpenRouter is also a good starting point if you want access to many providers through one API key:

pnpm add @tanstack/ai @tanstack/ai-openrouter

Streaming Chat

import { chat, toServerSentEventsResponse } from '@tanstack/ai'
import { openaiText } from '@tanstack/ai-openai'

export async function POST(request: Request) {
  const body = await request.json()

  const stream = chat({
    adapter: openaiText('gpt-5.2'),
    messages: body.messages,
  })

  return toServerSentEventsResponse(stream)
}

Learn more in the Chat & Streaming docs and Connection Adapters docs.

Type-Safe Tools

Define a tool once, then attach a server or client implementation with the same input and output types:

import { toolDefinition } from '@tanstack/ai'
import { z } from 'zod'

const getProducts = toolDefinition({
  name: 'getProducts',
  description: 'Search the product catalog',
  inputSchema: z.object({ query: z.string() }),
  outputSchema: z.array(
    z.object({
      id: z.string(),
      name: z.string(),
    }),
  ),
}).server(async ({ query }) => {
  return db.products.search(query)
})

Learn more in the Tools docs, Tool Approval Flow docs, and Lazy Tool Discovery docs.

Structured Outputs

Use outputSchema when you need typed objects instead of freeform text:…