diff --git a/apps/docs/content/docs/getting-started.mdx b/apps/docs/content/docs/getting-started.mdx
new file mode 100644
index 0000000..4a02da9
--- /dev/null
+++ b/apps/docs/content/docs/getting-started.mdx
@@ -0,0 +1,320 @@
+---
+title: Getting Started
+description: Get up and running in 2 minutes
+icon: RocketCustom
+---
+
+import { Tab, Tabs } from 'fumadocs-ui/components/tabs';
+import { Callout } from 'fumadocs-ui/components/callout';
+import { Accordion, Accordions } from 'fumadocs-ui/components/accordion';
+
+
+**Prerequisites:** Node 18+, an LLM API key (OpenAI, Anthropic, etc.)
+
+
+
+Use the CLI to scaffold a complete project: `npx create-ai-copilot`
+
+
+---
+
+## 1. Install Dependencies
+
+
+
+ ```bash
+ pnpm add @yourgpt/copilot-sdk @yourgpt/llm-sdk @anthropic-ai/sdk zod
+ ```
+
+
+ ```bash
+ pnpm add @yourgpt/copilot-sdk @yourgpt/llm-sdk openai zod
+ ```
+
+
+ The `openai` package works with OpenAI, Google Gemini, and xAI (all OpenAI-compatible APIs).
+
+
+
+
+---
+
+## 2. Create API Route
+
+
+
+ ```ts title="app/api/chat/route.ts"
+ import { streamText } from '@yourgpt/llm-sdk';
+ import { anthropic } from '@yourgpt/llm-sdk/anthropic';
+
+ export async function POST(req: Request) {
+ const { messages } = await req.json();
+
+ const result = await streamText({
+ model: anthropic('claude-sonnet-4-20250514'),
+ system: 'You are a helpful assistant.',
+ messages,
+ });
+
+ return result.toTextStreamResponse();
+ }
+ ```
+
+ ```bash title=".env.local"
+ ANTHROPIC_API_KEY=sk-ant-...
+ ```
+
+
+ ```ts title="app/api/chat/route.ts"
+ import { streamText } from '@yourgpt/llm-sdk';
+ import { openai } from '@yourgpt/llm-sdk/openai';
+
+ export async function POST(req: Request) {
+ const { messages } = await req.json();
+
+ const result = await streamText({
+ model: openai('gpt-4o'),
+ system: 'You are a helpful assistant.',
+ messages,
+ });
+
+ return result.toTextStreamResponse();
+ }
+ ```
+
+ ```bash title=".env.local"
+ OPENAI_API_KEY=sk-...
+ ```
+
+
+ ```ts title="app/api/chat/route.ts"
+ import { streamText } from '@yourgpt/llm-sdk';
+ import { google } from '@yourgpt/llm-sdk/google';
+
+ export async function POST(req: Request) {
+ const { messages } = await req.json();
+
+ const result = await streamText({
+ model: google('gemini-2.0-flash'),
+ system: 'You are a helpful assistant.',
+ messages,
+ });
+
+ return result.toTextStreamResponse();
+ }
+ ```
+
+ ```bash title=".env.local"
+ GOOGLE_API_KEY=...
+ ```
+
+
+
+
+See [Providers](/docs/providers) for more providers and configuration options.
+
+
+---
+
+## 3. Add Provider
+
+```tsx title="app/providers.tsx"
+'use client';
+
+import { CopilotProvider } from '@yourgpt/copilot-sdk/react';
+
+export function Providers({ children }: { children: React.ReactNode }) {
+ return (
+
+ {children}
+
+ );
+}
+```
+
+Wrap your app with the provider:
+
+```tsx title="app/layout.tsx"
+import { Providers } from './providers';
+
+export default function RootLayout({ children }) {
+ return (
+
+
+ {children}
+
+
+ );
+}
+```
+
+---
+
+## 4. Add Chat Component
+
+```tsx title="app/page.tsx"
+import { CopilotChat } from '@yourgpt/copilot-sdk/ui';
+
+export default function Home() {
+ return (
+
+
+
+ );
+}
+```
+
+---
+
+## 5. Configure Tailwind
+
+The SDK uses Tailwind CSS utility classes. Add the SDK source path based on your CSS file location:
+
+| CSS file location | @source path |
+|-------------------|--------------|
+| `app/globals.css` | `@source "../node_modules/@yourgpt/copilot-sdk/dist/**/*.{js,ts,jsx,tsx}";` |
+| `src/app/globals.css` | `@source "../../node_modules/@yourgpt/copilot-sdk/dist/**/*.{js,ts,jsx,tsx}";` |
+| `globals.css` (root) | `@source "node_modules/@yourgpt/copilot-sdk/dist/**/*.{js,ts,jsx,tsx}";` |
+
+```css title="app/globals.css"
+@import "tailwindcss";
+
+/* Include SDK package for Tailwind class detection */
+@source "../node_modules/@yourgpt/copilot-sdk/dist/**/*.{js,ts,jsx,tsx}";
+
+@custom-variant dark (&:is(.dark *));
+
+/* Your existing shadcn/ui @theme and variables... */
+```
+
+The SDK works automatically with your existing shadcn/ui CSS variables.
+
+
+
+ If you don't have shadcn/ui, you need to add both the `@theme inline` block and CSS variables:
+
+ ```css title="app/globals.css"
+ @import "tailwindcss";
+
+ @source "../node_modules/@yourgpt/copilot-sdk/dist/**/*.{js,ts,jsx,tsx}";
+
+ @custom-variant dark (&:is(.dark *));
+
+ /* Map CSS variables to Tailwind theme (required for Tailwind v4) */
+ @theme inline {
+ --color-background: var(--background);
+ --color-foreground: var(--foreground);
+ --color-card: var(--card);
+ --color-card-foreground: var(--card-foreground);
+ --color-popover: var(--popover);
+ --color-popover-foreground: var(--popover-foreground);
+ --color-primary: var(--primary);
+ --color-primary-foreground: var(--primary-foreground);
+ --color-secondary: var(--secondary);
+ --color-secondary-foreground: var(--secondary-foreground);
+ --color-muted: var(--muted);
+ --color-muted-foreground: var(--muted-foreground);
+ --color-accent: var(--accent);
+ --color-accent-foreground: var(--accent-foreground);
+ --color-destructive: var(--destructive);
+ --color-border: var(--border);
+ --color-input: var(--input);
+ --color-ring: var(--ring);
+ --radius-sm: calc(var(--radius) - 4px);
+ --radius-md: calc(var(--radius) - 2px);
+ --radius-lg: var(--radius);
+ --radius-xl: calc(var(--radius) + 4px);
+ }
+
+ /* Define CSS variables */
+ :root {
+ --background: hsl(0 0% 100%);
+ --foreground: hsl(240 10% 3.9%);
+ --card: hsl(0 0% 100%);
+ --card-foreground: hsl(240 10% 3.9%);
+ --popover: hsl(0 0% 100%);
+ --popover-foreground: hsl(240 10% 3.9%);
+ --primary: hsl(240 5.9% 10%);
+ --primary-foreground: hsl(0 0% 98%);
+ --secondary: hsl(240 4.8% 95.9%);
+ --secondary-foreground: hsl(240 5.9% 10%);
+ --muted: hsl(240 4.8% 95.9%);
+ --muted-foreground: hsl(240 3.8% 46.1%);
+ --accent: hsl(240 4.8% 95.9%);
+ --accent-foreground: hsl(240 5.9% 10%);
+ --destructive: hsl(0 84.2% 60.2%);
+ --border: hsl(240 5.9% 90%);
+ --input: hsl(240 5.9% 90%);
+ --ring: hsl(240 5.9% 10%);
+ --radius: 0.5rem;
+ }
+
+ .dark {
+ --background: hsl(240 10% 3.9%);
+ --foreground: hsl(0 0% 98%);
+ --card: hsl(240 10% 3.9%);
+ --card-foreground: hsl(0 0% 98%);
+ --popover: hsl(240 10% 3.9%);
+ --popover-foreground: hsl(0 0% 98%);
+ --primary: hsl(0 0% 98%);
+ --primary-foreground: hsl(240 5.9% 10%);
+ --secondary: hsl(240 3.7% 15.9%);
+ --secondary-foreground: hsl(0 0% 98%);
+ --muted: hsl(240 3.7% 15.9%);
+ --muted-foreground: hsl(240 5% 64.9%);
+ --accent: hsl(240 3.7% 15.9%);
+ --accent-foreground: hsl(0 0% 98%);
+ --destructive: hsl(0 62.8% 30.6%);
+ --border: hsl(240 3.7% 15.9%);
+ --input: hsl(240 3.7% 15.9%);
+ --ring: hsl(240 4.9% 83.9%);
+ }
+
+ @layer base {
+ * {
+ @apply border-border;
+ }
+ body {
+ @apply bg-background text-foreground;
+ }
+ }
+ ```
+
+
+ The `@theme inline` block is **required** for Tailwind v4 to map CSS variables to utility classes like `bg-background`.
+
+
+
+
+ Add the SDK package to your Tailwind config content paths:
+
+ ```js title="tailwind.config.js"
+ /** @type {import('tailwindcss').Config} */
+ module.exports = {
+ content: [
+ './app/**/*.{js,ts,jsx,tsx,mdx}',
+ './components/**/*.{js,ts,jsx,tsx,mdx}',
+ './node_modules/@yourgpt/copilot-sdk/dist/**/*.{js,ts,jsx,tsx}',
+ ],
+ theme: {
+ extend: {},
+ },
+ plugins: [],
+ };
+ ```
+
+
+
+---
+
+## Done!
+
+Run `pnpm dev` and you have a working AI chat.
+
+---
+
+## Next Steps
+
+- [Copilot UI](/docs/ui) - Themes and styling
+- [Add AI Tools](/docs/tools) - Give AI capabilities
+- [Switch Providers](/docs/providers) - Use different LLMs
diff --git a/apps/docs/content/docs/index.mdx b/apps/docs/content/docs/index.mdx
index 7d7fa2c..548a6ce 100644
--- a/apps/docs/content/docs/index.mdx
+++ b/apps/docs/content/docs/index.mdx
@@ -7,9 +7,8 @@ icon: Notebook
import { Cards, Card } from 'fumadocs-ui/components/card';
import { Callout } from 'fumadocs-ui/components/callout';
import { Tab, Tabs } from 'fumadocs-ui/components/tabs';
-import { Zap, Brain, Wrench, Bot, Plug, Code, MessageCircleMore } from 'lucide-react';
+import { Zap, Brain, Wrench, Bot, Plug, Code, MessageCircleMore, Play, BookOpen, Rocket } from 'lucide-react';
import { MessageQuestionIcon } from '@/components/icons/message-question';
-import { AiChat } from '@/components/icons/ai-chat';
-
-
- );
-}
-```
-
-That's a working AI chat. Want the AI to see your screen when users say "I have an error"?
-
-```tsx
-
-
-
-```
-
-Done. The SDK handles consent UI, captures context, sends it to the AI.
-
----
-
## Packages
| Package | What it does |
@@ -74,110 +43,80 @@ Done. The SDK handles consent UI, captures context, sends it to the AI.
| `@yourgpt/copilot-sdk` | React hooks, provider, UI components, and core utilities |
| `@yourgpt/llm-sdk` | Multi-provider LLM integration + streaming |
-### SDK Requirements
-
-| Provider | SDK Required |
-|----------|--------------|
-| OpenAI, Google, xAI | `openai` |
-| Anthropic | `@anthropic-ai/sdk` |
-
-Most providers use OpenAI-compatible APIs, so you only need one of 2 SDKs. [Learn more →](/docs/providers#why-only-2-sdks)
-
---
## Quick Install
-
-
+
+
```bash
- npm install @yourgpt/copilot-sdk @yourgpt/llm-sdk openai
+ pnpm add @yourgpt/copilot-sdk @yourgpt/llm-sdk @anthropic-ai/sdk
```
-
+
```bash
- pnpm add @yourgpt/copilot-sdk @yourgpt/llm-sdk openai
+ npm install @yourgpt/copilot-sdk @yourgpt/llm-sdk @anthropic-ai/sdk
```
```bash
- bun add @yourgpt/copilot-sdk @yourgpt/llm-sdk openai
+ bun add @yourgpt/copilot-sdk @yourgpt/llm-sdk @anthropic-ai/sdk
```
-The `openai` SDK works with OpenAI, Google Gemini, and xAI. For Anthropic, use `@anthropic-ai/sdk` instead. [See all providers →](/docs/providers)
+For OpenAI, Google, or xAI, use `openai` package instead of `@anthropic-ai/sdk`. [See all providers →](/docs/providers)
---
-## The Flow
+## How It Works
```
-User types message
- ↓
-CopilotProvider sends to your /api/chat
- ↓
-Runtime talks to OpenAI/Anthropic/etc
- ↓
-AI decides: respond OR call a tool
- ↓
-Tool executes client-side → result sent back
- ↓
-AI continues until done (agentic loop)
- ↓
-Response streams to UI
+User sends message → Your API route → LLM Provider
+ ↓
+ UI ← Stream response ← AI responds or calls tools
+ ↓
+ Tool executes → Result sent back → AI continues
```
-All of this is handled. You just define tools and build UI.
+You define tools, we handle the rest.
---
-## Real Example: Navigation Tool
-
-```tsx
-import { useToolWithSchema } from '@yourgpt/copilot-sdk/react';
-import { z } from 'zod';
-
-function NavigationTool() {
- const navigate = useNavigate();
-
- useToolWithSchema({
- name: 'navigate_to_page',
- description: 'Navigate user to a specific page',
- schema: z.object({
- path: z.string().describe('The URL path to navigate to'),
- }),
- handler: async ({ path }) => {
- navigate(path);
- return { success: true, navigatedTo: path };
- },
- });
-
- return null;
-}
-```
+## Quick Links
-Now when user says "take me to settings", AI calls `navigate_to_page({ path: '/settings' })`.
+
+ }>
+ Set up your first AI copilot in minutes
+
+ }>
+ Try the SDK live in your browser
+
+ }>
+ Real-world demo applications
+
+ }>
+ See what makes this SDK different
+
+
---
-## What's Next?
+## Explore
- }>
- See what makes Copilot SDK different
+ }>
+ Pre-built components and themes
- }>
- The main product - plug & play AI chat
+ }>
+ Frontend & backend tool execution
}>
- OpenAI, Anthropic, Google, and more
-
- }>
- Quick start with React hooks
+ OpenAI, Anthropic, Google, xAI, and more
- }>
- Generative UI and tool execution
+ }>
+ Share app state with AI
diff --git a/apps/docs/content/docs/meta.json b/apps/docs/content/docs/meta.json
index 9a01aee..c4db2bb 100644
--- a/apps/docs/content/docs/meta.json
+++ b/apps/docs/content/docs/meta.json
@@ -4,7 +4,7 @@
"---Getting Started---",
"index",
"why-copilot-sdk",
- "quickstart",
+ "getting-started",
"examples",
"playground",
"---Copilot---",
@@ -20,8 +20,6 @@
"multimodal",
"---AI---",
"llm-sdk",
- "providers",
- "---API Reference---",
- "api-reference"
+ "providers"
]
}
diff --git a/apps/docs/content/docs/overview.mdx b/apps/docs/content/docs/overview.mdx
index 30cb129..99f45c1 100644
--- a/apps/docs/content/docs/overview.mdx
+++ b/apps/docs/content/docs/overview.mdx
@@ -90,6 +90,6 @@ AI calls `search_products({ query: "wireless headphones" })` → Shows results.
## Next Steps
-- [Quick Start](/docs/quickstart) - 5 minute setup
+- [Getting Started](/docs/getting-started) - 5 minute setup
- [Chat](/docs/chat) - Chat component docs
- [Frontend Tools](/docs/tools/frontend-tools) - Build AI capabilities
diff --git a/apps/docs/content/docs/quickstart.mdx b/apps/docs/content/docs/quickstart.mdx
deleted file mode 100644
index 5922d9a..0000000
--- a/apps/docs/content/docs/quickstart.mdx
+++ /dev/null
@@ -1,430 +0,0 @@
----
-title: Quick Start
-description: Get up and running in 2 minutes
-icon: RocketCustom
----
-
-import { Tab, Tabs } from 'fumadocs-ui/components/tabs';
-import { Callout } from 'fumadocs-ui/components/callout';
-import { Accordion, Accordions } from 'fumadocs-ui/components/accordion';
-import { Steps, Step } from 'fumadocs-ui/components/steps';
-
-
-**Prerequisites:** Node 18+, an LLM API key (OpenAI, Anthropic, etc.)
-
-
-## At a Glance
-
-
-
----
-
-## Detailed Setup
-
-
-
- ## Add to Existing Project
-
- Already have a Next.js, Vite, or React app? Add the SDK manually.
-
- ---
-
- ### 1. Install Dependencies
-
-
-
- ```bash
- pnpm add @yourgpt/copilot-sdk @yourgpt/llm-sdk openai zod
- ```
-
-
- The `openai` package works with OpenAI, Google Gemini, and xAI (all OpenAI-compatible APIs).
-
-
-
- ```bash
- pnpm add @yourgpt/copilot-sdk @yourgpt/llm-sdk @anthropic-ai/sdk zod
- ```
-
-
- Anthropic requires the `@anthropic-ai/sdk` package instead of `openai`.
-
-
-
-
- ---
-
- ### 2. Create API Route
-
-
-
- ```ts title="app/api/chat/route.ts"
- import { streamText } from '@yourgpt/llm-sdk';
- import { openai } from '@yourgpt/llm-sdk/openai';
-
- export async function POST(req: Request) {
- const { messages } = await req.json();
-
- const result = await streamText({
- model: openai('gpt-5.2'),
- system: 'You are a helpful assistant.',
- messages,
- });
-
- return result.toTextStreamResponse();
- }
- ```
-
- ```bash title=".env.local"
- OPENAI_API_KEY=sk-...
- ```
-
-
- First install Anthropic SDK:
- ```bash
- pnpm add @anthropic-ai/sdk
- ```
-
- ```ts title="app/api/chat/route.ts"
- import { streamText } from '@yourgpt/llm-sdk';
- import { anthropic } from '@yourgpt/llm-sdk/anthropic';
-
- export async function POST(req: Request) {
- const { messages } = await req.json();
-
- const result = await streamText({
- model: anthropic('claude-sonnet-4-20250514'),
- system: 'You are a helpful assistant.',
- messages,
- });
-
- return result.toTextStreamResponse();
- }
- ```
-
- ```bash title=".env.local"
- ANTHROPIC_API_KEY=sk-ant-...
- ```
-
-
- ```ts title="app/api/chat/route.ts"
- import { streamText } from '@yourgpt/llm-sdk';
- import { google } from '@yourgpt/llm-sdk/google';
-
- export async function POST(req: Request) {
- const { messages } = await req.json();
-
- const result = await streamText({
- model: google('gemini-2.0-flash'),
- system: 'You are a helpful assistant.',
- messages,
- });
-
- return result.toTextStreamResponse();
- }
- ```
-
- ```bash title=".env.local"
- GOOGLE_API_KEY=...
- ```
-
-
- Google Gemini uses OpenAI-compatible API via the `openai` package you already installed.
-
-
-
-
- ---
-
- ### 3. Verify Environment Variable
-
- Make sure your `.env.local` has the API key for your chosen provider.
-
-
- See [Providers](/docs/providers) for more providers and configuration options.
-
-
- ---
-
- ### 4. Add Provider (Frontend)
-
- ```tsx title="app/providers.tsx"
- 'use client';
-
- import { CopilotProvider } from '@yourgpt/copilot-sdk/react';
-
- export function Providers({ children }: { children: React.ReactNode }) {
- return (
-
- {children}
-
- );
- }
- ```
-
- Wrap your app with the provider:
-
- ```tsx title="app/layout.tsx"
- import { Providers } from './providers';
-
- export default function RootLayout({ children }) {
- return (
-
-
- {children}
-
-
- );
- }
- ```
-
- ---
-
- ### 5. Add Chat Component
-
- ```tsx title="app/page.tsx"
- import { CopilotChat } from '@yourgpt/copilot-sdk/ui';
-
- export default function Home() {
- return (
-
-
-
- );
- }
- ```
-
- ---
-
- ### 6. Configure Styling (Tailwind CSS v4)
-
- The SDK uses Tailwind CSS utility classes with CSS variables for theming. If you have shadcn/ui configured, just add the SDK source path based on your CSS file location:
-
- | CSS file location | @source path |
- |-------------------|--------------|
- | `app/globals.css` | `@source "../node_modules/@yourgpt/copilot-sdk/dist/**/*.{js,ts,jsx,tsx}";` |
- | `src/app/globals.css` | `@source "../../node_modules/@yourgpt/copilot-sdk/dist/**/*.{js,ts,jsx,tsx}";` |
- | `globals.css` (root) | `@source "node_modules/@yourgpt/copilot-sdk/dist/**/*.{js,ts,jsx,tsx}";` |
-
- ```css title="app/globals.css"
- @import "tailwindcss";
-
- /* Include SDK package for Tailwind class detection */
- @source "../node_modules/@yourgpt/copilot-sdk/dist/**/*.{js,ts,jsx,tsx}";
-
- @custom-variant dark (&:is(.dark *));
-
- /* Your existing shadcn/ui @theme and variables... */
- ```
-
- The SDK works automatically with your existing shadcn/ui CSS variables.
-
-
-
- If you don't have shadcn/ui, you need to add both the `@theme inline` block and CSS variables:
-
- ```css title="app/globals.css"
- @import "tailwindcss";
-
- /* Include SDK package for Tailwind class detection */
- @source "../node_modules/@yourgpt/copilot-sdk/dist/**/*.{js,ts,jsx,tsx}";
-
- @custom-variant dark (&:is(.dark *));
-
- /* Map CSS variables to Tailwind theme (required for Tailwind v4) */
- @theme inline {
- --color-background: var(--background);
- --color-foreground: var(--foreground);
- --color-card: var(--card);
- --color-card-foreground: var(--card-foreground);
- --color-popover: var(--popover);
- --color-popover-foreground: var(--popover-foreground);
- --color-primary: var(--primary);
- --color-primary-foreground: var(--primary-foreground);
- --color-secondary: var(--secondary);
- --color-secondary-foreground: var(--secondary-foreground);
- --color-muted: var(--muted);
- --color-muted-foreground: var(--muted-foreground);
- --color-accent: var(--accent);
- --color-accent-foreground: var(--accent-foreground);
- --color-destructive: var(--destructive);
- --color-border: var(--border);
- --color-input: var(--input);
- --color-ring: var(--ring);
- --radius-sm: calc(var(--radius) - 4px);
- --radius-md: calc(var(--radius) - 2px);
- --radius-lg: var(--radius);
- --radius-xl: calc(var(--radius) + 4px);
- }
-
- /* Define CSS variables (or import styles.css) */
- :root {
- --background: hsl(0 0% 100%);
- --foreground: hsl(240 10% 3.9%);
- --card: hsl(0 0% 100%);
- --card-foreground: hsl(240 10% 3.9%);
- --popover: hsl(0 0% 100%);
- --popover-foreground: hsl(240 10% 3.9%);
- --primary: hsl(240 5.9% 10%);
- --primary-foreground: hsl(0 0% 98%);
- --secondary: hsl(240 4.8% 95.9%);
- --secondary-foreground: hsl(240 5.9% 10%);
- --muted: hsl(240 4.8% 95.9%);
- --muted-foreground: hsl(240 3.8% 46.1%);
- --accent: hsl(240 4.8% 95.9%);
- --accent-foreground: hsl(240 5.9% 10%);
- --destructive: hsl(0 84.2% 60.2%);
- --border: hsl(240 5.9% 90%);
- --input: hsl(240 5.9% 90%);
- --ring: hsl(240 5.9% 10%);
- --radius: 0.5rem;
- }
-
- .dark {
- --background: hsl(240 10% 3.9%);
- --foreground: hsl(0 0% 98%);
- --card: hsl(240 10% 3.9%);
- --card-foreground: hsl(0 0% 98%);
- --popover: hsl(240 10% 3.9%);
- --popover-foreground: hsl(0 0% 98%);
- --primary: hsl(0 0% 98%);
- --primary-foreground: hsl(240 5.9% 10%);
- --secondary: hsl(240 3.7% 15.9%);
- --secondary-foreground: hsl(0 0% 98%);
- --muted: hsl(240 3.7% 15.9%);
- --muted-foreground: hsl(240 5% 64.9%);
- --accent: hsl(240 3.7% 15.9%);
- --accent-foreground: hsl(0 0% 98%);
- --destructive: hsl(0 62.8% 30.6%);
- --border: hsl(240 3.7% 15.9%);
- --input: hsl(240 3.7% 15.9%);
- --ring: hsl(240 4.9% 83.9%);
- }
-
- @layer base {
- * {
- @apply border-border;
- }
- body {
- @apply bg-background text-foreground;
- }
- }
- ```
-
-
- The `@theme inline` block is **required** for Tailwind v4 to map CSS variables to utility classes like `bg-background`.
-
-
-
-
- Add the SDK package to your Tailwind config content paths:
-
- ```js title="tailwind.config.js"
- /** @type {import('tailwindcss').Config} */
- module.exports = {
- content: [
- './app/**/*.{js,ts,jsx,tsx,mdx}',
- './components/**/*.{js,ts,jsx,tsx,mdx}',
- './node_modules/@yourgpt/copilot-sdk/dist/**/*.{js,ts,jsx,tsx}',
- ],
- theme: {
- extend: {},
- },
- plugins: [],
- };
- ```
-
-
- The content path should be relative to where your `tailwind.config.js` is located (usually the project root). Adjust the path if your config is in a different location.
-
-
-
-
-
- The `@source` path is relative to your CSS file location. If your `globals.css` is in the `app/` folder, use `../node_modules/...`. If it's at the project root, use `node_modules/...` (without `../`).
-
-
- ---
-
- ### Done!
-
- Run `pnpm dev` and you have a working AI chat.
-
- ---
-
- ### Next Steps
-
- - [Customize the Chat UI](/docs/chat)
- - [Add AI Tools](/docs/tools)
- - [Switch Providers](/docs/providers)
-
-
-
- ## Create New Project
-
- The fastest way to start - one command creates everything:
-
-
-
- ```bash
- pnpm create ai-copilot
- ```
-
-
- ```bash
- npx create-ai-copilot
- ```
-
-
- ```bash
- yarn create ai-copilot
- ```
-
-
- ```bash
- bunx create-ai-copilot
- ```
-
-
-
- The CLI will guide you through:
-
- 1. **Project name** - Name your app
- 2. **Framework** - Next.js (full-stack) or Vite + React
- 3. **Provider** - OpenAI, Anthropic, Google, or xAI
- 4. **API Key** - Optional, can add to `.env` later
-
-
- The CLI creates a complete project with frontend, backend, and styling ready to go.
-
-
- ### Run Your App
-
- ```bash
- cd my-app
- pnpm dev
- ```
-
- Open [http://localhost:3000](http://localhost:3000) - your AI copilot is ready!
-
- ---
-
- ### What's Included
-
- The generated project includes:
-
- - **Frontend** - React chat UI with `@yourgpt/copilot-sdk`
- - **Backend** - API route with `@yourgpt/llm-sdk`
- - **Styling** - Tailwind CSS with shadcn/ui theming
- - **TypeScript** - Full type safety
- - **Environment** - `.env` file for API keys
-
- ---
-
- ### Next Steps
-
- - [Customize the Chat UI](/docs/chat)
- - [Add AI Tools](/docs/tools)
- - [Switch Providers](/docs/providers)
-
-
diff --git a/apps/docs/content/docs/why-copilot-sdk.mdx b/apps/docs/content/docs/why-copilot-sdk.mdx
index 1dc8d79..245c43f 100644
--- a/apps/docs/content/docs/why-copilot-sdk.mdx
+++ b/apps/docs/content/docs/why-copilot-sdk.mdx
@@ -94,7 +94,7 @@ Now your AI can see screenshots and read console errors.
## Ready to Build?
- }>
+ }>
Go from zero to AI copilot in 5 minutes
}>
diff --git a/apps/docs/next.config.mjs b/apps/docs/next.config.mjs
index 26f3596..7eca515 100644
--- a/apps/docs/next.config.mjs
+++ b/apps/docs/next.config.mjs
@@ -6,6 +6,15 @@ const PLAYGROUND_URL = process.env.PLAYGROUND_URL || "https://copilot-playground
/** @type {import('next').NextConfig} */
const config = {
reactStrictMode: true,
+ async redirects() {
+ return [
+ {
+ source: "/docs/quickstart",
+ destination: "/docs/getting-started",
+ permanent: true,
+ },
+ ];
+ },
async rewrites() {
return [
// Playground proxy