tanstack-ai-patterns-alphalisted
Install: claude install-skill smicolon/ai-kit
# TanStack AI Patterns (Alpha)
> **Alpha Library**: TanStack AI is in alpha. APIs may change between versions.
TanStack AI provides a unified SDK for integrating AI capabilities into React applications.
## Core Concepts
- **Providers**: Backend AI providers (OpenAI, Anthropic, etc.)
- **Streams**: Real-time streaming responses
- **Chat**: Conversational interfaces
- **Completion**: Text completion
- **Hooks**: React hooks for AI interactions
## Basic Setup
```typescript
// lib/ai.ts
import { createAI } from '@tanstack/ai'
export const ai = createAI({
provider: 'openai',
apiKey: import.meta.env.VITE_OPENAI_API_KEY,
// Or use server-side proxy
baseUrl: '/api/ai',
})
```
## Chat Interface
```typescript
import { useChat } from '@tanstack/ai-react'
import { ai } from '@/lib/ai'
function ChatInterface() {
const {
messages,
input,
setInput,
sendMessage,
isLoading,
error,
} = useChat({
ai,
model: 'gpt-4',
systemPrompt: 'You are a helpful assistant.',
})
const handleSubmit = (e: React.FormEvent) => {
e.preventDefault()
if (input.trim()) {
sendMessage(input)
setInput('')
}
}
return (
<div className="chat-container">
<div className="messages">
{messages.map((message) => (
<div
key={message.id}
className={`message ${message.role}`}
>
{message.content}
</div>
))}
{isLoading && <div className="loading