SketchXFlow MCP

Two ways to connect — you only need one.

Both give your AI app exactly the same SketchXFlow tools and work on the same account. The difference is only where the server runs and how it signs in. Pick the one that fits your app; don't add both to the same app, or it will show every tool twice.

Connect by URL

Recommended

Hosted MCP server (remote)

What it is

Our server. Your app connects to it over the internet.

How you add it

Paste one URL into your app.

How it signs in

You sign in with your SketchXFlow account and click Allow. No key.

What you need

Nothing to install.

Updates

Automatic — always the latest version.

Works in

Claude on the web, desktop and phone, Claude Code, Cursor, VS Code, ChatGPT — any app with a server-URL setting.

Turn it off

Account → Developer tools → Connected apps → Disconnect.

Set up by URL

npm package

For apps without a URL setting

Local MCP server on your computer

What it is

A small program that runs on your own computer.

How you add it

Run one command in a terminal (or edit a config file).

How it signs in

An API key (sk_live_…) that you create and paste in.

What you need

Node.js 18 or newer on that computer.

Updates

When your app restarts (npx fetches the newest release).

Works in

Apps that run local servers: Claude Desktop, Claude Code, Cursor, Windsurf, VS Code, Codex CLI.

Turn it off

Account → Developer tools → revoke the key.

Set up the npm package

Which one should I use?

• URL Claude on the web or your phone, or ChatGPT They can't run programs on your computer, so a URL is the only way in.
• URL Claude Desktop, Claude Code, Cursor or VS Code They take a URL — no Node.js, no key, and it never needs updating. The npm package works here too if you prefer it.
• npm Windsurf, Codex CLI, or an app that only runs local commands If the app has no place to paste a server URL, run the package locally.
• npm An API key works without an interactive sign-in.

Already using the npm package and happy with it? Nothing to change — it keeps working. To switch, remove the sketchxflow entry from your app's settings first, then add the URL.

Connect by URL.

Your app connects to SketchXFlow's hosted MCP server. The first time, it opens a SketchXFlow page where you sign in and click Allow — that's the whole setup. No key to create, no Node.js, nothing to install, and it updates itself.

https://mcp.sketchxflow.com/mcp

• Claude (web, desktop, mobile) Settings → Connectors → Add custom connector. Paste the URL, click Connect, sign in to SketchXFlow and choose Allow.
• Add it once, then run /mcp in Claude Code and pick sketchxflow to sign in.

  $ claude mcp add --transport http sketchxflow https://mcp.sketchxflow.com/mcp
  

• Add it to ~/.cursor/mcp.json (or Settings → MCP → Add). Cursor opens the sign-in page the first time.

  { "mcpServers": { "sketchxflow": { "url": "https://mcp.sketchxflow.com/mcp" } } }
  

• Add it to.vscode/mcp.json (or run “MCP: Add Server” → HTTP). VS Code asks you to sign in on first use.

  { "servers": { "sketchxflow": { "type": "http", "url": "https://mcp.sketchxflow.com/mcp" } } }
  

• ChatGPT In a workspace or account that allows custom connectors (developer mode), add a connector with this URL and OAuth sign-in.
• Anything else Any MCP client that supports Streamable HTTP and OAuth works — give it the URL. Tools that only take a key can send an sk_live_ key as a Bearer token instead.

See and disconnect connected apps in Account → Developer tools. Done here? You can skip the npm section below — it's the alternative, not a second step.

Option 2 · Only if your app can't take a URL

Install the npm package.

Runs SketchXFlow's MCP server on your own computer (@sketchxflow/mcp) and signs in with an API key instead of a browser sign-in. Use it for apps that only run local servers, or for scripts and CI. Needs Node.js 18+. Three steps, once per computer — the installer sets up every app it finds.

1. 1

   Get your API key

   Your key connects the app to your account, so designs land in your projects. Open Account → Developer tools and click Create key. Generate an API key It's shown only once — copy it somewhere safe.
