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 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 the complete Pixso design tool set through a local MCP endpoint on port 3667.

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 the complete Pixso design tool set over HTTP MCP. Open a design file in the Pixso webview and wait for the design editor to finish loading before connecting an MCP client.

HTTP MCP Server (Cursor)

The available tools include design inspection and editing, screenshots, design-to-code, and AI-edit capabilities.

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.

Notes:

• When a design file opens, closes, or the active Pixso panel changes, the extension updates existing MCP sessions and sends one notifications/tools/list_changed notification after the complete tool set is synchronized.
• 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 and the current tool list becomes empty.
• Clients that do not process MCP tool-list change notifications might still require a manual MCP restart or reload.
• 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

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

Troubleshooting