Snaps

npx add-mcp 'https://mcp.snaps.design/mcp'

Connect Claude Code, Claude Desktop, Cursor, VS Code, Windsurf or any HTTP client to the Snaps MCP server.

The Snaps MCP server is a remote server over streamable HTTP:

https://mcp.snaps.design/mcp

It authenticates with Authorization: Bearer snaps_… using a key from API keys. Each key is limited to 60 requests per minute. Replace snaps_… in every snippet below with your key.

Claude Code

claude mcp add --transport http snaps https://mcp.snaps.design/mcp \
  --header "Authorization: Bearer snaps_…"

Run claude mcp list to check it connected.

Claude Desktop

Claude Desktop starts local servers, so use the mcp-remote bridge to reach a remote one. Add this to claude_desktop_config.json (Settings, Developer, Edit Config):

{
  "mcpServers": {
    "snaps": {
      "command": "npx",
      "args": ["-y", "mcp-remote", "https://mcp.snaps.design/mcp", "--header", "Authorization:${AUTH_HEADER}"],
      "env": {
        "AUTH_HEADER": "Bearer snaps_…"
      }
    }
  }
}

The whole header value, Bearer and key, goes in env and args reads it with no space after the colon, because some clients mangle spaces inside args. Restart Claude Desktop after saving. This needs Node.js installed.

Cursor

Edit ~/.cursor/mcp.json for all projects, or .cursor/mcp.json in a project. Cursor expands ${env:NAME} in url and headers, so the key can stay in your shell environment:

{
  "mcpServers": {
    "snaps": {
      "url": "https://mcp.snaps.design/mcp",
      "headers": {
        "Authorization": "Bearer ${env:APP_SS_KEY}"
      }
    }
  }
}

VS Code

Create .vscode/mcp.json in the workspace. The top-level key is servers, not mcpServers. An input variable makes VS Code ask for the key once and keeps it out of the file:

{
  "inputs": [
    {
      "type": "promptString",
      "id": "snaps-key",
      "description": "Snaps API key",
      "password": true
    }
  ],
  "servers": {
    "snaps": {
      "type": "http",
      "url": "https://mcp.snaps.design/mcp",
      "headers": {
        "Authorization": "Bearer ${input:snaps-key}"
      }
    }
  }
}

Windsurf

Windsurf’s Cascade reads mcp_config.json. Remote servers use serverUrl, and ${env:NAME} is expanded in headers:

{
  "mcpServers": {
    "snaps": {
      "serverUrl": "https://mcp.snaps.design/mcp",
      "headers": {
        "Authorization": "Bearer ${env:APP_SS_KEY}"
      }
    }
  }
}

Raw HTTP

The server is stateless, so you can test it with curl. This initialize call should return the server’s name and capabilities:

curl -sS https://mcp.snaps.design/mcp \
  -H "Authorization: Bearer snaps_…" \
  -H "Content-Type: application/json" \
  -H "Accept: application/json, text/event-stream" \
  -d '{
    "jsonrpc": "2.0",
    "id": 1,
    "method": "initialize",
    "params": {
      "protocolVersion": "2025-03-26",
      "capabilities": {},
      "clientInfo": { "name": "curl", "version": "0" }
    }
  }'

List the tools:

curl -sS https://mcp.snaps.design/mcp \
  -H "Authorization: Bearer snaps_…" \
  -H "Content-Type: application/json" \
  -H "Accept: application/json, text/event-stream" \
  -d '{"jsonrpc":"2.0","id":2,"method":"tools/list"}'

A missing or wrong key returns HTTP 401 with a JSON-RPC error body.

Troubleshooting

• 401: the key is missing, mistyped or revoked. Create a new one.
• 429 or “rate limit”: more than 60 requests in a minute on one key. Wait a minute.
• Tools do not show up in Claude Desktop: check that npx runs in a terminal, then restart the app.