2. 2

   Run the installer

   Open a terminal (any folder is fine), paste this command and press Enter.

   $ npx @sketchxflow/mcp install
   

   What the installer asks
   1. a Finds your apps Lists the AI apps it found on this computer.
   2. b You pick Choose which ones to connect.
   3. c Paste your key From step 1. It writes each app's settings for you.
3. 3

   Restart your app and try it

   Fully quit and reopen the apps you connected. Then ask your agent for a design, for example: “Use SketchXFlow to design a pricing page for my app, then give me the code.” You're set up when your agent starts calling sketchxflow_… tools.

Option 2 · by hand

Set up the npm package by hand.

Only for the npm package, and only if the installer didn't work. Pick your app and follow its three steps. (Connecting by URL? You don't need any of this.)

Claude Code adds servers from the terminal. Run this, replacing sk_live_… with your key:

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

Then start a new Claude Code session.

Where each app keeps its MCP settings

• SketchXFlow MCP in Claude Code

  Added from the terminal with claude mcp add; no file to edit.

• SketchXFlow MCP in Claude Desktop

  macOS: ~/Library/Application Support/Claude/claude_desktop_config.json Windows: %APPDATA%\Claude\claude_desktop_config.json

• SketchXFlow MCP in Cursor

  macOS: ~/.cursor/mcp.json Windows: %USERPROFILE%\.cursor\mcp.json

• SketchXFlow MCP in Windsurf

  macOS: ~/.codeium/windsurf/mcp_config.json Windows: %USERPROFILE%\.codeium\windsurf\mcp_config.json

• SketchXFlow MCP in VS Code

  macOS: ~/Library/Application Support/Code/User/mcp.json Windows: %APPDATA%\Code\User\mcp.json

• SketchXFlow MCP in Codex CLI

  macOS: ~/.codex/config.toml Windows: %USERPROFILE%\.codex\config.toml

What you get

What your agent can do.

Whichever way you connected, your AI app gets the same tools. A typical flow is ask → design → get the code → edit. Every design is a normal SketchXFlow project, so you can also open it on the web.

Asks questionsFree

Interviews you to build the brief, then hands back a ready design prompt.

sketchxflow_clarify

Designs a page

A new project, or a brand-consistent page added to an existing one.

sketchxflow_design_page

Edits a section

Changes one section by sentence — brand-locked, so nothing else drifts.

sketchxflow_edit

Hands you the code

A page's full HTML + Tailwind, for your agent to implement in your stack.

sketchxflow_get_code

Checks a project

Status, preview link and page list for a project.

sketchxflow_get_project

Lists your projects

Everything in your SketchXFlow account.

sketchxflow_list_projects

Designs a logo

A symbol, wordmark, lockups and favicons, from a name and a line about the brand.

sketchxflow_create_logo

Recolours a logoFree

Same logo, new colours: swap one colour or the whole palette, and the designs using it follow.

sketchxflow_recolor_logo

Lists your logosFree

Each logo's id and current colours, ready to recolour.

sketchxflow_list_logos

Development services — SketchXFlow builds it for you

Both setups also talk to our development team, as your side of a build: your AI app runs the requirements interview for your project, gets the fixed-price proposal and the links to accept and pay. All free to call.

Starts a project with our teamFree

Opens the requirements interview with the AI consultant and returns its first question.

sketchxflow_services_start

Talks to the consultantFree

One turn at a time — reply, next question with options, and the live estimate from the public price list.

sketchxflow_services_say

Reads the requirementsFree

The requirements document as it stands, and whether it's ready to finalise.

sketchxflow_services_requirements

Finalises and prices itFree

Freezes the requirements and returns the proposal link. Accepting and paying happen on the website, signed in.

sketchxflow_services_finalise

Lists your invoicesFree

Every invoice on a project with its status and the page to pay it — UPI, cards, EMI, net banking, bank transfer.

sketchxflow_services_invoices

Lists your service projectsFree

Your development-services projects and their links.

sketchxflow_services_projects