Mcp Server Setup

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

```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
File modified: /home/[username]/.claude.json [project: /path/to/your/project]
```

```bash
claude mcp list
```

**Expected Output:**
```
Checking MCP server health...

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

<div className="mt-4 p-4 rounded-lg bg-muted">
  <div className="font-medium text-sm mb-2">💡 Server Name Requirements</div>
  <div className="text-sm text-muted-foreground">
    Server names can only contain letters, numbers, hyphens, and underscores. Avoid spaces in server names.
  </div>
</div>

**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
```

<Tabs groupId="windsurf-setup" items={['Using the Built-in Server Browser', 'Manual Configuration']} default="Using the Built-in Server Browser">
  <Tab value="Using the Built-in Server Browser">
    1. In the Cascade section, click "Add Server"
    2. Select "Add custom server"
    3. Choose the transport type:
       - **HTTP** for remote servers
       - **stdio** for local command-based servers
  </Tab>
  <Tab value="Manual Configuration">
    Add the server configuration to your mcp_config.json file:

    <Tabs groupId="windsurf-transport" items={['HTTP Transport', 'stdio Transport (Local)']} default="HTTP Transport">
      <Tab value="HTTP Transport">
        ```json
        {
          "mcpServers": {
            "CopilotKit MCP": {
              "url": "https://mcp.copilotkit.ai/mcp",
              "disabled": false,
              "timeout": 30
            }
          }
        }
        ```
      </Tab>
      <Tab value="stdio Transport (Local)">
        ```json
        {
          "mcpServers": {
            "CopilotKit MCP": {
              "command": "npx",
              "args": ["mcp-remote", "https://mcp.copilotkit.ai/mcp"]
            }
          }
        }
        ```
      </Tab>
    </Tabs>
  </Tab>
</Tabs>

<Tabs groupId="windsurf-os" items={['macOS', 'Windows', 'Linux']} default="macOS">
  <Tab value="macOS">
    ```
    ~/.codeium/windsurf/mcp_config.json
    ```
  </Tab>
  <Tab value="Windows">
    ```
    %APPDATA%\.codeium\windsurf\mcp_config.json
    ```
  </Tab>
  <Tab value="Linux">
    ```
    ~/.config/codeium/windsurf/mcp_config.json
    ```
  </Tab>
</Tabs>

- 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!

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

<Tabs groupId="cline-setup" items={['Remote Server Setup', 'Configuration File Setup']} default="Remote Server Setup">
  <Tab value="Remote Server Setup">
    1. Click on the "Remote Servers" tab
    2. Enter a Server Name (e.g., "CopilotKit MCP")
    3. Enter the Server URL:
    ```
    https://mcp.copilotkit.ai/mcp
    ```
    4. Click "Add Server" to connect
  </Tab>
  <Tab value="Configuration File Setup">
    Alternatively, you can configure via the advanced settings:
    1. In the "Installed" tab, click "Configure MCP Servers"
    2. Add the following configuration to your settings file:
    ```json
    {
      "mcpServers": {
        "CopilotKit MCP": {
          "url": "https://mcp.copilotkit.ai/mcp",
          "disabled": false,
          "timeout": 30
        }
      }
    }
    ```
  </Tab>
</Tabs>

**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.

<Tabs groupId="copilot-config" items={['Workspace Configuration (Recommended)', 'User Settings Configuration', 'Command Palette']} default="Workspace Configuration (Recommended)">
  <Tab value="Workspace Configuration (Recommended)">
    Create a `.vscode/mcp.json` file in your project root:
    ```json
    {
      "servers": {
        "CopilotKit MCP": {
          "url": "https://mcp.copilotkit.ai/mcp"
        }
      }
    }
    ```
  </Tab>
  <Tab value="User Settings Configuration">
    Add to your VS Code `settings.json`:
    ```json
    {
      "mcp": {
        "servers": {
          "CopilotKit MCP": {
            "url": "https://mcp.copilotkit.ai/mcp"
          }
        }
      }
    }
    ```
  </Tab>
  <Tab value="Command Palette">
    1. Open the Command Palette (`Cmd+Shift+P` or `Ctrl+Shift+P`)
    2. Type "MCP: Add Server" and select the command
    3. Choose "HTTP" as the server type
    4. Enter the server URL: `https://mcp.copilotkit.ai/mcp`
    5. Provide a name for the server: `CopilotKit MCP`
  </Tab>
</Tabs>

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.

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