Benjamin Taylor
1c92a69f58
New users were still discovering cloud.copilotkit.ai through docs pages, the README, example READMEs, and in-app banners/console messages. Replace all user-facing web links with dashboard.operations.copilotkit.ai (the destination the marketing-site CTAs already use). Functional API endpoints (api.cloud.copilotkit.ai) are deliberately untouched since existing cloud customers depend on them. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Copilot Fully Custom
CopilotKit fully customized using components from MongoDB's Leafy Green Design System.
https://github.com/user-attachments/assets/92356944-090a-440c-bf8f-749bec5475e2
Tech Stack
- CopilotKit
- Next.js
- TypeScript
- MongoDB Leafy Green Design System
- TailwindCSS
Getting Started
- Install dependencies:
npm install
- Setup your runtime:
CopilotKit requires runtime, a production-ready proxy for your LLM requests. You can either use Copilot Cloud or self-host it.
First, make a .env file in the root of the project.
touch .env
Now, you can either provide your Copilot Cloud public API key or OpenAI API key.
Note: Copilot Cloud will provide you some free OpenAI API credits to get you started!
OPENAI_API_KEY=sk... #if you want to use OpenAI
COPILOT_CLOUD_PUBLIC_API_KEY=ck... #if you want to use Copilot Cloud
- Run the development server:
npm run dev
- Open http://localhost:3000 to see the result.
Customization
This project demonstrates how to fully customize CopilotKit using components from MongoDB's Leafy Green Design System.
To see this in action, take a look at the components folder. In particular, the Chat.tsx file demonstrates how to customize the chat interface using Leafy Green components.