Pixso for VS Code

Pixso for VS Code lets you browse Pixso files from the activity bar, open design files in an editor webview, and expose Pixso AI-edit MCP tools to local MCP clients such as Cursor and Claude Desktop.

Features

• Focus the Pixso activity bar view, log in, and browse recent files, drafts, favorites, and teams.
• Open Pixso design files in a VS Code editor webview from the sidebar or by pasting a design file URL.
• Forward Pixso bridge messages between the webview and the VS Code extension host.
• Expose Pixso AI-edit sub-tools through a local MCP Streamable HTTP endpoint on port 3667 (for Cursor and similar clients).

How to Use

1. Install and Open Pixso

Install the extension, then open Pixso in either of these ways:

• Click the Pixso icon in the VS Code activity bar.
• Run Pixso: Open Pixso from the command palette.

This focuses the Pixso sidebar. If you are not logged in, the extension opens the login webview automatically. Pixso design files open in a separate editor webview when you select a file from the sidebar or run Pixso: Open Design File.

The configured Pixso base URL is controlled by pixso.pixsoUrl. Use the base URL only (for example https://pixso.cn or https://pixso.net); do not include /app.

2. Log In

Use the Pixso sidebar welcome action or run Pixso: Log In.

After login succeeds, the extension stores the Pixso auth state in VS Code secret storage and refreshes the sidebar file list.

3. Browse and Open Files

After login, the Pixso sidebar shows:

• Recent files
• Drafts
• Favorites
• Teams and projects

Click a file in the sidebar to open it in a Pixso editor webview. Run Pixso: Refresh Files from the command palette to reload the file list. Use the filter icon in the Pixso view title to switch spaces.

You can also run Pixso: Open Design File and paste a Pixso design file URL.

4. Use MCP Tools

The extension exposes an HTTP MCP channel for Pixso AI-edit sub-tools. Open a design file in the Pixso webview and wait for the design editor to finish loading before connecting any MCP client.

HTTP MCP Server — Sub-tools (Cursor)

Tool set: AI-edit sub-tools — granular operations such as apply_design and fetch_context that an AI agent can compose freely.

Default endpoint:

http://127.0.0.1:3667/mcp

Create .cursor/mcp.json in your project:

{
  "mcpServers": {
    "pixso": {
      "url": "http://127.0.0.1:3667/mcp"
    }
  }
}

If you change pixso.mcpHttpPort, update the URL to match. The server is enabled by default (pixso.mcpHttpEnabled: true).

Note: The upper MCP server (port 39392, ai_edit orchestration tool) is temporarily disabled in this release. Use the sub-tools endpoint above for now.

Commands

These commands are configured by the extension.

The extension also registers pixso.openFile for sidebar file nodes. It is used internally when clicking files in the Pixso TreeView.

Settings

MCP Lifecycle

MCP tools are available only when a Pixso design editor bridge is ready in an open webview panel.

Typical flow:

1. Focus the Pixso sidebar and log in if needed.
2. Open a design file in a Pixso editor webview.
3. Wait for the design editor bridge to send ready.
4. Connect your MCP client to the HTTP endpoint (preferably after step 3, so tools/list is not empty).

Notes:

• Each MCP HTTP session snapshots the tool list at initialize time. If you connect before the bridge is ready, reconnect (or start a new MCP session) after opening a design file.
• MCP routes to the active / visible Pixso webview panel. Switch focus if you have multiple panels open.
• If all Pixso webview panels are closed, or the page leaves the design editor, the bridge stops. tools/list may be empty; tools/call may return an empty success result until a design file is opened again.
• When a webview is open but the design editor has not finished loading, tools/call may fail with a bridge-not-ready error after queuing.

HTTP MCP — sub-tools

The upper MCP channel (port 39392, ai_edit orchestration tool) is temporarily disabled.

Troubleshooting