examples

TanStack AI Examples

This directory contains comprehensive examples demonstrating TanStack AI across multiple languages and frameworks.

Quick Start

Choose an example based on your use case:

Want a full-stack TypeScript app? → TanStack Chat (ts-react-chat)
Need a vanilla JS frontend? → Vanilla Chat
Building a Python backend? → Python FastAPI Server
Building a PHP backend? → PHP Slim Framework Server
Multi-User TypeScript chat app? → Group Chat (ts-group-chat)

TypeScript Examples

TanStack Chat (ts-react-chat)

A full-featured chat application built with the TanStack ecosystem.

Tech Stack:

TanStack Start (full-stack React framework)
TanStack Router (type-safe routing)
TanStack Store (state management)
@tanstack/ai (AI backend)
@tanstack/ai-react (React hooks)
@tanstack/ai-client (headless client)

Features:

✅ Real-time streaming with OpenAI GPT-4o
✅ Automatic tool execution loop
✅ Rich markdown rendering
✅ Conversation management
✅ Modern UI with Tailwind CSS

Getting Started:

cd examples/ts-react-chat
pnpm install
cp env.example .env
# Edit .env and add your OPENAI_API_KEY
pnpm start

📖 Full Documentation

Group Chat (ts-group-chat)

A real-time multi-user chat application with AI integration, demonstrating WebSocket-based communication and TanStack AI.

Tech Stack:

TanStack Start (full-stack React framework)
TanStack Router (type-safe routing)
Cap'n Web RPC (bidirectional WebSocket RPC)
@tanstack/ai (AI backend)
@tanstack/ai-anthropic (Claude adapter)
@tanstack/ai-client (headless client)
@tanstack/ai-react (React hooks)

Features:

✅ Real-time multi-user chat with WebSocket
✅ Online presence tracking
✅ AI assistant (Claude) integration with queuing
✅ Message broadcasting to all users
✅ Modern chat UI (iMessage-style)
✅ Username-based authentication (no registration)

Getting Started:

cd examples/ts-group-chat
pnpm install
cp .env.example .env
# Edit .env and add your ANTHROPIC_API_KEY
pnpm dev

Open http://localhost:4000 in multiple browser tabs to test multi-user functionality.

Key Concepts:

WebSocket RPC: Uses Cap'n Web RPC for type-safe bidirectional communication
AI Queuing: Claude requests are queued and processed sequentially
Real-time Updates: Messages and online users update in real-time
Message Broadcasting: Server broadcasts messages to all connected clients

📖 Full Documentation

Vanilla Chat

A framework-free chat application using pure JavaScript and @tanstack/ai-client. Works with both PHP and Python backends.

Tech Stack:

Vanilla JavaScript (no frameworks!)
@tanstack/ai-client (headless client)
Vite (dev server)
Compatible with PHP Slim or Python FastAPI backends

Features:

✅ Pure vanilla JavaScript
✅ Real-time streaming messages
✅ Beautiful, responsive UI
✅ No framework dependencies
✅ Works with multiple backend languages

Getting Started:

Option 1: With Python Backend

# Start the Python backend first
cd examples/python-fastapi
python anthropic-server.py

# Then start the frontend
cd examples/vanilla-chat
pnpm install
pnpm start

Option 2: With PHP Backend

# Start the PHP backend and UI together
cd examples/php-slim
pnpm install
composer install
cp env.example .env
# Edit .env and add your ANTHROPIC_API_KEY
pnpm start

Open http://localhost:3001 (UI) - connects to backend on port 8000

📖 Full Documentation

Python Examples

Python FastAPI Server

A FastAPI server that streams AI responses in Server-Sent Events (SSE) format, compatible with TanStack AI clients.

Features:

✅ FastAPI with SSE streaming
✅ Converts Anthropic/OpenAI events to StreamChunk format
✅ Compatible with @tanstack/ai-client
✅ Tool call support
✅ Type-safe with Pydantic

Getting Started:

cd examples/python-fastapi

# Create virtual environment
python3 -m venv venv
source venv/bin/activate  # On Windows: venv\Scripts\activate

# Install dependencies
pip install -r requirements.txt

