Skip to content
Snaps docs
Esc
↑↓navigate↵open⌘Jpreview
On this page

MCP: installation

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 ass_… using a key from API keys. Each key is limited to 60 requests per minute. Replace ass_… in every snippet below with your key.

Claude Code

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

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 ass_…"
      }
    }
  }
}

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 ass_…" \
  -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 ass_…" \
  -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.

Was this page helpful?