Coding Agents

Use our MCP server to connect your AI agents and backends to CopilotKit.

Overview

The CopilotKit MCP server equips AI coding agents with deep knowledge about CopilotKit's APIs, patterns, and best practices. When connected to your development environment, it enables AI assistants to:

  • Provide expert guidance
  • Generate accurate code
  • Give your AI agents a user interface
  • Help you implement CopilotKit features correctly

Cursor

Cursor is an AI-powered code editor built for productivity. It features built-in AI assistance and supports MCP for extending AI capabilities with external tools.

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": {
      "url": "https://mcp.copilotkit.ai/mcp"
    }
  }
}

Claude Web

Claude is Anthropic's AI assistant accessible through a web interface. It supports MCP integrations, called Connectors, to connect with external tools and services.

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"

Click "Add custom connector"

  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/mcp

Click "Add"

Claude Desktop

Claude Desktop is the desktop application version of Claude, offering the same AI capabilities with local system integration and MCP support.

Navigate to the Connectors settings page in Claude. These steps mirror the Claude Web flow — the only difference is that the Connectors link opens inside the Claude desktop app.

  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"

Click "Add custom connector"

  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/mcp

Click "Add"

Claude Code

Claude Code is Anthropic's official CLI for Claude. It supports MCP integrations to connect with external tools and services, enhancing AI capabilities with specialized knowledge.

Add MCP Server to Claude Code

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

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

Expected Output:

Added HTTP MCP server copilotkit-mcp with URL: https://mcp.copilotkit.ai/mcp to local config

Verify Connection

Check that the server is properly connected:

claude mcp list

Expected Output:

Checking MCP server health...

copilotkit-mcp: https://mcp.copilotkit.ai/mcp (HTTP) - Connected

Server names can only contain letters, numbers, hyphens, and underscores. Avoid spaces in server names.

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

Windsurf

Windsurf is Codeium's agentic IDE that combines AI-powered coding assistance with traditional development tools. It features the Cascade AI assistant with MCP integration.

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 via the built-in server browser or by editing the config file directly.

HTTP Transport (recommended):

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

stdio Transport (local):

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

Configuration File Location

The MCP configuration is typically stored at:

  • macOS: ~/.codeium/windsurf/mcp_config.json
  • Windows: %APPDATA%\.codeium\windsurf\mcp_config.json
  • Linux: ~/.config/codeium/windsurf/mcp_config.json

Cline

Cline is a VS Code extension that provides autonomous AI coding assistance. It can perform complex tasks using MCP tools to interact with external systems.

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

Add MCP Server to Cline

In the MCP Servers interface, click "Remote Servers", enter a Server Name (e.g., "CopilotKit MCP"), the URL https://mcp.copilotkit.ai/mcp, then "Add Server".

Alternatively, configure via the settings file:

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

GitHub Copilot

GitHub Copilot is Microsoft's AI pair programmer integrated into VS Code and other editors. It supports MCP to extend its capabilities with external tools and services.

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

Create a .vscode/mcp.json file in your project root:

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

Or add to your VS Code settings.json:

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

Other

For MCP-compatible applications not listed above, use these universal integration patterns. MCP (Model Context Protocol) is an open standard that allows AI applications to connect with external tools and data sources.

HTTP (for web-based or remote integrations):

https://mcp.copilotkit.ai/mcp

stdio (for local command-line integrations):

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

Integration Steps

  1. Find MCP Settings — Look for "MCP," "Model Context Protocol," or "Tools" in your application settings
  2. Add Server — Use the HTTP URL: https://mcp.copilotkit.ai/mcp
  3. Test Connection — Restart your application and verify the server appears in available tools