# Set up environment
cp env.example .env
# Edit .env and add your ANTHROPIC_API_KEY or OPENAI_API_KEY

# Run the server
python anthropic-server.py  # or openai-server.py

API Endpoints:

POST /chat - Stream chat responses in SSE format
GET /health - Health check

Usage with TypeScript Client:

import { ChatClient, fetchServerSentEvents } from '@tanstack/ai-client'

const client = new ChatClient({
  connection: fetchServerSentEvents('http://localhost:8000/chat'),
})

await client.sendMessage('Hello!')

📖 Full Documentation

PHP Examples

PHP Slim Framework Server

A PHP Slim Framework server that streams AI responses in SSE format, with support for both Anthropic and OpenAI.

Features:

✅ Slim Framework with SSE streaming
✅ Converts Anthropic/OpenAI events to StreamChunk format
✅ Compatible with @tanstack/ai-client
✅ Tool call support
✅ PHP 8.1+ with type safety

Getting Started:

cd examples/php-slim

# Install dependencies
composer install

# Set up environment
cp env.example .env
# Edit .env and add your ANTHROPIC_API_KEY and/or OPENAI_API_KEY

# Run the server
composer start-anthropic  # Runs on port 8000
# or
composer start-openai     # Runs on port 8001

API Endpoints:

POST /chat - Stream chat responses in SSE format
GET /health - Health check

Usage with TypeScript Client:

import { ChatClient, fetchServerSentEvents } from '@tanstack/ai-client'

const client = new ChatClient({
  connection: fetchServerSentEvents('http://localhost:8000/chat'),
})

await client.sendMessage('Hello!')

📖 Full Documentation

Architecture Patterns

Full-Stack TypeScript

Use TanStack AI end-to-end in TypeScript:

Frontend (React)
  ↓ (useChat hook)
@tanstack/ai-react
  ↓ (ChatClient)
@tanstack/ai-client
  ↓ (SSE/HTTP)
Backend (TanStack Start API Route)
  ↓ (chat() function)
@tanstack/ai
  ↓ (adapter)
AI Provider (OpenAI/Anthropic/etc.)

Example: TanStack Chat (ts-react-chat)

Multi-Language Backend

Use Python or PHP for the backend, TypeScript for the frontend:

Frontend (Vanilla JS/React/Vue/etc.)
  ↓ (ChatClient)
@tanstack/ai-client
  ↓ (SSE/HTTP)
Backend (Python FastAPI or PHP Slim)
  ↓ (tanstack-ai or tanstack/ai)
Stream Conversion & Message Formatting
  ↓ (provider SDK)
AI Provider (OpenAI/Anthropic/etc.)

Examples:

Python FastAPI + Vanilla Chat
PHP Slim + Vanilla Chat
PHP Slim + any frontend with @tanstack/ai-client

Common Patterns

Server-Sent Events (SSE) Streaming

All examples use SSE for real-time streaming:

Backend (TypeScript):

import { chat, toServerSentEventsResponse } from '@tanstack/ai'
import { openaiText } from '@tanstack/ai-openai'

const stream = chat({
  adapter: openaiText(),
  model: 'gpt-4o',
  messages,
})

return toServerSentEventsResponse(stream)

Backend (Python):

from tanstack_ai import StreamChunkConverter, format_sse_chunk

async for event in anthropic_stream:
    chunks = await converter.convert_event(event)
    for chunk in chunks:
        yield format_sse_chunk(chunk)

Backend (PHP):

use TanStack\AI\StreamChunkConverter;
use TanStack\AI\SSEFormatter;

foreach ($anthropicStream as $event) {
    $chunks = $converter->convertEvent($event);
    foreach ($chunks as $chunk) {
        echo SSEFormatter::formatChunk($chunk);
    }
}

Frontend:

import { ChatClient, fetchServerSentEvents } from '@tanstack/ai-client'

const client = new ChatClient({
  connection: fetchServerSentEvents('/api/chat'),
})

Automatic Tool Execution

The TypeScript backend (@tanstack/ai) automatically handles tool execution:

import { chat, toolDefinition } from '@tanstack/ai'
import { z } from 'zod'

