MCP setup

The desktop app ships an MCP server. Point your IDE assistant at it and the assistant reads the design — pages, frames, components, tokens, stories, code links — as structured tools rather than as files it has to parse.

What you are configuring

The server is a single script inside the installed app. It takes one argument: the path to the project folder. It needs a Node runtime, and there are two ways to give it one.

The server script

Environment variables are not expanded inside these config files, so write the Windows path out in full. Node accepts forward slashes on Windows, which avoids escaping every backslash: C:/Users/<you>/AppData/Local/Programs/DesignFlow/resources/mcp/cli.js.

The runtime

• System Node. Node 20 or newer on your PATH. The configuration is then just node <cli.js> <project>. This is the simpler option.
• The app's own binary. With ELECTRON_RUN_AS_NODE=1 the DesignFlow executable behaves as a Node runtime, so no separate Node install is needed.

The mcp folder is self-contained: cli.js needs no other packages. It ships its own copy of TypeScript in mcp/node_modules/typescript, which check_code_links uses to read your component sources. The server never loads the TypeScript installed in your project. That copy adds about 23 MB to the install.

Claude Code

Claude Code reads .mcp.json from the project root. Create it next to your code, with the project folder as the argument — "." when the DesignFlow project is the repository root.

System Node — Windows

{
  "mcpServers": {
    "designflow": {
      "command": "node",
      "args": ["C:/Users/<you>/AppData/Local/Programs/DesignFlow/resources/mcp/cli.js", "."]
    }
  }
}

System Node — macOS

{
  "mcpServers": {
    "designflow": {
      "command": "node",
      "args": ["/Applications/DesignFlow.app/Contents/Resources/mcp/cli.js", "."]
    }
  }
}

App binary instead of Node — Windows

{
  "mcpServers": {
    "designflow": {
      "command": "C:/Users/<you>/AppData/Local/Programs/DesignFlow/DesignFlow.exe",
      "args": ["C:/Users/<you>/AppData/Local/Programs/DesignFlow/resources/mcp/cli.js", "."],
      "env": { "ELECTRON_RUN_AS_NODE": "1" }
    }
  }
}

App binary instead of Node — macOS

{
  "mcpServers": {
    "designflow": {
      "command": "/Applications/DesignFlow.app/Contents/MacOS/DesignFlow",
      "args": ["/Applications/DesignFlow.app/Contents/Resources/mcp/cli.js", "."],
      "env": { "ELECTRON_RUN_AS_NODE": "1" }
    }
  }
}

From the command line

The CLI writes the same entry for you. Run it from the project root:

# Windows
claude mcp add designflow -- node "C:/Users/<you>/AppData/Local/Programs/DesignFlow/resources/mcp/cli.js" .

# macOS
claude mcp add designflow -- node "/Applications/DesignFlow.app/Contents/Resources/mcp/cli.js" .

Cursor

Cursor reads .cursor/mcp.json in the project root. The shape is identical — copy any block above into that file instead.

{
  "mcpServers": {
    "designflow": {
      "command": "node",
      "args": ["/Applications/DesignFlow.app/Contents/Resources/mcp/cli.js", "."]
    }
  }
}

Verify

Restart the assistant so it picks up the new config, then ask it to call get_project. A working server answers with the project name, its pages, and the counts of what the project holds. Two common failures:

• The server does not start. The path to cli.js is wrong, or node is not on PATH. Run the same command in a terminal and read the error.
• The server starts but finds nothing. The folder argument does not point at a folder containing project.dfproj.

With the app open

Next

• Getting started — install and project layout.
• Collaboration — connect to a hosted collab server.