copilotkit-mcp-demo
This project is a demo for implementing MCP server-client integrations using CopilotKit to manage projects and tasks from project management applications. It features a real-time chat interface powered by an AI assistant that can respond to user queries and perform executable actions. The UI is responsive and modern, built with Tailwind CSS.
GitHub Stars
95
User Rating
Not Rated
Favorites
0
Views
37
Forks
20
Issues
1
Installation
Difficulty
IntermediateEstimated Time
10-20 minutes
Requirements
Node.js (LTS version recommended)npm, yarn, or pnpmInstallation
Installation
Prerequisites
Please specify required software and versions:Node.js: LTS version recommended
npm, yarn, or pnpm
Installation Steps
1. Clone Repository
bash
git clone https://github.com/CopilotKit/copilotkit-mcp-demo.git
cd copilotkit-mcp-demo
2. Install Dependencies
bash
npm install
or
yarn install
or
pnpm install
3. Environment Setup
Create a.env file in the root directory with the necessary environment variables:
bash
OPENAI_API_KEY=YOUR_API_KEY
4. Running the Development Server
bash
npm run dev
or
yarn dev
or
pnpm dev
Troubleshooting
Common Issues
Issue: Server won't start Solution: Check Node.js version and reinstall dependencies. Issue: Environment variable not set Solution: Check the.env file and ensure the API key is correct.Configuration
Configuration
Basic Configuration
Environment Variables
Set the following environment variables as needed:bash
export OPENAI_API_KEY="your-api-key"
Advanced Configuration
Security Settings
Store API keys in environment variables or secure configuration files
Set appropriate file access permissions
Configuration Examples
Basic Configuration
json
{
"mcpServers": {
"example-mcp": {
"command": "node",
"args": ["server.js"],
"env": {
"PORT": "3000",
"LOG_LEVEL": "info"
}
}
}
}
Examples
Examples
Basic Usage
Here are basic usage examples for the MCP server:Programmatic Usage
javascript
// JavaScript example (Node.js)
const { MCPClient } = require('@modelcontextprotocol/client');
const client = new MCPClient();
await client.connect();
// Execute tool
const result = await client.callTool('toolName', {
parameter1: 'value1',
parameter2: 'value2'
});
console.log(result);
Advanced Examples
Automation Script
bash
#!/bin/bash
Batch processing example
for file in *.txt; do
mcp-tool process "$file"
done
Use Cases
Real-time management of tasks from project management applications
Immediate AI responses to user queries
State management of projects using multiple agents
Providing a smooth user experience across different devices