From 147bf06ed8eeaf3a7da90ed418c670f12f75dbb1 Mon Sep 17 00:00:00 2001 From: Sahil Date: Mon, 2 Feb 2026 16:00:30 +0530 Subject: [PATCH] feat(docs): restructure documentation for improved navigation and clarity - Introduced a new "Getting Started" page, consolidating quick setup instructions and prerequisites for using the SDK. - Updated the main index to link to the new "Getting Started" page and removed the outdated "Quick Start" page. - Enhanced the overall documentation structure by replacing references to "Quick Start" with "Getting Started" for consistency. - Added a permanent redirect from "/docs/quickstart" to "/docs/getting-started" to streamline user access. BREAKING: None - changes are backward compatible. --- apps/docs/content/docs/getting-started.mdx | 320 +++++++++++++++ apps/docs/content/docs/index.mdx | 137 ++----- apps/docs/content/docs/meta.json | 6 +- apps/docs/content/docs/overview.mdx | 2 +- apps/docs/content/docs/quickstart.mdx | 430 --------------------- apps/docs/content/docs/why-copilot-sdk.mdx | 2 +- apps/docs/next.config.mjs | 9 + 7 files changed, 371 insertions(+), 535 deletions(-) create mode 100644 apps/docs/content/docs/getting-started.mdx delete mode 100644 apps/docs/content/docs/quickstart.mdx 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