@efectoapp/mcp-studio

MCP server for Efecto Studio — give AI agents the full power of Studio's web design tools.

Every tool is first-class. No proxy pattern, no session ID juggling. Create a session, and all 35 design tools are immediately available.

Install

npx @efectoapp/mcp-studio install

This registers the MCP server in ~/.claude.json and installs the Studio skill file. Restart Claude Code after installing.

Uninstall

npx @efectoapp/mcp-studio uninstall

How It Works

1. Agent calls create_session → gets a Studio URL
2. User opens the URL in their browser
3. Agent uses any of the 38 tools directly — they execute in the browser in real-time
4. User sees every change live as the agent builds the design

Tools (38 total)

Session (3)

| Tool | Description | |------|-------------| | create_session | Create a session, returns URL for the user | | session_status | Check browser connection status | | close_session | Close session and clean up |

Reading State (5)

| Tool | Description | |------|-------------| | get_document | Get full document as JSX markup | | get_selection | Get currently selected nodes with JSX subtrees | | list_artboards | List all artboards with metadata | | find_nodes | Search nodes by name/type/class | | get_node_tree | Get JSX for one node/artboard subtree (faster than full doc) |

Creating Content (4)

| Tool | Description | |------|-------------| | create_artboard | Create a new artboard | | add_section | Add complex layouts from JSX (preferred) | | add_node | Add a single node | | replace_section | Replace a node with new JSX |

Modifying Content (4)

| Tool | Description | |------|-------------| | update_node | Update any node property | | update_class | Update only className | | update_artboard | Update artboard properties | | batch_update | Bulk update multiple nodes |

Organizing Structure (6)

| Tool | Description | |------|-------------| | move_node | Reparent or reorder | | duplicate_node | Clone a node | | duplicate_artboard | Clone an artboard | | group_nodes | Wrap nodes in a frame | | ungroup_node | Unwrap a group container | | reorder_node | Z-order (front/back) |

Display & Deletion (5)

| Tool | Description | |------|-------------| | select_nodes | Highlight nodes for the user | | deselect_all | Clear the selection | | set_visibility | Show/hide nodes | | delete_nodes | Delete nodes | | delete_artboard | Delete an artboard |

Alignment & Distribution (2)

| Tool | Description | |------|-------------| | align_nodes | Align nodes (left/center/right/top/middle/bottom) | | distribute_nodes | Distribute evenly (horizontal/vertical) |

History (2)

| Tool | Description | |------|-------------| | undo | Undo last action | | redo | Redo last undone action |

Viewport & Document (5)

| Tool | Description | |------|-------------| | zoom_to_artboard | Zoom to show an artboard | | zoom_to_fit | Zoom to fit all artboards | | set_viewport | Set zoom level and pan position | | rename_document | Rename the document | | new_document | Start a new blank document |

Canvas (1)

| Tool | Description | |------|-------------| | move_artboard | Reposition artboard on canvas for multi-screen flows |

Fill (1)

| Tool | Description | |------|-------------| | set_fill | Set solid color, gradient, or image fill on any node or artboard |

Auto-Session

The MCP process holds the active session in memory. After create_session, all design tools automatically use it — no need to pass sessionId. For multi-session edge cases, every tool accepts an optional sessionId override.

Links

• Docs: https://efecto.app/docs/studio
• App: https://efecto.app/studio
• GitHub: https://github.com/pablostanley/efecto-app