JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 54
  • Score
    100M100P100Q74099F
  • License MIT

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

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 39 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 39 tools directly — they execute in the browser in real-time
  4. User sees every change live as the agent builds the design

Tools (39 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

Export (1)

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

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.