Package Exports

@efectoapp/mcp
@efectoapp/mcp/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@efectoapp/mcp) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

@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

Agent calls create_session → gets an Efecto URL
User opens the URL in their browser
Agent uses any of the 46 tools directly — they execute in the browser in real-time
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.

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.