Skip to content
Developers · MCP install guide

Design from your coding agent.

Connect SketchXFlow to the AI app you already code in. Ask it for a screen, and it designs the page and hands you the code — without leaving the chat.

Claude CodeClaude DesktopCursorWindsurfVS CodeCodex
  • A SketchXFlow account
    Free to start. Designs use your coins.
  • Node.js installed
    The installer runs with npx, which comes with Node.
  • An AI coding app
    Any of the apps above, installed on this computer.
One command3 steps · about 2 minutes
$ npx @sketchxflow/mcp install

The installer finds the AI apps on this computer, asks which to connect, and writes each one’s settings for you. Get an API key first — the installer asks for it.

Get an API keyFull walkthrough
Setup

Install in three steps.

Do these in order. The installer handles every app at once, so you only do this once per computer.

  1. 1

    Get your API key

    Your key connects the app to your account, so designs land in your projects. Open Account → API keys and click Generate 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.

Optional

Prefer to set it up by hand?.

Skip this if the installer worked. Otherwise pick your app below and follow its three steps.

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.

Once connected, your agent gets these 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

Development services — SketchXFlow builds it for you

The same package also talks to our development team: your agent runs the requirements interview, 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
About the MCP server

Designing from your agent.

5 answers, each one complete on its own. Search them, or ask us directly.

  1. Yes. SketchXFlow's MCP server works with the Codex CLI: add it to ~/.codex/config.toml (or run npx @sketchxflow/mcp install), then ask Codex to design a page. It creates the design in your SketchXFlow account and hands back the HTML and Tailwind code.

  2. Connect SketchXFlow with claude mcp add sketchxflow -s user -e SKETCHXFLOW_API_KEY=your-key -- npx -y @sketchxflow/mcp, start a new session and ask Claude to design the page. Claude calls sketchxflow_design_page, then sketchxflow_get_code to implement it in your project.

  3. Yes. Each keeps its MCP servers in a JSON file (Cursor: ~/.cursor/mcp.json, Windsurf: ~/.codeium/windsurf/mcp_config.json, VS Code: its user mcp.json). The installer writes the entry for you.

  4. It does a different job. A Figma MCP server reads designs that already exist in Figma; SketchXFlow's MCP server creates new on-brand pages from a description and returns their code. You can still copy any SketchXFlow page into Figma from the studio.

  5. Installing it is free, and the planning and development-services tools cost nothing to call. Designing pages uses your SketchXFlow coins, which start free with no card required.

Still stuck? support@kriyaxlabs.com
Troubleshooting

Something not working?.

6 answers, each one complete on its own. Search them, or ask us directly.

  1. Fully quit and reopen the app after setup — Claude Desktop and Cursor only read their config on start. If you edited the file by hand, check that the JSON is valid.

  2. The app started the server without a key. Run npx @sketchxflow/mcp install again (or add SKETCHXFLOW_API_KEY to the server's env in your config) and restart the app.

  3. The key was sent but isn't recognised — it was revoked, or it predates a change to the server's key settings. Ask your agent to run sketchxflow_version to see which key is configured (by its sk_live_ab12cd… prefix, as listed in Account → API keys), create a new key there, update the config and restart the app.

  4. A newer release is out. Restart the app to pick it up; if it keeps starting the old one, set the args to ["-y", "@sketchxflow/mcp@latest"]. sketchxflow_version shows which version is running.

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

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

Still stuck? support@kriyaxlabs.com

Still stuck? Email support@kriyaxlabs.com · Package on npm