@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 or attach to a session, and all 68 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, or attach_session → resumes an existing URL
2. User opens the URL in their browser
3. Agent uses any of the 68 tools directly — they execute in the browser in real-time
4. User sees every change live as the agent builds the design

Tools (68 total)

Session (5)

| Tool | Description | |------|-------------| | create_session | Create a session, returns URL for the user | | attach_session | Reattach this MCP process to an existing session URL | | 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 |

Animation (3)

| Tool | Description | |------|-------------| | list_animation_presets | List native Efecto animation presets, defaults, categories, and supported controls | | apply_animation_plan | Apply a validated multi-layer animation plan in one call | | clear_animations | Clear native animations from nodes, the selection, an artboard, or the whole document |

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 or attach_session, all design tools automatically use it — no need to pass sessionId. If the MCP client restarts, call attach_session with the current Efecto URL to resume the same browser session. For multi-session edge cases, every tool accepts an optional sessionId override.

Acknowledgments

Design skills for business cards, resumes, flyers, menus, infographics, invitations, newsletters, and documents were informed by research on the LICA dataset — Layered Image Composition Annotations for Graphic Design Research by Hirsch, Yadav, Garg & Mehta (2026). Licensed under CC BY 4.0.

Links

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