INSTALLATION GUIDE

Setup

Add SnapUI to your AI agent in under a minute. Pick your tool below and paste the config.

How it works

SnapUI ships as an MCP server — a lightweight process your AI agent launches locally. It connects to the SnapUI API and gives your agent access to every UI kit in the catalog.

Once installed, tell your agent to use a UI kit by its ID (e.g. noir) and it will pull the spec and build to match.

Jump to
Claude CodeClaude DesktopCursorWindsurfVS CodeClineContinue.dev

Claude Code

Anthropic's CLI agent for the terminal.

Config location
Run this command in your terminal:
Configuration
claude mcp add --transport stdio --scope user \
  --env SNAPUI_API_URL=https://snapui.xyz \
  snapui -- npx -y snapui-kits
  • Use --scope project to share with your team via .mcp.json in the repo root.
  • You can also run /mcp inside a Claude Code session to manage servers interactively.

Claude Desktop

Anthropic's desktop app for macOS and Windows.

Config location
macOS: ~/Library/Application Support/Claude/claude_desktop_config.json Windows: %APPDATA%\Claude\claude_desktop_config.json
Configuration
{
  "mcpServers": {
    "snapui": {
      "command": "npx",
      "args": ["-y", "snapui-kits"],
      "env": {
        "SNAPUI_API_URL": "https://snapui.xyz"
      }
    }
  }
}
  • Open Claude Desktop > Settings > Developer > Edit Config.
  • Quit and restart Claude Desktop after saving.

Cursor

AI-first code editor with built-in MCP support.

Config location
macOS / Linux: ~/.cursor/mcp.json Windows: %USERPROFILE%\.cursor\mcp.json
Configuration
{
  "mcpServers": {
    "snapui": {
      "command": "npx",
      "args": ["-y", "snapui-kits"],
      "env": {
        "SNAPUI_API_URL": "https://snapui.xyz"
      }
    }
  }
}
  • You can also add servers via Cursor Settings > Tools & MCP.

Windsurf

Codeium's AI-powered IDE.

Config location
~/.codeium/windsurf/mcp_config.json
Configuration
{
  "mcpServers": {
    "snapui": {
      "command": "npx",
      "args": ["-y", "snapui-kits"],
      "env": {
        "SNAPUI_API_URL": "https://snapui.xyz"
      }
    }
  }
}
  • Or use Command Palette > "Windsurf: Configure MCP Servers".
  • Windsurf has a limit of 100 active tools across all MCP servers.

VS Code

GitHub Copilot (Agent mode) in VS Code 1.99+.

Config location
Workspace: .vscode/mcp.json in your project root User-level: Command Palette > MCP: Open User Configuration
Configuration
{
  "servers": {
    "snapui": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "snapui-kits"],
      "env": {
        "SNAPUI_API_URL": "https://snapui.xyz"
      }
    }
  }
}
  • VS Code uses "servers" as the top-level key, not "mcpServers".
  • MCP tools are used through Copilot's Agent mode.

Cline

Autonomous coding agent (VS Code extension).

Config location
Open the Cline extension > MCP Servers icon > Configure tab > Configure MCP Servers
Configuration
{
  "mcpServers": {
    "snapui": {
      "command": "npx",
      "args": ["-y", "snapui-kits"],
      "env": {
        "SNAPUI_API_URL": "https://snapui.xyz"
      }
    }
  }
}
  • Config is stored in VS Code's globalStorage for the extension.

Continue.dev

Open-source AI assistant for VS Code and JetBrains.

Config location
~/.continue/config.yaml
Configuration
mcpServers:
  - name: snapui
    command: npx
    args:
      - "-y"
      - snapui-kits
    env:
      SNAPUI_API_URL: https://snapui.xyz
  • Alternative: drop a JSON config into ~/.continue/mcpServers/snapui.json using the standard format.

Quick links