How to Use Remote MCP

Remote MCP runs on Pixso's cloud servers and can be used without opening Pixso Web. By authenticating with an access token, you can integrate the Pixso Remote MCP service into various Agent tools.

Step 1: Get Access Token

1. In the Pixso workspace interface, click the user avatar on the right, select "User Center", and find "Personal Access Token".
2. Click "Generate Token", copy the generated token once, and save it securely.

Note

The access token is your credential for accessing the Pixso Remote MCP. Please keep it safe. If the token is leaked, please regenerate it promptly.

The token can only be fully copied when it is first generated. If you forget it, you need to regenerate it.

The Pixso Remote MCP server address is: https://pixso.net/api/mcp/mcp

Step 2: Configuration

Claude Code (CLI)

Run the following command in the terminal for quick configuration:

claude mcp add --transport http remote-pixso https://pixso.net/api/mcp/mcp --header "Token:your_access_token"

---

Cursor

1. Open Cursor -> Settings -> MCP Tools.
2. Click New MCP Server.
3. You can customize the name (e.g., Pixso Remote MCP).
4. Edit the mcp.json file and add the following content:

   {
     "mcpServers": {
       "Pixso Remote MCP": {
         "url": "https://pixso.net/api/mcp/mcp",
         "headers": {
           "Token": "your_access_token"
         }
       }
     }
   }

5. After saving, when the Pixso Remote MCP status is green, it indicates a successful connection; red indicates a failure and it is unavailable.

---

Cline Plugin (for VS Code)

Integrate Pixso Remote MCP into Cline:

1. Open VS Code, select Extensions, search for cline, and click install to complete the installation.
2. Open the Cline plugin, select Remote Servers, enter the corresponding information, and click Add Server.

Note

Fill in pixso-remote-mcp for Server name, and https://pixso.net/api/mcp/mcp for Server URL.

3. Check the toggle and the status indicator; green indicates a successful connection. Click Configure MCP Servers, and simply enter your user personal access token (Normally, some part of the code already exists, you only need to input the personal access token).

   {
     "mcpServers": {
       "pixso-remote-mcp": {
         "autoApprove": [
           "get_local_styles",
           "get_variable_sets",
           "get_variables",
           "get_variants"
         ],
         "disabled": false,
         "timeout": 60,
         "type": "streamableHttp",
         "url": "https://pixso.net/api/mcp/mcp",
         "headers": {
           "Token": "your_access_token"
         }
       }
     }
   }

4. Save the file. Cline will automatically connect to the Pixso Remote MCP, and you can use it in Cline conversations after a successful connection.

---

Trae IDE

Trae v1.3.0 and above natively supports MCP.

1. Open Trae -> Settings -> MCP -> Add Manually.

3. Add the remote MCP service in the configuration file:

   {
     "mcpServers": {
       "Pixso Remote MCP": {
         "url": "https://pixso.net/api/mcp/mcp",
         "headers": {
           "Token": "your_access_token"
         }
       }
     }
   }

4. Save the file. After a successful connection, you can use it in Trae conversations.

---

Kiro

Kiro also supports connecting external tools via MCP:

1. Open Kiro, and open a folder (any folder, even an empty folder works).
2. Click settings, search for MCP.
3. Click Open User MCP Config (JSON).

4. Paste the following code in and save.

   {
     "mcpServers": {
       "pixso-remote-mcp": {
         "url": "https://pixso.net/api/mcp/mcp",
         "headers": {
           "Token": "your_access_token"
         }
       }
     }
   }

5. (Optional) If you don't want to be frequently asked whether to allow Pixso tool calls, you can add parameters like "autoApprove": ["getCode", "getNodeDSL"] in the configuration. Save and reload Kiro to apply.

---

Windsurf

1. Open Windsurf Settings, go to the MCP Servers panel, and click Manage MCPs.
2. Click View raw config to open mcp_config.json.
3. Add the following content and save:

   {
     "mcpServers": {
       "pixso-remote": {
         "serverUrl": "https://pixso.net/api/mcp/mcp",
         "headers": {
           "Token": "your_access_token"
         }
       }
     }
   }

4. Return to the configuration page and click refresh. A green status display indicates a successful connection.

Step 3: Chat in Agent Client

After successfully connecting to the Pixso Remote MCP server, you can fetch Pixso design data via layer links and chat with LLMs.

Copy File Link

1. Open the design file in the Pixso workspace.
2. Right-click to copy the link of the frame layer.

Note

The layer link is obtained by right-clicking the layer and selecting "Copy Link".

The layer link is neither the file's sharing link, nor the page's link.

The "item-id" in the link helps the Agent locate the layer you want.

Tips

Remote MCP does not require Pixso Web to stay open; you only need to ensure the access token and layer link are valid.

It is recommended to use advanced LLMs (such as Claude-4.6-sonnet, etc.)

3. Open the chat mode in the client IDE (such as Cursor), paste the frame link into the chat, and give related instructions, such as: generate HTML code based on the design manuscript.