Pixso Developer

English

中文

English

中文

Appearance

How to Use Local MCP ​

Step 1: Enable Local MCP in Pixso Desktop ​

  1. Install and sign in to Pixso desktop (version >= 2.2.0)
  2. Create or open a design file in Pixso desktop
  3. In the file menu (top-left), find and enable Pixso MCP

Enable Local MCP

The local endpoint of Pixso MCP server is: http://127.0.0.1:3667/mcp

D2C+ Mode

When enabled, the MCP design_to_code tool outputs code based on D2C+ generation results. For D2C+ component mapping, see Component Parsers.

Transport Protocol

Local Pixso MCP only supports HTTP / Streamable HTTP, and does not support SSE.

Step 2: Configure Pixso MCP in Your IDE ​

Find your IDE / Agent below and follow the corresponding instructions.

Claude Code (CLI) ​

Run this command in terminal:

bash
claude mcp add --transport http pixso-desktop http://127.0.0.1:3667/mcp

Codex (CLI / App) ​

Codex CLI and Codex app share MCP configuration stored in ~/.codex/config.toml (or project-level .codex/config.toml).

Option 1: Quick setup via CLI

Run in terminal:

bash
codex mcp add pixso --url http://127.0.0.1:3667/mcp

Option 2: Edit the config file

Open ~/.codex/config.toml and add:

toml
[mcp_servers.pixso]
url = "http://127.0.0.1:3667/mcp"

After saving, start a new Codex thread or run /mcp in a session to verify the connection. You can also run codex mcp list to view configured MCP servers.

NOTE

Codex uses TOML config.toml for MCP, which differs from the JSON format used by Cursor and other IDEs. To install the Pixso Skills plugin for a better experience, see Pixso MCP Skill.

Cursor ​

  1. Open Cursor -> Cursor Settings -> MCP & Integrations
  2. In MCP Tools, click New MCP Server
  3. Use any name (for example Pixso MCP), select http, and set URL to http://127.0.0.1:3667/mcp
  4. Or edit mcp.json directly:
    json
    {
  "mcpServers": {
    "Pixso MCP": {
      "url": "http://127.0.0.1:3667/mcp",
      "headers": {}
    }
  }
}
  5. Save and click start in the settings panel

VS Code ​

VS Code's native MCP configuration uses a different structure from other IDEs: it uses the servers field instead of mcpServers.

  1. Open the MCP configuration file in VS Code (user-level or workspace .vscode/mcp.json).
  2. Add the following content and save:
    json
    {
  "servers": {
    "pixso": {
      "url": "http://127.0.0.1:3667/mcp",
      "type": "http"
    }
  }
}
  3. Reload VS Code or refresh in the MCP panel. Once connected, you can use Pixso MCP in chat.

CodeBuddy ​

CodeBuddy IDE supports MCP server configuration to extend Agent capabilities.

  1. In the top-right corner of the chat sidebar, open CodeBuddy Settings and switch to the MCP tab.
  2. Click Add MCP on the right, then add the following content to the JSON configuration file and save:
    json
    {
  "mcpServers": {
    "pixso": {
      "type": "http",
      "url": "http://127.0.0.1:3667/mcp"
    }
  }
}
  3. After saving, a green status on the MCP server means connected. You can also use Pixso MCP tools directly in Craft Agent.

You can also add the server via config files: user-level ~/.codebuddy/.mcp.json, or project-level .mcp.json.

Qoder ​

Qoder IDE extends Agent capabilities through MCP and supports STDIO, SSE, and Streamable HTTP. For local Pixso MCP, HTTP is sufficient.

  1. Click the user icon in the top-right corner of Qoder IDE, or use Ctrl + Shift + , (Windows) / ⌘ + Shift + , (macOS) to open Qoder Settings.
  2. Select MCP in the left navigation pane, then open the My Servers tab.
  3. Click Add in the top-right corner, add the following content to the JSON configuration file, and save:
    json
    {
  "mcpServers": {
    "pixso": {
      "type": "http",
      "url": "http://127.0.0.1:3667/mcp"
    }
  }
}
  4. After saving, a link icon next to the server entry means connected. Expand the entry to view available tools.

You can also add the server via config files: user-level ~/.qoder/settings.json, project-local ${project}/.qoder/settings.local.json, or project-level ${project}/.mcp.json.

Cline (VS Code and others) ​

  1. In Cline sidebar, click MCP Servers (or click "Configure MCP Servers" under Configure tab)
  2. It opens cline_mcp_settings.json
  3. Add a Streamable HTTP MCP server config:
    json
    {
  "mcpServers": {
    "pixso-mcp": {
      "type": "streamableHttp",
      "url": "http://127.0.0.1:3667/mcp"
    }
  }
}
  4. Save the file, and Cline will connect automatically

Trae IDE ​

Trae v1.3.0+ supports MCP natively.

  1. Open Trae Settings and go to the MCP configuration panel; or edit the config file directly: project-level .trae/mcp.json, or global ~/.cursor/mcp.json (Trae-compatible Cursor config directory).
  2. Add an MCP service:
    json
    {
  "mcpServers": {
    "pixso": {
      "url": "http://127.0.0.1:3667/mcp"
    }
  }
}
  3. Restart Trae, or click refresh in the MCP panel to connect.

Kiro ​

  1. Open Kiro config: global ~/.kiro/settings/mcp.json or workspace .kiro/settings/mcp.json
  2. Add Pixso MCP config:
    json
    {
  "mcpServers": {
    "pixso-mcp": {
      "url": "http://127.0.0.1:3667/mcp"
    }
  }
}
  3. (Optional) Add "autoApprove": ["getCode", "getNodeDSL"] to reduce permission prompts, then reload Kiro

Windsurf ​

  1. Open Windsurf settings -> MCP Servers -> Manage MCPs
  2. Click View raw config to open mcp_config.json
  3. Add config:
    json
    {
  "mcpServers": {
    "pixso": {
      "serverUrl": "http://127.0.0.1:3667/mcp"
    }
  }
}
  4. Refresh in settings panel; a green status means connected

TIP

After connecting MCP, we recommend installing the Pixso MCP Skill plugin for a better Agent experience. See Pixso MCP Skill.

Step 3: Chat in MCP Client ​

After your MCP client is connected to Pixso MCP server, you can start using it in conversations.

Pixso MCP supports two ways to get design data:

Notes

The layer link is not a file share link and not a page link.

The item-id in the link helps the agent locate the exact target layer.

  1. Open a design file in Pixso desktop
  2. Select a container layer and copy its layer link
  3. In your IDE client (such as Cursor), paste the link in chat and provide instructions (for example: generate HTML code)

Copy link

Paste the link into the agent chat box.

Copy link prompt

Select Container on Canvas ​

  1. Open a design file in Pixso desktop
  2. Select a single container layer on the canvas
  3. In your IDE client (such as Cursor), start chatting (for example: generate HTML code)

Notes

To keep the MCP connection stable:

  1. Keep Pixso desktop open
  2. Keep the design file tab containing the selected container active