ContextQMD
Back to Copilotkit

Copilot Fully Custom

examples/v1/_legacy/copilot-fully-custom/README.md

1.57.01.6 KB
Original Source

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

Getting Started

  1. Install dependencies:
bash
npm install
  1. 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.

bash
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!

bash
OPENAI_API_KEY=sk... #if you want to use OpenAI
COPILOT_CLOUD_PUBLIC_API_KEY=ck... #if you want to use Copilot Cloud
  1. Run the development server:
bash
npm run dev
  1. 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.