Agent skill · Frontend

tanstack-ai

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.

majiayu000github.com/majiayu000GitHub ↗
claude-codeMIT
Install
npx skills add majiayu000/claude-skill-registry --skill tanstack-ai-secondsky-claude-skills-2 --agent claude-code

Same command for any agent — swap --agent for codex, cursor, copilot.

Facts
Files in the skill folder: 2
SKILL.md size: 14 KB
Bundled scripts: none
Path: skills/ai-llm/tanstack-ai-secondsky-claude-skills-2/SKILL.md
Open the folder on GitHub →
Where it comes from
Stars: 534
Language: HTML

Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.

From the SKILL.md

# TanStack AI (Provider-Agnostic LLM SDK) **Status**: Production Ready ✅ **Last Updated**: 2025-12-09 **Dependencies**: Node.js 18+, TypeScript 5+; React 18+ for `@tanstack/ai-react`; Solid 1.8+ for `@tanstack/ai-solid` **Latest Versions**: @tanstack/ai@latest (alpha), @tanstack/ai-react@latest, @tanstack/ai-client@latest, adapters: @tanstack/ai-openai@latest @tanstack/ai-anthropic@latest @tanstack/ai-gemini@latest @tanstack/ai-ollama@latest --- ## Quick Start (7 Minutes) ### 1) Install core + adapter ```bash pnpm add @tanstack/ai @tanstack/ai-react @tanstack/ai-openai # swap adapters as needed: @tanstack/ai-anthropic @tanstack/ai-gemini @tanstack/ai-ollama pnpm add zod # recommended for tool schemas ``` **Why this matters:** - Core is framework-agnostic; React binding just wraps the headless client. citeturn1search3 - Adapters abstract provider quirks so you can change models without rewriting code. citeturn1search3 ### 2) Ship a streaming chat endpoint (Next.js or TanStack Start) ```ts // app/api/chat/route.ts (Next.js) or src/routes/api/chat.ts (TanStack Start) import { chat, toStreamResponse } from '@tanstack/ai' import { openai } from '@tanstack/ai-openai' import { tools

What's inside
Steps it walks through
  1. Quick Start (7 Minutes)
  2. 1) Install core + adapter
  3. 2) Ship a streaming chat endpoint (Next.js or TanStack Start)
  4. 3) Wire the client with useChat + SSE
  5. The 4-Step Setup Process
  6. Step 1: Choose provider + model safely
  7. Step 2: Define tools once, implement per runtime
  8. Step 3: Create connection adapter + chat options
  9. Step 4: Add observability + guardrails
  10. Critical Rules
  11. Always Do
  12. Never Do
  13. Known Issues Prevention
  14. Issue #1: “tool not found” / silent tool failures
Ships with 1 file
  • metadata.json
Commands it runs
pnpm add @tanstack/ai @tanstack/ai-react @tanstack/ai-openai
swap adapters as needed: @tanstack/ai-anthropic @tanstack/ai-gemini @tanstack/ai-ollama
pnpm add zod              # recommended for tool schemas
More from claude-skill-registry
All skills →
descriptive-statisticsSummarizing and visualizing data through measures of center, spread, shape, and position. Covers…Data & Analyticsperplexity-researcher-reasoning-proHighest level of research and reasoning capabilities for complex decision-making with significant…OtherretroBrutally honest engineering retrospective. Analyzes git history for what actually happened — not…Data & AnalyticsanalyzeUniversal multi-perspective analyzer for any topic, file, idea, or decision. Extract key points…Otherarize-prompt-optimizationINVOKE THIS SKILL when optimizing, improving, or debugging LLM prompts using production trace data…Data & Analyticscellxgene-contextGuide for integrating CellxGene Census single-cell data with ENCODE bulk experiments. Use when…Data & Analytics
About this skill
What does the tanstack-ai skill do?

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.

How do I install it?

Run `npx skills add majiayu000/claude-skill-registry --skill tanstack-ai-secondsky-claude-skills-2 --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.

Where does this skill come from?

From majiayu000/claude-skill-registry, a repository with 534 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.

Is a popular skill a good skill?

Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.

Keep going
All skills →
The full catalog, by category and by tool.
Open Source Radar →
The repositories these skills come from, watched daily.
The people behind them →
Makers and builders across the ecosystem.