@yourgpt/copilot-sdk

Build AI Copilots for Your Product.

Production-ready AI Copilots for any product. Connect any LLM, deploy on your infrastructure, own your data.

Installation

npm install @yourgpt/copilot-sdk @yourgpt/llm-sdk

Quick Start

import { CopilotProvider } from "@yourgpt/copilot-sdk/react";
import { CopilotChat } from "@yourgpt/copilot-sdk/ui";

function App() {
  return (
    <CopilotProvider runtimeUrl="/api/chat">
      <YourApp />
      <CopilotChat />
    </CopilotProvider>
  );
}

Subpath Exports

Styling (Tailwind CSS v4)

/* app/globals.css */
@import "tailwindcss";

/* IMPORTANT: Path is relative to your CSS file location */
/* If globals.css is in app/ folder, use ../ prefix */
@source "../node_modules/@yourgpt/copilot-sdk/dist/**/*.{js,ts,jsx,tsx}";

@custom-variant dark (&:is(.dark *));

Note: The @source path must point to dist/ (not src/) and include all file extensions {js,ts,jsx,tsx}.

Important: For Tailwind v4, you also need the @theme inline block to map CSS variables like --background to Tailwind utilities like bg-background. If you have shadcn/ui, this is already configured. Otherwise, see the Quick Start guide for complete setup.

Theming

Works automatically with existing shadcn/ui setup. For projects without shadcn:

import "@yourgpt/copilot-sdk/ui/styles.css";
import "@yourgpt/copilot-sdk/ui/themes/claude.css"; // Optional preset

<div className="csdk-theme-claude">
  <CopilotChat />
</div>;

8 theme presets available: Claude, Vercel, Supabase, Twitter, Linear, PostHog, Catppuccin, Modern

Documentation

Visit copilot-sdk.yourgpt.ai for full documentation including:

• Theme customization & CSS variables
• Semantic CSS classes (csdk-*)
• Creating custom themes
• Dark mode support

License

MIT