tanstack-ai

$npx mdskill add EpicenterHQ/epicenter/tanstack-ai

Applies TanStack AI patterns for chat state, tools, and streaming responses

  • Builds and manages chat state using createChat and UIMessage types
  • Leverages @tanstack/ai, @tanstack/ai-svelte, and provider model adapters
  • Coordinates tool calling, approvals, and streamed message parts
  • Delivers UI-ready chat components and Svelte integrations

SKILL.md

.github/skills/tanstack-aiView on GitHub ↗
---
name: tanstack-ai
description: TanStack AI patterns for @tanstack/ai, @tanstack/ai-svelte, chat state, streamed responses, UIMessage parts, tool calling, tool approvals, and provider model adapters. Use when working on AI chat, createChat, fetchServerSentEvents, UIMessage conversion, or TanStack AI tools.
metadata:
  author: epicenter
  version: '1.0'
---

# TanStack AI

## Reference Repositories

- [TanStack AI](https://github.com/tanstack/ai) - Framework and adapters for AI chat, streaming, tools, and provider integrations

## Upstream Grounding

When TanStack AI behavior, `createChat`, streamed message parts, tool calling, approvals, provider adapters, or Svelte bindings affect correctness, ask DeepWiki a narrow question against `tanstack/ai` before relying on memory. Use it to orient, then verify decisive details against local installed types, source, or official docs before changing code.

Skip DeepWiki for repo-local chat persistence and UI patterns already visible in the app.

## When to Apply This Skill

Use this pattern when you need to:

- Build or refactor chat state based on `createChat`.
- Convert persisted workspace messages to or from TanStack AI `UIMessage` values.
- Render `MessagePart`, tool-call, or tool-result parts.
- Bridge workspace actions into TanStack AI tools.
- Debug streamed responses, reload behavior, stop behavior, or tool approvals.

## Package Boundaries

- Server activity functions live in `@tanstack/ai`: `chat`, generation helpers, stream conversion, model-message conversion, and server tool definitions.
- Client lifecycle lives in `@tanstack/ai-client`: chat client state, stream processing, tool approval plumbing, and client tool results.
- Svelte runes integration lives in `@tanstack/ai-svelte`: `createChat`, `fetchServerSentEvents`, and Svelte-friendly reactive state.
- Import provider adapters from their specific packages for tree shaking, such as `@tanstack/ai-openai` or `@tanstack/ai-anthropic`.

## Streaming And Tool Calls

- Prefer `toServerSentEventsResponse` on the server and `fetchServerSentEvents` on the client for chat streams.
- Treat AG-UI stream chunks and `MessagePart` variants as a discriminated stream protocol. Render every known part deliberately and keep an unknown fallback for forward compatibility.
- Use `StreamProcessor` when replaying, debugging, or transforming stream chunks outside the normal chat client.
- Approval flow uses the approval id. Do not assume it is the same as the tool call id.
- After a client tool produces a result, continue the chat through the TanStack AI client path instead of manually appending a fake assistant response.
- In Svelte components that own a chat instance, call `chat.stop()` or dispose the owner on unmount when a stream may still be active.
- Use `aiEventClient` observability events when diagnosing stream, adapter, or tool behavior.

## Local Anchors

- `apps/tab-manager/src/lib/chat/chat-state.svelte.ts` shows Svelte chat state, persistence, streaming, and tool approval handling.
- `apps/tab-manager/src/lib/chat/ui-message.ts` owns the persisted-message to TanStack-message boundary.
- `packages/workspace/src/ai/tool-bridge.ts` converts workspace actions into client tools and serializable server tool definitions.

More from EpicenterHQ/epicenter

SkillDescription
agent-goalWrite `/goal` prompts for long-running agent work in Codex or Claude Code. Use for slash goal, agent goal, durable objective, autonomous coding run.
approachability-auditReview code as a new TypeScript developer. Use when code feels indirect, clever, hard to follow, or needs a pass on abstractions, names, first-read clarity.
arktypeArktype: runtime validation, discriminated unions with .merge()/.or(), spread keys. Use when mentioning arktype, type(), union types, command/event schemas.
attach-primitiveContract and invariants for `attach*` composition primitives in `packages/workspace` (side-effectful building blocks like attachIndexedDb, attachSqlite, attachBroadcastChannel, attachEncryption, attachTable, openCollaboration), and when to use `create*` (pure construction) instead. Use when writing or reviewing an `attach*` or `create*` function, naming a new workspace primitive, composing inside a workspace builder, or deciding whether a primitive registers listeners at call time.
authEpicenter auth packages: `@epicenter/auth`, `@epicenter/auth-svelte`, OAuth sessions, identity state, auth-owned fetch/WebSocket, and workspace lifecycle binding. Use when editing Epicenter auth clients, session state, hosted sign-in, or auth/workspace integration.
autumnAutumn billing in Epicenter: `autumn.config.ts`, `autumn-js` credit checks, `atmn` CLI, plan gates, and metered AI usage. Use when changing billing, pricing, credits, plan access, refunds, or usage events.
better-auth-best-practicesBetter Auth server/client setup: `auth.ts`, generated schema, DB adapters, sessions, cookies, env vars, and plugins. Use when mentioning Better Auth, betterauth, auth handlers, OAuth, email/password, or session configuration.
better-auth-security-best-practicesBetter Auth security hardening: rate limits, secrets, CSRF, trusted origins, cookies, sessions, OAuth tokens, and audit logging. Use when reviewing auth security, brute-force protection, token handling, or deployment safety.
change-proposalPresent proposed code changes visually before implementing. Use when: "show me options", "compare approaches", "what should we do", or when changes need before/after comparison.
claude-code-consultUse this skill when the user asks to consult Claude, ask Claude Code, get another model's take, run a taste check, find cleaner options, or prepare a Claude prompt. Create a bounded second-opinion prompt or run a read-only Claude Code consult, then verify Claude's claims against local files.