TanStack AI Patterns (Alpha)

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

// 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

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">Thinking...</div>}
      </div>

      <form onSubmit={handleSubmit}>
        <input
          value={input}
          onChange={(e) => setInput(e.target.value)}
          placeholder="Type a message..."
          disabled={isLoading}
        />
        <button type="submit" disabled={isLoading || !input.trim()}>
          Send
        </button>
      </form>

      {error && <div className="error">{error.message}</div>}
    </div>
  )
}

Streaming Responses

import { useCompletion } from '@tanstack/ai-react'
import { ai } from '@/lib/ai'

function StreamingCompletion() {
  const {
    completion,
    complete,
    isLoading,
    stop,
  } = useCompletion({
    ai,
    model: 'gpt-4',
  })

  const handleGenerate = () => {
    complete('Write a short story about a robot learning to paint.')
  }

  return (
    <div>
      <button onClick={handleGenerate} disabled={isLoading}>
        Generate Story
      </button>
      {isLoading && (
        <button onClick={stop}>Stop</button>
      )}
      <div className="completion">
        {completion}
        {isLoading && <span className="cursor">|</span>}
      </div>
    </div>
  )
}