Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
55 changes: 19 additions & 36 deletions packages/copilot-sdk/README.md
Original file line number Diff line number Diff line change
@@ -1,9 +1,15 @@
# @yourgpt/copilot-sdk
<a href="https://copilot-sdk.yourgpt.ai">
<img src="https://copilot-sdk.yourgpt.ai/images/yourgpt-copilot-sdk-npm.png" alt="YourGPT Copilot SDK" width="100%" />
</a>

# 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.

**Documentation:** [copilot-sdk.yourgpt.ai](https://copilot-sdk.yourgpt.ai)

## Installation

```bash
Expand Down Expand Up @@ -34,46 +40,23 @@ function App() {
| `/ui` | Pre-built UI components |
| `/core` | Types, utilities, tool helpers |

## Styling (Tailwind CSS v4)

```css
/* 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}`.
## Examples

> **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](https://copilot-sdk.yourgpt.ai/docs/quickstart) for complete setup.

## Theming

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

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

<div className="csdk-theme-claude">
<CopilotChat />
</div>;
```
Explore real-world implementations and demo projects.

**8 theme presets available:** Claude, Vercel, Supabase, Twitter, Linear, PostHog, Catppuccin, Modern
<a href="https://copilot-sdk.yourgpt.ai/docs/examples">
<img src="https://copilot-sdk.yourgpt.ai/images/debug-assistant-demo.webp" alt="Debug Assistant" width="100%" style="border-radius: 12px;" />
</a>

## Documentation
<a href="https://copilot-sdk.yourgpt.ai/docs/examples">
<img src="https://copilot-sdk.yourgpt.ai/images/copilot-sdk-support-demo.png" alt="Support Ticket System" width="100%" style="border-radius: 12px;" />
</a>

Visit [copilot-sdk.yourgpt.ai](https://copilot-sdk.yourgpt.ai) for full documentation including:
<a href="https://copilot-sdk.yourgpt.ai/docs/examples">
<img src="https://copilot-sdk.yourgpt.ai/images/saas-demo.webp" alt="SaaS Application" width="100%" style="border-radius: 12px;" />
</a>

- Theme customization & CSS variables
- Semantic CSS classes (`csdk-*`)
- Creating custom themes
- Dark mode support
**[View all examples →](https://copilot-sdk.yourgpt.ai/docs/examples)**

## License

Expand Down
1 change: 1 addition & 0 deletions packages/copilot-sdk/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
"version": "2.0.0",
"description": "Copilot SDK for building Production-ready AI Copilots for any product. Connect any LLM, deploy on your infrastructure, own your data.",
"type": "module",
"types": "./dist/core/index.d.ts",
"exports": {
"./core": {
"types": "./dist/core/index.d.ts",
Expand Down