How to Use MCP Servers with Cursor and Windsurf

Most MCP guides focus on Claude Code, but both Cursor and Windsurf support the Model Context Protocol too. If you're using either editor, here's exactly how to connect an MCP server — using Clasp-it as the example.

What Is an MCP Server?

MCP (Model Context Protocol) is a standard that lets AI editors call external tools during a conversation. Instead of you manually providing context, the editor can query an MCP server and get structured data back — files, database records, browser state, API results, anything.

An MCP server is just a service that exposes tools following the MCP spec. Clasp-it's MCP server, for example, exposes tools like get_element_context and list_recent_picks — so your AI editor can read element context captured from your browser without you pasting anything.

Adding Clasp-it to Cursor

Cursor uses a JSON config file to register MCP servers. Open or create ~/.cursor/mcp.json:

{
  "mcpServers": {
    "clasp-it": {
      "url": "https://claspit.dev/mcp",
      "headers": {
        "Authorization": "Bearer YOUR_API_KEY"
      }
    }
  }
}

Replace YOUR_API_KEY with the key shown in your Clasp-it extension settings.

Restart Cursor after saving. To confirm it's connected, open a chat and type: "list my recent clasp-it picks". If the server is connected, Cursor will call the MCP tool and show the result.

Adding Clasp-it to Windsurf

Windsurf uses a similar JSON config. Open or create ~/.codeium/windsurf/mcp_config.json:

{
  "mcpServers": {
    "clasp-it": {
      "serverUrl": "https://claspit.dev/mcp",
      "headers": {
        "Authorization": "Bearer YOUR_API_KEY"
      }
    }
  }
}

Note that Windsurf uses serverUrl instead of url — a small but important difference. Restart Windsurf after saving.

Adding Clasp-it to Claude Code

Claude Code uses a CLI command rather than a config file:

claude mcp add --scope user --transport http clasp-it https://claspit.dev/mcp --header "Authorization: Bearer YOUR_API_KEY"

The --scope user flag registers it globally across all your projects. Use --scope project if you want it only for the current directory.

Verifying the Connection

In any editor, once the MCP server is connected, you can verify it by asking the AI to list your recent picks:

list my recent clasp-it picks

If it's working, you'll see a list of your picks (or an empty list if you haven't picked anything yet). If you get an error about the tool not being found, double-check the config file path and restart the editor.

Using Clasp-it After Setup

Once connected, the workflow is the same across all three editors:

1. Click the Clasp-it extension icon in Chrome
2. Click any element on any webpage
3. Type your instruction and hit send
4. Switch to your editor and say: "fix all recent picks using clasp-it"

Your AI editor will call the MCP tools, read the captured context, and apply fixes to your source files.

Troubleshooting

The editor doesn't see the MCP server

Make sure the config file is valid JSON (no trailing commas, correct nesting). Use a JSON validator if unsure. Restart the editor after any config change.

Authentication errors

If you see "Invalid API key" or "Unauthorized", your API key may be wrong or the Authorization: Bearer prefix may be missing. Check the extension settings and copy the key exactly as shown.

Tools show up but return no picks

Make sure you've actually picked an element using the Chrome extension. Open the extension sidebar to confirm picks are appearing there first.