// Step 1: Define the tool schema
const weatherToolDef = toolDefinition({
  name: 'getWeather',
  description: 'Get weather for a location',
  inputSchema: z.object({
    location: z.string().describe('The city and state, e.g. San Francisco, CA'),
  }),
  outputSchema: z.object({
    temp: z.number(),
    condition: z.string(),
  }),
})

// Step 2: Create server implementation
const weatherTool = weatherToolDef.server(async ({ location }) => {
  // This is called automatically by the SDK
  return { temp: 72, condition: 'sunny' }
})

const stream = chat({
  adapter: openaiText(),
  model: 'gpt-4o',
  messages,
  tools: [weatherTool], // SDK executes these automatically
})

Clients receive:

content chunks - text from the model
tool_call chunks - when the model calls a tool
tool_result chunks - results from tool execution
done chunk - conversation complete

Development Tips

Running Multiple Examples

You can run backend and frontend examples together:

# Option 1: Python backend + Vanilla Chat frontend
# Terminal 1: Start Python backend
cd examples/python-fastapi
python anthropic-server.py

# Terminal 2: Start vanilla frontend
cd examples/vanilla-chat
pnpm start

# Option 2: PHP backend + Vanilla Chat frontend (runs together)
cd examples/php-slim
pnpm start  # Starts both PHP server and vanilla-chat UI

# Option 3: Full-stack TypeScript
cd examples/ts-react-chat
pnpm start

Environment Variables

Each example has an env.example file. Copy it to .env and add your API keys:

# TypeScript examples
OPENAI_API_KEY=sk-...
ANTHROPIC_API_KEY=sk-ant-...

# Python examples
ANTHROPIC_API_KEY=sk-ant-...
OPENAI_API_KEY=sk-...

# PHP examples
ANTHROPIC_API_KEY=sk-ant-...
OPENAI_API_KEY=sk-...

Building for Production

TypeScript:

pnpm build

Python:

# Use a production ASGI server
uvicorn anthropic-server:app --host 0.0.0.0 --port 8000

PHP:

# Use a production web server (Apache, Nginx, etc.)
# See php-slim/README.md for deployment details

Contributing

When adding new examples:

Create a README.md with setup instructions
Add an env.example file with required environment variables
Document the tech stack and key features
Include usage examples with code snippets
Update this README to list your example

Learn More

📖 Main README - Project overview
📖 Documentation - Comprehensive guides
📖 TypeScript Packages - Core libraries
📖 Python Package - Python utilities
📖 PHP Package - PHP utilities

Built with ❤️ by the TanStack community

Name		Name	Last commit message	Last commit date
parent directory ..
php-slim		php-slim
python-fastapi		python-fastapi
ts-group-chat		ts-group-chat
ts-react-chat		ts-react-chat
ts-react-media		ts-react-media
ts-solid-chat		ts-solid-chat
ts-svelte-chat		ts-svelte-chat
ts-vue-chat		ts-vue-chat
vanilla-chat		vanilla-chat
README.md		README.md

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

README.md

TanStack AI Examples

Quick Start

TypeScript Examples

TanStack Chat (ts-react-chat)

Group Chat (ts-group-chat)

Vanilla Chat

Python Examples

Python FastAPI Server

PHP Examples

PHP Slim Framework Server

Architecture Patterns

Full-Stack TypeScript

Multi-Language Backend

Common Patterns

Server-Sent Events (SSE) Streaming

Automatic Tool Execution

Development Tips

Running Multiple Examples

Environment Variables

Building for Production

Contributing

Learn More

Uh oh!

FilesExpand file tree

examples

Directory actions

More options

Directory actions

More options

Latest commit

History

examples

Folders and files

parent directory

README.md

TanStack AI Examples

Quick Start

TypeScript Examples

TanStack Chat (ts-react-chat)

Group Chat (ts-group-chat)

Vanilla Chat

Python Examples

Python FastAPI Server

PHP Examples

PHP Slim Framework Server

Architecture Patterns

Full-Stack TypeScript

Multi-Language Backend

Common Patterns

Server-Sent Events (SSE) Streaming

Automatic Tool Execution

Development Tips

Running Multiple Examples

Environment Variables

Building for Production

Contributing

Learn More