Agent skill · software engineering · secondsky

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.

Why this skill is useful

Provides specific commands and patterns for integrating various chat APIs with React and Solid, which the AI wouldn't reliably generate on its own.

What it needs

Requires node, pnpm, typescript installed locally. Requires anthropic, gemini, ollama, openai account access. About 7k tokens when loaded. Last updated 2026-08-06. 204 stars on the source repository.

What this skill does

TanStack AI (Provider-Agnostic LLM SDK) Status: Production Ready ✅ Last Updated: 2025-12-09 Dependencies: Node.js 20+, TypeScript 5+; React 19+ 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 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) CRITICAL: Pass tool definitions to the server so the LLM can request them; implementations live in their runtimes. citeturn0search7 Always stream; chunked responses keep UIs responsive and reduce token waste. citeturn0search1 3) Wire the client with useChat + SSE CRITICAL: Use fetchServerSentEvents (or matching adapter) to mirror the streaming response. citeturn0search0 Keep client tool names identical to definitions to avoid “tool not found” errors. citeturn0search7 --- The 4-Step Setup Process Step 1: Choose provider + model safely Add the correct adapter and set the matching API key (OPENAIAPIKEY, ANTHROPICAPIKEY, GEMINIAPIKEY, or Ollama host). Prefer per-model option typing from adapters to avoid invalid options (e.g., vision-only fields). citeturn1search3 Step 2: Define tools once, implement per runtime Key Points: needsApproval: true forces explicit user approval for sensitive actions. citeturn0search1 Keep tools single-purpose and idempotent; return structured objects instead of throwing errors. citeturn0search1 Step 3: Create connection adapter + chat options Server: toStreamResponse(stream) for HTTP streaming; toServerSentEventsStream helper for Server-Sent Events. …

How to use it

Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:

@skills secondsky/tanstack-ai

View the source on GitHub

Browse the @skills marketplace