Alem Tuzlak
79ce60c580
Replace eslint and prettier with oxlint and oxfmt for faster linting and formatting across the monorepo. Remove all eslint and prettier configs, dependencies, and related packages. Add .oxlintrc.json and .oxfmtrc.json for the new tooling. Update CI workflows and lefthook hooks accordingly. Reformat codebase with oxfmt. https://claude.ai/code/session_01GMkSf29p78HuMR1mbXn8He
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.