Copilot Fully Custom

CopilotKit fully customized using components from MongoDB's Leafy Green Design System.

leafy-green.mp4

Tech Stack

• CopilotKit
• Next.js
• TypeScript
• MongoDB Leafy Green Design System
• TailwindCSS

Getting Started

1. Install dependencies:

npm install

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

2. Run the development server:

npm run dev

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