@sketchxflow/mcp

@sketchxflow/mcp

Design, extend, edit, and implement websites and apps with SketchXFlow — directly from Claude Code, Codex, Cursor, Claude Desktop, Windsurf, or any MCP client.

Or connect by URL — nothing to install

https://mcp.sketchxflow.com/mcp

The same tools, hosted. Add that URL to any client that takes a remote MCP server — Claude (Settings → Connectors → Add custom connector), Claude Code (claude mcp add --transport http sketchxflow https://mcp.sketchxflow.com/mcp), Cursor, VS Code, ChatGPT — and sign in to SketchXFlow when it asks (OAuth 2.1). No key, no Node.js. Disconnect it any time in Account → Developer tools.

Install (one command, all your agents)

npx @sketchxflow/mcp install

An interactive wizard detects your installed MCP clients (Claude Desktop, Claude Code, Cursor, VS Code, Windsurf, Codex), lets you pick which to set up, asks for your API key once, and writes each client's config. Restart the clients it set up and you're done.

API key: sign in at sketchxflow.com → Account → API keys → Generate key.

Manual config (any client)

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

(VS Code uses a "servers" key; Codex uses [mcp_servers.sketchxflow] in ~/.codex/config.toml — the wizard handles all of these.)

Tools

Tool	What it does
sketchxflow_clarify	Interview the user (free) to build the brief before designing — returns the next question + a ready-to-use design_prompt.
sketchxflow_design_page	Generate one page. Omit project_id → new project; pass one → add a brand-consistent page to it.
sketchxflow_design_creative	Generate a fixed-canvas creative — flyer, poster, Instagram post/story, X/LinkedIn post, or YouTube thumbnail. Returns a preview + rendered PNG.
sketchxflow_edit	Natural-language change to one page section/component (brand-locked).
sketchxflow_create_logo	Design a brand logo — symbol, wordmark, lockups and favicons. Returns the logo's id and image URL.
sketchxflow_list_logos	Your logos with their ids and current colours. Free.
sketchxflow_cinematic_hero	Scrolling plays the page like a 3D film: the camera orbits the hero, then flies into up to two later sections' photos (AI video from the photos, so the look stays). Paid (~80 coins + ~60 a scene), a few minutes. Or pass cinematic_hero: true to sketchxflow_design_page.
sketchxflow_recolor_logo	Change a logo's colours only — same symbol, wordmark and lockups. Swap one colour (replace: {"#old": "#new"}) or pass a new palette; project_id updates a design that shows the logo. Instant and free, no AI.
sketchxflow_experimental_start	Open an Experimental Design session — one surface, built a section at a time and each section stacked layer by layer. Free; returns the section plan + the first layer proposal.
sketchxflow_experimental_discuss	One free turn with the art director: relay what the user said, get a revised proposal. No rendering, no coins.
sketchxflow_experimental_layer	Stack the next layer (the step that renders and bills). count runs several back to back — only with the user's explicit go-ahead.
sketchxflow_experimental_stack	Read the build — which sections exist, what's stacked in each, what's next — or revert_to to peel layers back off.
sketchxflow_get_code	Return a page's full HTML (Tailwind inline) so the agent can implement/adapt it in your stack.
sketchxflow_get_image	Return a rendered PNG of a page so the agent can see how the design looks and visually verify it.
sketchxflow_get_project / sketchxflow_list_projects	Status / list.
sketchxflow_list_models	List the LLM models you can pass as model, with cost/speed and whether your plan can use each one. Free.
sketchxflow_version	Which version of this server is running, whether a newer one is published, and whether the API accepts your key. Free — call it first when a tool fails with an API-key error.

Development services (SketchXFlow builds it for you)

Tool	What it does
sketchxflow_services_start	Start a project with SketchXFlow's development team: opens the requirements interview and returns the consultant's first question. Free.
sketchxflow_services_say	One turn with the AI consultant — the reply, the next question with options, and the live estimate from the public price list. Free.
sketchxflow_services_requirements	Read the requirements document as it stands, and whether it can be finalised.
sketchxflow_services_finalise	Freeze the requirements and price them (only with the client's go-ahead). Returns the proposal link — accepting and paying happen on the website, signed in.
sketchxflow_services_invoices	Every invoice on a project with its status and the page to pay it (UPI, cards, EMI, net banking, bank transfer).
sketchxflow_services_projects	Your development-services projects and their links.

For the SketchXFlow team

The developer's side — pulling a client's frozen requirements, posting updates, logging time, moving milestones — is a separate package for staff accounts: @sketchxflow/dev-mcp.

How a coding agent uses it

• (optional) sketchxflow_clarify — ask the user what they want, one question at a time.
• sketchxflow_design_page — create the project + first page (or add a page).
• sketchxflow_get_code — pull the HTML and re-implement it in the user's framework.
• sketchxflow_edit — tweak a section; get_code again.

Building it a layer at a time (Experimental Design)

For a surface the user wants to shape with you rather than receive finished, the layered flow mirrors how a designer actually works. A page is a set of sections, and each section is a stack:

SECTION: Hero
  05  effect     grain + vignette over the whole stack
  04  media      bean photo, bleeding off the right edge
  03  content    headline + body + CTA        ← the only layer in flow
  02  shape      ochre panel, offset, clipped
  01  backdrop   charcoal ground, full bleed

Then, once every section is built, whole-page passes (palette, type, rhythm, surface, motion, detail) make the separately-built sections agree with each other.

• sketchxflow_experimental_start — decides the sections and proposes the first layer. Free.
• Put the proposal to the user. They steer it (sketchxflow_experimental_discuss, free) or approve it.
• sketchxflow_experimental_layer — stacks that one layer and returns what it put down plus the next proposal. Repeat from step 2. The first call always stages the page (the empty section shells) whatever else you pass.
• sketchxflow_experimental_stack — the build so far; revert_to peels layers back off (free — each was snapshotted when it went down).

Only step 3 costs coins, and it's charged per layer: a section layer is small and quick because it rewrites only that section, while a whole-page pass rewrites the document and costs more. How deep the build goes stays the user's call. If they say "just build the rest", pass count — but only on that explicit go-ahead, because every layer in the run is charged.

Choosing the model (paid plans)

Every tool that runs an LLM design call — sketchxflow_clarify, sketchxflow_design_page, sketchxflow_edit, sketchxflow_design_creative, sketchxflow_design_email, sketchxflow_launch_kit, sketchxflow_create_logo, sketchxflow_create_animation, sketchxflow_experimental_start, sketchxflow_experimental_discuss, sketchxflow_experimental_layer — takes an optional model.

Call sketchxflow_list_models for the authoritative list. It answers on every plan (free included) and reports, per model, the description, speed, relative cost, coin rates, and whether your plan may actually use it — so the agent can explain an upgrade instead of just failing. The table below is a snapshot:

model	Notes
gemini-3-flash-preview	Default. Balanced quality and speed.
gemini-3.1-flash-lite	Fastest and cheapest; good for quick edits.
gemini-3.5-flash-lite	Lite tier, slightly stronger than 3.1 lite.
gemini-3.7-flash	Strongest layout/code quality per coin.
gemini-3.6-flash	Previous Flash generation; pin it for consistency.
gemini-3.5-flash	Older Flash tier; costs more than 3.7 for less.
gemini-3.1-pro-preview	Most capable, 2M context; slowest and priciest.

Omit model and your account's default is used — that's the normal path and costs nothing extra. Passing it is a paid-plan feature (Starter and above); on a free plan the call fails with a message telling the agent to drop model and retry. Stronger models cost more coins (billing is metered on real usage).

This selects the text model only — it never affects AI image generation, and the read-only tools (sketchxflow_get_code, sketchxflow_get_image, sketchxflow_get_project, sketchxflow_list_projects, sketchxflow_list_models) and sketchxflow_add_image don't take it.

Configuration

Env var	Required	Default	Notes
SKETCHXFLOW_API_KEY	yes	—	Your sk_live_… key.
SKETCHXFLOW_API_URL	no	https://sketchxflow.com	Override the API base.
SKETCHXFLOW_SKIP_UPDATE_CHECK	no	—	Set to 1 to stop the server asking the npm registry whether a newer release is out.

Staying up to date

On start the server asks the npm registry (once, with a 3-second limit) whether a newer release is out. If one is, the next tool result carries a one-line notice, and sketchxflow_version reports it any time. MCP clients launch the server with npx, so restarting the client usually picks up the new release; if it keeps starting the old one, use "args": ["-y", "@sketchxflow/mcp@latest"] so npx looks for the newest release on every launch.

"SketchXFlow didn't accept the API key"

The key was set and sent, but the server doesn't recognise it — it was revoked, or it predates a change to the server's key settings. Run sketchxflow_version to see which key is configured (by its sk_live_ab12cd… prefix, as listed under Account → API keys), then create a new key there, put it in your MCP config, and restart the client. A key that doesn't start with sk_live_ isn't a SketchXFlow key at all.

Develop

npm install && npm run build
node dist/index.js            # MCP server (stdio)
node dist/index.js install    # setup wizard

MIT licensed.