Quick Start

Get your AI copilot running in 5 minutes.

Prerequisites: Node 18+, React 18+, an LLM API key (OpenAI, Anthropic, etc.)

Install

pnpm add @yourgpt/copilot-sdk-react @yourgpt/copilot-sdk-ui @yourgpt/copilot-sdk-runtime zod

npm install @yourgpt/copilot-sdk-react @yourgpt/copilot-sdk-ui @yourgpt/copilot-sdk-runtime zod

yarn add @yourgpt/copilot-sdk-react @yourgpt/copilot-sdk-ui @yourgpt/copilot-sdk-runtime zod

Setup

Create API Route (Backend)

app/api/chat/route.ts

import { createRuntime, createOpenAI } from '@yourgpt/copilot-sdk-runtime';

const openai = createOpenAI({
  apiKey: process.env.OPENAI_API_KEY!,
});

const runtime = createRuntime({
  provider: openai,
  model: 'gpt-4o-mini',
  systemPrompt: 'You are a helpful assistant.',
});

export async function POST(request: Request) {
  return runtime.handleRequest(request);
}

Add Provider (Frontend)

app/providers.tsx

'use client';

import { YourGPTProvider } from '@yourgpt/copilot-sdk-react';

export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <YourGPTProvider runtimeUrl="/api/chat">
      {children}
    </YourGPTProvider>
  );
}

app/layout.tsx

import { Providers } from './providers';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <Providers>{children}</Providers>
      </body>
    </html>
  );
}

Add Chat Component

app/page.tsx

import { CopilotChat } from '@yourgpt/copilot-sdk-ui';

export default function Home() {
  return (
    <div className="h-screen p-4">
      <CopilotChat className="h-full rounded-xl border" />
    </div>
  );
}

Environment Variables

.env.local

OPENAI_API_KEY=sk-...

That's it!

Run pnpm dev and you have a working AI chat.

Next Steps

Chat Component - Customize the chat UI
Tools - Add AI capabilities
Providers - Use different LLM providers

Quick Start

On this page