TanStack AI (alpha) provider-agnostic type-safe chat with streaming for OpenAI, Anthropic, Gemini, Ollama. Use for chat APIs, React/Solid frontends with useChat/ChatClient, isomorphic tools, tool approval flows, agent loops, multimodal inputs, or troubleshooting streaming and
Installs just this skill. Get the whole plugin for auto-invocation.
⚡ How it fires
How this skill gets triggered: by you, by Claude, or both.
Fires itselfClaude auto-loads it when your prompt matches the work.
You can call itInvoke it directly when you want it.
Slash command/tanstack-ai
👁️ Context preview
The summary Claude sees to decide when to auto-load this skill.
TanStack AI (alpha) provider-agnostic type-safe chat with streaming for OpenAI, Anthropic, Gemini, Ollama. Use for chat APIs, React/Solid frontends with useChat/ChatClient, isomorphic tools, tool approval flows, agent loops, multimodal inputs, or troubleshooting streaming and
📊 Stats
Stars194
Forks29
LanguageTypeScript
LicenseMIT
📦 Ships with claude-skills
</> SKILL.md
tanstack-ai.SKILL.md
---name: tanstack-ai
description: "TanStack AI (alpha) provider-agnostic type-safe chat with streaming for OpenAI, Anthropic, Gemini, Ollama. Use for chat APIs, React/Solid frontends with useChat/ChatClient, isomorphic tools, tool approval flows, agent loops, multimodal inputs, or troubleshooting streaming and tool definitions."
metadata:
keywords:
- TanStack AI
- "@tanstack/ai"
- "@tanstack/ai-react"
- "@tanstack/ai-client"
- "@tanstack/ai-solid"
- "@tanstack/ai-openai"
- "@tanstack/ai-anthropic"
- "@tanstack/ai-gemini"
- "@tanstack/ai-ollama"
- toolDefinition
- client tools
- server tools
- tool approval
- agent loop
- streaming
- SSE
- connection adapters
- multimodal
- type-safe models
- TanStack Start
- Next.js API
- toStreamResponse
- fetchServerSentEvents
- chat
- useChat
- ChatClient
- needsApproval
license: MIT
Load reference files for specific implementation scenarios:
- **Adapter Comparison**: Load `references/adapter-matrix.md` when choosing between OpenAI, Anthropic, Gemini, or Ollama adapters, or when debugging provider-specific quirks.
- **React Integration Details**: Load `references/react-integration.md` when implementing useChat hooks, handling SSE streams in React components, or managing client-side tool state.
- **Routing Setup**: Load `references/start-vs-next-routing.md` when setting up API routes in Next.js vs TanStack Start, or troubleshooting streaming response setup.
- **Streaming Issues**: Load `references/streaming-troubleshooting.md` when debugging SSE connection problems, chunk delivery issues, or HTTP streaming configuration.
- **Quick Reference**: Load `references/tanstack-ai-cheatsheet.md` for condensed API patterns, tool definition syntax, or rapid troubleshooting cues.
- **Tool Architecture**: Load `references/tool-patterns.md` when implementing complex client/server tool workflows, approval flows, or hybrid tool patterns.
- **Type Safety Details**: Load `references/type-safety.md` when working with per-model option typing, multimodal inputs, or debugging type errors across adapters.
---
## Advanced Topics
### Per-model type safety
- Use adapter typings to pick valid options per model; avoid generic `any` options on `chat()`. citeturn1search3
- For multimodal models, send `parts` with correct MIME types; unsupported modalities are caught at compile time. citeturn1search3
### Tool approval UX
- Surfaced via `approval` object in `useChat`; render approve/reject UI and persist decision per tool call. citeturn0search1
- For auditable actions, log approval decisions alongside tool inputs.
### Connection adapters
- Default to `fetchServerSentEvents` (SSE) for minimal setup; switch to custom adapters for websockets or HTTP chunking. citeturn0search0
- Use `ImmediateStrategy` in the client to emit every chunk for typing indicator UIs. citeturn0search0
---
## Dependencies
**Required**:
- @tanstack/ai@latest — core chat + tool engine
- @tanstack/ai-react@latest — React bindings (skip for headless usage)
**Solution**: Run `./scripts/check-ai-env.sh` and set the relevant provider key in `.env.local`. Fail fast in the route before invoking `chat()`. citeturn0search1
### Problem: Streaming stops after first chunk
**Solution**: Confirm the server returns `toStreamResponse(stream)` (or SSE helper) and that any reverse proxy allows chunked transfer.
---
## Complete Setup Checklist
Use this checklist to verify your setup:
- [ ] Installed core + one adapter and zod
- [ ] API route returns `toStreamResponse(stream)` with tool **definitions** included
