Design from your AI assistant

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.

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
  Scripts, CI, or a tool that can't open a browser to sign in

  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.

• Claude (web, desktop, mobile)

  Settings → Connectors → Add custom connector. Paste the URL, click Connect, sign in to SketchXFlow and choose Allow.

• Claude Code

  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/mcpCopy
• Cursor

  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" } } }Copy
• VS Code

  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" } } }Copy
• 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.

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 installCopy

   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.

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.)

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 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.

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.