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.

• Node.js 20+
• pnpm (recommended)
• OpenAI API Key

Note: This repository ignores lock files (package-lock.json, yarn.lock, pnpm-lock.yaml, bun.lockb) to avoid conflicts between different package managers. Each developer should generate their own lock file using their preferred package manager. After that, make sure to delete it from the .gitignore.

1. Install dependencies:

pnpm i

2. Set up your OpenAI API key:

echo 'OPENAI_API_KEY=your-openai-api-key-here' > .env

3. Start the MCP Apps server:

# Using pnpm
cd src/threejs-server
pnpm i
pnpm start

4. Start the development server:

# Using pnpm
pnpm dev

# Using npm
npm run dev

# Using yarn
yarn dev

# Using bun
bun run dev

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

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

• 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

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

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