---
title: "Coding Agents"
icon: "lucide/Code"
description: "Use our MCP server to connect your AI agents and backends to CopilotKit."
hideTOC: true
---

## 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](https://cursor.sh/) 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.

<Steps>
  <Step>
    ### 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.
  </Step>
  <Step>
    ### Add MCP Server to Cursor
    Copy CopilotKit MCP's configuration and paste it under the mcpServers key in the mcp.json file.

    ```json
    {
      "mcpServers": {
        "CopilotKit MCP": {
          "url": "https://mcp.copilotkit.ai/mcp"
        }
      }
    }
    ```
  </Step>
</Steps>

## Claude Web

[Claude](https://claude.ai/) is Anthropic's AI assistant accessible through a web interface. It supports MCP integrations, called Connectors, to connect with external tools and services.

<Steps>
  <Step>
    Navigate to the [Connectors](https://claude.ai/settings/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"
  </Step>
  <Step>
    Click "Add custom connector"
  </Step>
  <Step>
    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
    ```
  </Step>
  <Step>
    Click "Add"
  </Step>
</Steps>

## Claude Desktop

[Claude Desktop](https://claude.ai/download) is the desktop application version of Claude, offering the same AI capabilities with local system integration and MCP support.

<Steps>
  <Step>
    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"
  </Step>
  <Step>
    Click "Add custom connector"
  </Step>
  <Step>
    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
    ```
  </Step>
  <Step>
    Click "Add"
  </Step>
</Steps>

## Claude Code

[Claude Code](https://docs.claude.com/en/docs/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.

<Steps>
  <Step>
    ### Add MCP Server to Claude Code
    Use the Claude Code CLI to add the CopilotKit MCP server:

    ```bash
    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
    ```
  </Step>
  <Step>
    ### Verify Connection
    Check that the server is properly connected:

    ```bash
    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.
  </Step>
  <Step>
    ### 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:**
    ```bash
    # View server details
    claude mcp get copilotkit-mcp

    # Remove server if needed
    claude mcp remove copilotkit-mcp -s local
    ```
  </Step>
</Steps>

## Windsurf

[Windsurf](https://codeium.com/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.

<Steps>
  <Step>
    ### 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
  </Step>
  <Step>
    ### 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):**

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

    **stdio Transport (local):**

    ```json
    {
      "mcpServers": {
        "CopilotKit MCP": {
          "command": "npx",
          "args": ["mcp-remote", "https://mcp.copilotkit.ai/mcp"]
        }
      }
    }
    ```
  </Step>
  <Step>
    ### 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`
  </Step>
</Steps>

## Cline

[Cline](https://github.com/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.

<Steps>
  <Step>
    ### 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
  </Step>
  <Step>
    ### 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:

    ```json
    {
      "mcpServers": {
        "CopilotKit MCP": {
          "url": "https://mcp.copilotkit.ai/mcp",
          "disabled": false,
          "timeout": 30
        }
      }
    }
    ```
  </Step>
</Steps>

## GitHub Copilot

[GitHub Copilot](https://github.com/features/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.

<Steps>
  <Step>
    ### 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
  </Step>
  <Step>
    ### Add MCP Server to GitHub Copilot
    Create a `.vscode/mcp.json` file in your project root:

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

    Or add to your VS Code `settings.json`:

    ```json
    {
      "mcp": {
        "servers": {
          "CopilotKit MCP": {
            "url": "https://mcp.copilotkit.ai/mcp"
          }
        }
      }
    }
    ```
  </Step>
</Steps>

## 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):

```json
{
  "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
