tanstack-ai

Name: tanstack-ai
Availability: InStock
Author: Durable Streams

Stream real-time chat messages with TanStack AI and Durable Streams.

1.7k|64|Updated Dec 4, 2025

Search Tags:#tanstack #ai #real-time #sync #chat #ssr #durable-streams

Ready to run

npx skills add https://github.com/durable-streams/durable-streams --skill tanstack-ai-durable-streams

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: tanstack-ai
Source: https://github.com/durable-streams/durable-streams/tree/main/packages/tanstack-ai-transport/skills/tanstack-ai
Command: npx skills add https://github.com/durable-streams/durable-streams --skill tanstack-ai-durable-streams

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Developers building AI chat interfaces need a reliable way to stream user prompts and model responses with durability, replayability, and real‑time synchronization across multiple clients and server‑side rendering contexts.

Core Features & Use Cases

durableStreamConnection: client‑side adapter that ties TanStack AI's useChat to a Durable Stream for bi‑directional messaging.
toDurableChatSessionResponse: server‑side helper that writes model output to the stream while optionally creating the stream on‑demand.
SSR hydration: materializeSnapshotFromDurableStream materializes the current conversation snapshot for server‑rendered pages.
Multi‑client live sync: enable live:true in useChat to keep all participants up‑to‑date.
Secure read‑proxy: server endpoint forwards Durable Stream reads without exposing the secret.

Use cases include building collaborative chat assistants, AI‑driven support bots, and real‑time multi‑user storytelling apps.

Quick Start

Create a chat session by importing durableStreamConnection, configuring the send and read URLs, and passing the connection to useChat with live synchronization enabled.

Frequently Asked Questions about tanstack-ai

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I stream AI chat messages with real-time multi-client synchronization?▼

You can stream AI chat messages with real-time multi-client synchronization by binding TanStack AI React bindings to a Durable Streams service. This enables bi-directional messaging and live state synchronization across all connected clients.

How does server-side rendering work for AI chat conversations?▼

Server-side rendering for AI chat conversations works by materializing a snapshot from the Durable Stream. This snapshot hydrates server-rendered pages before client connection, ensuring immediate content visibility and consistent state.

Can I use TanStack AI with a secure read-proxy for streaming chat responses?▼

Yes, you can use TanStack AI with a secure read-proxy by configuring a server endpoint that forwards Durable Stream reads. This writes model output to the stream without exposing your secret API keys to the client.

What do I need to set up durable and replayable chat streams?▼

To set up durable and replayable chat streams, you need a Durable Streams service, TanStack AI React bindings, and environment variables for DS and model API keys. This configuration stores conversation history for reliable replay.

How do I create an AI chat session on-demand from a server endpoint?▼

Create an AI chat session on-demand from a server endpoint using the toDurableChatSessionResponse helper. This server-side function writes model output to the stream and optionally initializes the Durable Stream if it does not exist.