Step 1

Get your API key.

Sign in to SketchxFlow, open Account → API keys, and click Generate key. Copy it — it's shown once. Your agent uses this key, so designs land in your account and charge your coin balance.

Generate an API key →

Step 2 · the easy way

Run the install wizard.

The wizard detects every MCP client you have installed, lets you choose which to set up, asks for your API key once, and writes each client's config for you.

$ npx @sketchxflow/mcp install

Then restart the clients it set up. That's it.

Step 2 · the manual way

Or configure each client by hand.

Add the server block to your client's config (paths below are macOS; replace sk_live_… with your key), then restart it.

Claude Code (CLI) — one command

$ claude mcp add sketchxflow -s user -e SKETCHXFLOW_API_KEY=sk_live_… -- npx -y @sketchxflow/mcp

Claude Desktop~/Library/Application Support/Claude/claude_desktop_config.json

json{
  "mcpServers": {
    "sketchxflow": {
      "command": "npx",
      "args": ["-y", "@sketchxflow/mcp"],
      "env": { "SKETCHXFLOW_API_KEY": "sk_live_…" }
    }
  }
}

Cursor~/.cursor/mcp.json

json{
  "mcpServers": {
    "sketchxflow": {
      "command": "npx",
      "args": ["-y", "@sketchxflow/mcp"],
      "env": { "SKETCHXFLOW_API_KEY": "sk_live_…" }
    }
  }
}

Windsurf~/.codeium/windsurf/mcp_config.json

json{
  "mcpServers": {
    "sketchxflow": {
      "command": "npx",
      "args": ["-y", "@sketchxflow/mcp"],
      "env": { "SKETCHXFLOW_API_KEY": "sk_live_…" }
    }
  }
}

VS Code (Copilot MCP)~/Library/Application Support/Code/User/mcp.json

json{
  "servers": {
    "sketchxflow": {
      "command": "npx",
      "args": ["-y", "@sketchxflow/mcp"],
      "env": { "SKETCHXFLOW_API_KEY": "sk_live_…" }
    }
  }
}

Codex CLI~/.codex/config.toml

toml[mcp_servers.sketchxflow]
command = "npx"
args = ["-y", "@sketchxflow/mcp"]
env = { SKETCHXFLOW_API_KEY = "sk_live_…" }

Reference

The tools your agent gets.

sketchxflow_clarifyInterviews you to build the brief before designing — returns the next question and a ready design prompt when there's enough. Free.

sketchxflow_design_pageGenerates one page. New project, or a brand-consistent page added to an existing project.

sketchxflow_editNatural-language change to one section/component of a page — brand-locked, so nothing else drifts.

sketchxflow_get_codeReturns a page's full HTML + Tailwind so your agent can implement it in your stack.

sketchxflow_get_projectStatus, preview URL, and page list for a project.

sketchxflow_list_projectsLists the projects in your account.

A typical loop: clarify → design_page → get_code (implement) → edit. Each project is one SketchxFlow project — visible in your dashboard, editable and publishable from the web app.

Help

Troubleshooting.

The tools don't appear

Fully restart the client after editing its config (Claude Desktop and Cursor only re-read config on restart). Confirm the JSON is valid.

“Invalid or missing API key”

Your SKETCHXFLOW_API_KEY is unset, mistyped, or revoked. Generate a fresh one in Account → API keys and update the config.

“You're out of coins”

Designs charge your coin balance. Upgrade your plan in Account → Subscription for a larger monthly allowance, or use sketchxflow_clarify (free) to plan first.

Generation seems slow

A page takes ~1–9 minutes; the design tools stream progress and return when ready. Keep the agent running.