Overview
What is Copilot SDK
Copilot SDK lets you add AI chat to any React app. Tools execute on the frontend, giving the AI real capabilities in your app.
How It Works
Your React App
CopilotProvider
CopilotChat
Chat UI
Tools
Frontend
Context
App State
HTTP Stream
/api/chat(Backend)
LLM Provider(OpenAI, Anthropic, etc)
Key Concepts
Chat
Pre-built chat UI component with streaming, markdown, and code highlighting.
Tools
Give the AI abilities - search, navigate, fetch data, show UI.
Providers
Use OpenAI, Anthropic, Google, xAI, and more.
Why Frontend Tools?
Unlike server-side tool execution, frontend tools can:
- Access browser APIs - DOM, localStorage, navigation
- Show rich UI - Render React components as tool results
- Use app state - Read/write your React state directly
- Real-time updates - Stream results as they happen
Tools run in the browser where your app lives. The AI decides what to call, your code executes it.
Quick Example
// Register a tool
useTools({
search_products: {
description: 'Search product catalog',
parameters: z.object({ query: z.string() }),
handler: async ({ query }) => {
const results = await searchAPI(query);
return { products: results };
},
},
});
// That's it - AI can now search your productsUser says: "Find wireless headphones under $100"
AI calls search_products({ query: "wireless headphones" }) → Shows results.
Features
| Feature | Description |
|---|---|
| Chat UI | Pre-built chat with streaming, markdown, code blocks |
| Frontend Tools | Give AI abilities in your app |
| Generative UI | Render React components as tool results |
| Smart AI Context | AI understands your app state |
| Agentic Loop | Multi-step reasoning and tool chains |
| Multimodal | Images, PDFs, and files in chat |
| 4+ Providers | OpenAI, Anthropic, Google, xAI... |
| Backend Tools | Secure backend tool execution |
| Chat History | Persist conversations across sessions |
Next Steps
- Quick Start - 5 minute setup
- Chat - Chat component docs
- Frontend Tools - Build AI capabilities