@efectoapp/mcp

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

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

Install

npx @efectoapp/mcp install

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

Uninstall

npx @efectoapp/mcp uninstall

How It Works

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

Tools (46 total)

Session (4)

| Tool | Description | |------|-------------| | create_session | Create a session, returns URL for the user | | wait_for_connection | Block until the browser connects to the session | | 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 (className, textContent, link, elementId, etc.) | | 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 |

Export (1)

| Tool | Description | |------|-------------| | export_image | Export an artboard or node as PNG, JPEG, WebP, or SVG |

Design Validation (2)

| Tool | Description | |------|-------------| | audit_design | Audit design against quality rules (typography, color, spacing, AI slop detection) | | repair_design | Apply safe deterministic fixes across the document in one pass (dry-run supported) |

Theme (4)

| Tool | Description | |------|-------------| | get_theme | Get current theme (modes, active tokens) | | set_theme | Apply a preset, import CSS tokens, or set modes directly | | set_theme_mode | Switch active mode (light/dark/custom) | | reset_theme | Remove theme entirely, back to raw Tailwind colors |

Links & Anchors

Any node can be made clickable using the link property on add_node, update_node, or batch_update:

| Link Type | Description | Required Fields | |-----------|-------------|-----------------| | url | External URL | url | | page | Navigate to artboard | pageId | | section | Scroll to element anchor | sectionId | | email | mailto link | email | | phone | tel link | phone |

Use elementId on any node to make it an anchor target for section links.

update_node  nodeId: "<id>"  link: { type: "url", url: "https://example.com", target: "_blank" }
update_node  nodeId: "<id>"  elementId: "pricing"
update_node  nodeId: "<nav-link-id>"  link: { type: "section", sectionId: "pricing" }

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
• App: https://efecto.app/design
• GitHub: https://github.com/pablostanley/efecto-app