Copilot Overview

YourGPT 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 App                                                       │
│  ┌─────────────────────────────────────────────────────────┐   │
│  │  YourGPTProvider                                         │   │
│  │  ┌──────────────┐  ┌──────────────┐  ┌──────────────┐   │   │
│  │  │  CopilotChat │  │    Tools     │  │   Context    │   │   │
│  │  │              │  │  (Frontend)  │  │   (State)    │   │   │
│  │  └──────────────┘  └──────────────┘  └──────────────┘   │   │
│  └─────────────────────────────────────────────────────────┘   │
│                              ↕                                  │
│                       /api/chat (Backend)                       │
│                              ↕                                  │
│                      LLM Provider (OpenAI, 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, Groq, or run locally with Ollama.

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 products

User 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
Custom Tools	Give AI abilities in your app
Generative UI	Render React components as tool results
Context Awareness	AI understands your app state
Agentic Loop	Multi-step reasoning and tool chains
Multimodal	Images, PDFs, and files in chat
7+ Providers	OpenAI, Anthropic, Google, Groq, Ollama...
Server Actions	Secure backend tool execution
Knowledge Base	RAG with your documents

Next Steps

Quick Start - 5 minute setup
Chat - Chat component docs
Custom Tools - Build AI capabilities

Overview