wehub-resource-sync
57 lines
1.6 KiB
Markdown
57 lines
1.6 KiB
Markdown
# 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](https://copilotkit.ai)
|
|
- Next.js
|
|
- TypeScript
|
|
- [MongoDB Leafy Green Design System](https://www.mongodb.design/)
|
|
- TailwindCSS
|
|
|
|
## Getting Started
|
|
|
|
1. Install dependencies:
|
|
|
|
```bash
|
|
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.
|
|
|
|
```bash
|
|
touch .env
|
|
```
|
|
|
|
Now, you can either provide your [Copilot Cloud public API key](https://dashboard.operations.copilotkit.ai) or [OpenAI API key](https://platform.openai.com/api-keys).
|
|
|
|
> **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
|
|
```
|
|
|
|
2. Run the development server:
|
|
|
|
```bash
|
|
npm run dev
|
|
```
|
|
|
|
3. Open [http://localhost:3000](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](./components) folder. In particular, the [Chat.tsx](./components/Chat.tsx) file demonstrates how to customize the chat interface using Leafy Green components.
|