CopilotKit <> MCP Apps Starter

This repository demonstrates how to integrate MCP Apps with CopilotKit. It uses the Three.js example from the official Model Context Protocol organization on GitHub.

Screen.Recording.2026-01-15.at.12.18.09.PM.mov

Prerequisites

• Node.js 20+
• pnpm
• OpenAI API Key

Getting Started

1. Install dependencies:

pnpm i

2. Set up your OpenAI API key:

cd apps/web
echo 'OPENAI_API_KEY=your-openai-api-key-here' > .env.local

3. Start the server:

# Using pnpm
pnpm dev

Available Scripts

The following scripts can also be run using your preferred package manager:

• dev - Starts both UI and agent servers in development mode
• build - Builds the Next.js application for production
• start - Starts the production server
• lint - Runs ESLint for code linting

Documentation

The main UI component is in src/app/page.tsx. You can:

• Modify the theme colors and styling
• Add new frontend actions
• Customize the CopilotKit sidebar appearance

📚 Documentation

• CopilotKit Documentation - Explore CopilotKit's capabilities
• Next.js Documentation - Learn about Next.js features and API
• MCP Apps Documentation - Learn more about MCP Apps and how to use it

Contributing

Feel free to submit issues and enhancement requests! This starter is designed to be easily extensible.

License

This project is licensed under the MIT License - see the LICENSE file for details.