Coding Agents

Open MCP Settings in Cursor

1. Press Shift+Command+J (Mac) or Shift+Ctrl+J (Windows/Linux) to open Cursor's settings.
2. Look for "MCP Tools" in the left sidebar categories.
3. Click "Add Custom MCP". This will open the mcp.json file in the editor, which you need to edit.

Add MCP Server to Cursor

Copy CopilotKit MCP's configuration and paste it under the mcpServers key in the mcp.json file.

{
  "mcpServers": {
    "CopilotKit MCP": {
      "command": "npx",
      "args": [
        "mcp-remote",
        "https://mcp.copilotkit.ai"
      ]
    }
  }
}

{
  "mcpServers": {
    "CopilotKit MCP": {
      "url": "https://mcp.copilotkit.ai/sse"
    }
  }
}

Navigate to the Connectors settings page in Claude. 1. Click on your user in the bottom left of the chat box and then select "Settings" from the menu options that appear. 2. In the menu along the left side of the Settings page, select "Connectors"

1. In the Name field, enter a memorable name for the CopilotKit connector, like CopilotKit 2. In the URL field, enter the following: https://mcp.copilotkit.ai/sse

Navigate to the Connectors settings page in Claude. 1. Click on your user in the bottom left of the chat box and then select "Settings" from the menu options that appear. 2. In the menu along the left side of the Settings page, select "Connectors"

1. In the Name field, enter a memorable name for the CopilotKit connector, like CopilotKit 2. In the URL field, enter the following: https://mcp.copilotkit.ai/sse

Add MCP Server to Claude Code

Use the Claude Code CLI to add the CopilotKit MCP server:

claude mcp add --transport sse copilotkit-mcp https://mcp.copilotkit.ai/sse

Expected Output:

Added SSE MCP server copilotkit-mcp with URL: https://mcp.copilotkit.ai/sse to local config
File modified: /home/[username]/.claude.json [project: /path/to/your/project]

Verify Connection

Check that the server is properly connected:

claude mcp list

Expected Output:

Checking MCP server health...

copilotkit-mcp: https://mcp.copilotkit.ai/sse (SSE) - ✓ Connected

Using MCP Tools in Claude Code

Once configured, the CopilotKit MCP server tools are automatically available when you interact with Claude Code for CopilotKit-related development tasks. The AI will intelligently use these tools when relevant to your queries.

What the MCP Server Provides:

• Expert guidance for CopilotKit development
• Accurate code generation for CopilotKit features
• Best practices and implementation patterns
• Deep understanding of CopilotKit APIs

Management Commands:

# View server details
claude mcp get copilotkit-mcp

# Remove server if needed
claude mcp remove copilotkit-mcp -s local

Access Windsurf MCP Settings

1. Open Windsurf Settings (click the settings button in the bottom right)
2. Navigate to the "Cascade" section
3. Look for "Model Context Protocol" or "MCP" settings
4. Enable MCP support if not already enabled

Add MCP Server to Windsurf

You can add CopilotKit MCP in several ways:

{
  "mcpServers": {
    "CopilotKit MCP": {
      "url": "https://mcp.copilotkit.ai",
      "disabled": false,
      "timeout": 30
    }
  }
}

{
  "mcpServers": {
    "CopilotKit MCP": {
      "url": "https://mcp.copilotkit.ai/sse",
      "disabled": false,
      "timeout": 30
    }
  }
}

{
  "mcpServers": {
    "CopilotKit MCP": {
      "command": "npx",
      "args": ["mcp-remote", "https://mcp.copilotkit.ai"]
    }
  }
}

Configuration File Location

The MCP configuration is typically stored at:

~/.codeium/windsurf/mcp_config.json

%APPDATA%\.codeium\windsurf\mcp_config.json

~/.config/codeium/windsurf/mcp_config.json

Using MCP Tools in Windsurf

Once configured, CopilotKit MCP tools will be available in Windsurf's Cascade AI assistant:

• Open the Cascade panel (AI chat interface)
• The MCP tools are automatically available to the AI
• You can reference specific tools using @CopilotKit MCP in your conversations
• Windsurf will intelligently choose which tools to use based on your requests

Managing Your MCP Servers

In the Windsurf MCP settings, you can:

• Enable/Disable individual servers
• View server status and connection health
• Configure tool permissions and auto-approval settings
• Monitor server logs for debugging
• Restart servers if they become unresponsive

The AI will seamlessly integrate CopilotKit MCP functionality into your development workflow!

Open Cline MCP Settings

1. Open the Cline extension panel in VS Code
2. Click the menu (⋮) in the top right corner of the Cline panel
3. Select "MCP Servers" from the dropdown menu

This will open the MCP Servers interface where you can manage your server connections.

Add MCP Server to Cline

In the MCP Servers interface, you have three main options:

https://mcp.copilotkit.ai/sse

{
  "mcpServers": {
    "CopilotKit MCP": {
      "url": "https://mcp.copilotkit.ai/sse",
      "disabled": false,
      "timeout": 30
    }
  }
}

Using MCP Tools in Cline

Once connected, Cline can automatically use the tools provided by CopilotKit MCP when you interact with the AI assistant. The MCP tools will be available without requiring manual selection - Cline's AI will intelligently choose which tools to use based on your requests.

Server Status Indicators:

• Green dot: Connected and ready to use
• Yellow dot: Connecting in progress
• Red dot: Connection error

You can manage server settings, restart connections, or disable servers from the "Installed" tab in the MCP Servers interface.

Enable MCP Support in VS Code

1. Open VS Code Settings (Cmd+, on Mac or Ctrl+, on Windows/Linux)
2. Search for "MCP" in the settings search bar
3. Enable the chat.mcp.enabled setting

Add MCP Server to GitHub Copilot

You can configure MCP servers for GitHub Copilot in several ways:

{
  "servers": {
    "CopilotKit MCP": {
      "url": "https://mcp.copilotkit.ai/sse"
    }
  }
}

{
  "mcp": {
    "servers": {
      "CopilotKit MCP": {
        "url": "https://mcp.copilotkit.ai/sse"
      }
    }
  }
}

Using MCP Tools with GitHub Copilot

1. Open Copilot Chat in VS Code (click the Copilot icon in the activity bar)
2. Switch to Agent mode from the chat dropdown menu
3. Click the Tools (🔧) button to view available MCP tools
4. Your CopilotKit MCP tools will be listed and can be used automatically

GitHub Copilot will intelligently use the MCP tools when relevant to your queries. You can also reference tools directly using # followed by the tool name.

Managing MCP Servers

Use the "MCP: List Servers" command to view and manage your configured servers:

• Start/Stop/Restart servers
• View server logs for debugging
• Browse available tools and resources

For web-based or remote integrations:

https://mcp.copilotkit.ai/sse

For local command-line integrations:

{
  "command": "npx",
  "args": ["mcp-remote", "https://mcp.copilotkit.ai"]
}

Many applications use a configuration file (locations vary by app):

{
  "servers": {
    "CopilotKit MCP": {
      "url": "https://mcp.copilotkit.ai/sse"
    }
  }
}

Some apps integrate MCP into their main settings:

{
  "mcp": {
    "enabled": true,
    "servers": {
      "CopilotKit MCP": {
        "url": "https://mcp.copilotkit.ai/sse"
      }
    }
  }
}