Model Context Protocol (MCP): The Complete Multi-Platform Setup Guide

What is the Model Context Protocol?

The Model Context Protocol (MCP) is an open-source standard developed by Anthropic for connecting AI applications to external systems. Using MCP, AI applications like Claude, ChatGPT, or any MCP-compatible coding assistant can connect to data sources (e.g., local files, databases), tools (e.g., search engines, APIs), and workflows (e.g., specialised prompts).

Before MCP, each AI tool had its own proprietary way of connecting to external services. This meant developers had to learn different integration patterns for each platform, and tool creators had to build separate integrations for every AI assistant. MCP solves this by providing a universal protocol that works across all compatible platforms.

How MCP Works

MCP operates on a client-server architecture:

• •MCP Clients: AI applications (like OpenCode, Cursor, or Claude Desktop) that consume capabilities from MCP servers.
• •MCP Servers: Programs that expose specific capabilities (tools, resources, prompts) through the MCP protocol.
• •Transport Layer: The communication method between clients and servers (stdio for local, HTTP/SSE for remote).

Why MCP Matters for Developers

MCP unlocks transformative capabilities for AI-assisted development:

MCP Capabilities: Tools, Resources, and Prompts

MCP servers can expose three types of capabilities to AI clients:

Platform Comparison

Here's a comparison of MCP support across the major AI coding platforms:

Setting Up MCP in OpenCode

OpenCode is an open source AI coding agent available as a terminal-based interface, desktop app, or IDE extension. It supports both local and remote MCP servers with OAuth authentication.

Local MCP Server Configuration

Add local MCP servers to your opencode.json configuration file:

{
  "$schema": "https://opencode.ai/config.json",
  "mcp": {
    "filesystem": {
      "type": "local",
      "command": ["npx", "-y", "@modelcontextprotocol/server-filesystem", "/path/to/directory"],
      "enabled": true
    }
  }
}

Remote MCP Server Configuration

For cloud-hosted MCP servers, use the remote configuration:

{
  "$schema": "https://opencode.ai/config.json",
  "mcp": {
    "context7": {
      "type": "remote",
      "url": "https://mcp.context7.com/mcp",
      "enabled": true
    }
  }
}

Using MCP Tools

Once configured, reference the MCP server in your prompts:

Setting Up MCP in Cursor

Cursor is an AI-first code editor with extensive MCP support, including one-click installation from their MCP server collection.

Configuration File Location

• •Project-specific: .cursor/mcp.json
• •Global: ~/.cursor/mcp.json

Node.js MCP Server

{
  "mcpServers": {
    "filesystem": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-filesystem", "/path/to/directory"],
      "env": {
        "API_KEY": "your-api-key"
      }
    }
  }
}

Remote Server Configuration

{
  "mcpServers": {
    "remote-api": {
      "url": "https://api.example.com/mcp",
      "headers": {
        "Authorization": "Bearer ${env:MY_API_TOKEN}"
      }
    }
  }
}

Variable Interpolation

Cursor supports variable interpolation in configuration:

• ${env:NAME} - Environment variables
• ${userHome} - Home directory path
• ${workspaceFolder} - Project root directory

Setting Up MCP in Claude Desktop

Claude Desktop is Anthropic's official desktop application, providing native MCP support for file system access and other tools.

Configuration File Location

• •macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
• •Windows: %APPDATA%\Claude\claude_desktop_config.json

Filesystem Server Example

{
  "mcpServers": {
    "filesystem": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-filesystem",
        "/Users/username/Desktop",
        "/Users/username/Downloads"
      ]
    }
  }
}

Verification

After configuration, restart Claude Desktop. You should see an MCP server indicator in the bottom-right corner of the conversation input box. Click it to view available tools.

Setting Up MCP in Windsurf

Windsurf by Codeium features Cascade, an intelligent agent with native MCP integration. It supports both stdio and HTTP transport types.

Plugin Store Installation

The easiest way to add MCP servers in Windsurf is through the Plugin Store:

1. Click the Plugins icon in the Cascade panel
2. Browse available MCP plugins
3. Click Install on your desired plugin
4. Press the refresh button after installation

Manual Configuration

For custom servers, edit ~/.codeium/windsurf/mcp_config.json:

{
  "mcpServers": {
    "github": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-github"],
      "env": {
        "GITHUB_PERSONAL_ACCESS_TOKEN": "<YOUR_TOKEN>"
      }
    }
  }
}

HTTP Server Configuration

{
  "mcpServers": {
    "figma": {
      "serverUrl": "https://your-server-url/mcp"
    }
  }
}

Setting Up MCP in Continue

Continue is an open source AI code assistant for VS Code and JetBrains. It uses YAML configuration for MCP servers.

Quick Start Example

Create a folder .continue/mcpServers/ in your workspace and add a YAML file:

name: Playwright mcpServer
version: 0.0.1
schema: v1
mcpServers:
  - name: Browser search
    command: npx
    args:
      - "@playwright/mcp@latest"

Transport Types

Continue supports multiple transport types:

# SSE Transport# Streamable HTTP Transport# Streamable HTTP Transport# Streamable HTTP Transport# Streamable HTTP Transportport
mcpServers:
  - name: HTTP Server
    type: streamable-http
    url: https://your-server.com

Using Secrets

mcpServers:
  - name: GitHub
    command: npx
    args: ["-y", "@modelcontextprotocol/server-github"]
    env:
      GITHUB_PERSONAL_ACCESS_TOKEN: ${{ secrets.GITHUB_TOKEN }}

Setting Up MCP in Zed

Zed is a high-performance, multiplayer code editor with native MCP support through extensions and custom configuration.

Installing via Extensions

Many MCP servers are available as Zed extensions:

1. Open Command Palette and run zed: extensions
2. Search for MCP servers (e.g., “GitHub MCP”, “Context7”)
3. Install the extension
4. Configure required credentials when prompted

Custom Server Configuration

Add custom servers to your settings.json:

{
  "context_servers": {
    "local-mcp-server": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-filesystem", "/path/to/dir"],
      "env": {}
    },
    "remote-mcp-server": {
      "url": "https://mcp.example.com",
      "headers": { "Authorization": "Bearer <token>" }
    }
  }
}

Custom Agent Profiles

Create custom profiles to control which tools are enabled:

{
  "agent": {
    "profiles": {
      "mcp-only": {
        "name": "MCP Only",
        "tools": {
          "read_file": false,
          "edit_file": false,
          "terminal": false
        },
        "enable_all_context_servers": true
      }
    }
  }
}

Popular MCP Servers

Here are some widely-used MCP servers that work across all platforms:

Best Practices and Security

Security Considerations

• ⚠Verify sources: Only install MCP servers from trusted developers and repositories.
• ⚠Use environment variables: Never hardcode API keys or secrets in configuration files.
• ⚠Limit permissions: Use restricted API keys with minimal required permissions.
• ⚠Review code: For critical integrations, audit the server's source code.

Performance Tips

• ✓Limit active servers: Each MCP server adds to your context window. Only enable what you need.
• ✓Use per-project configuration: Configure MCP servers at the project level rather than globally.
• ✓Disable unused tools: Toggle off individual tools you don't need within an MCP server.

References & Further Reading