FigClank: Docs

What is the FigClank MCP?

The FigClank MCP is a server that exposes your FigClank designs to AI assistants. It lets AI agents:

Read your design documents, node trees, components, styles, and tokens
Query nodes by type, name, component, size, and text style
Export nodes as SVG, PNG, HTML, or CSS
Inspect screens for layout, component usage, and text content
Mutate designs with create, update, align, group, and more

How It Works

The FigClank app pushes your current canvas to the MCP server whenever it changes. AI agents connect to the server and use the pushed document for all tools.

Installation

Add MCP to your IDE

Click the button below to add the FigClank MCP server to Cursor, Claude, or VS Code. When Cursor connects, you'll be prompted to sign in via OAuth.

Cursor

•FigClank Design documents
•Remote and local servers

Claude

•FigClank Design documents
•Remote servers

VS Code

•FigClank Design documents
•Remote and local servers

Available Tools

auth_whoamiworkspace_listProjectsdocuments_listdocuments_getdocuments_getSnapshothistory_listVersionsnodes_getnodes_listChildrennodes_getSubtreenodes_querycomponents_listcomponents_getstyles_listtokens_getinspect_screenSummaryinspect_componentUsageinspect_textContentexport_svgexport_pngexport_htmlexport_cssrender_thumbnailresolve_asset_urlagent_getSelectionSnapshotagent_updateNodeagent_createShapeagent_createTextagent_wrapInAutoLayoutagent_alignNodesagent_distributeNodesagent_groupNodesagent_ungroupNodesagent_createComponentFromSelection

Manual configuration

For Cursor, open or create .cursor/mcp.json in your project (or user config):

{
  "mcpServers": {
    "figclank": {
      "url": "https://mcp.figclank.design"
    }
  }
}

For VS Code, create .vscode/mcp.json with servers (VS Code uses servers, Cursor uses mcpServers):

{
  "servers": {
    "figclank": {
      "type": "http",
      "url": "https://mcp.figclank.design",
      "headers": {}
    }
  }
}

Enable MCP in the FigClank app

Open a design at studio.figclank.design
Click the main menu (hamburger) in the top-left
Toggle MCP On to push your canvas to the server
Optionally click Push to MCP to push immediately
After AI changes, click Sync from MCP to pull updates (or wait for the 10-second auto-poll)

Features

Discovery

Tool	Description
auth_whoami	Get authenticated user info (user ID, wallet address, permissions)
workspace_listProjects	List all design projects for the user
documents_list	List documents with pagination
documents_get	Get document metadata (name, timestamps, pages)

Node Inspection

Tool	Description
nodes_get	Get a single node with optional field projection
nodes_listChildren	List children of a node (paginated)
nodes_getSubtree	Get subtree with depth and node count limits
nodes_query	Query nodes by type, name, component, size, text style

Design System

Tool	Description
components_list	List all components in a document
components_get	Get component definition by ID
styles_list	List styles (text, fill, stroke, effect)
tokens_get	Get design tokens (colors, spacing, radii, typography, shadows)

Inspect Helpers

Tool	Description
inspect_screenSummary	Summarize a screen/frame (layout sections, components, colors, typography)
inspect_componentUsage	Find all places where a component is used
inspect_textContent	Extract all text content from a node subtree

Export & Render

Tool	Description
render_thumbnail	Get thumbnail URL for a design
export_svg	Export a node and its children as SVG
export_png	Export a node as PNG
export_html	Export a frame as HTML (Neynar mini-apps or web)
export_css	Generate CSS, Tailwind classes, or React Native styles from a node
resolve_asset_url	Resolve image reference to a public URL

Agent Mutation Tools

Tool	Description
agent_getSelectionSnapshot	Get compact JSON of selected nodes for planner context
agent_updateNode	Update node properties (fills, effects, width, height, cornerRadius, opacity)
agent_createShape	Create rectangle, ellipse, frame, or triangle
agent_createText	Create a text node
agent_wrapInAutoLayout	Wrap selected nodes in an auto layout frame
agent_alignNodes	Align selection (left, center, right, top, middle, bottom)
agent_distributeNodes	Distribute nodes with even spacing (horizontal/vertical)
agent_groupNodes	Group selection into a GROUP
agent_ungroupNodes	Ungroup a GROUP node
agent_createComponentFromSelection	Convert selection into a reusable component

Field Projection

Node-returning tools support field projection to reduce payload size:

// Option 1: Specific fields
fields: ["id", "name", "type", "layout", "style"]

// Option 2: Detail level
detailLevel: "min" | "default" | "full"
// min: id, name, type, parentId only
// default: + transform, visibility, layout, constraints
// full: all fields including style, text, vector

Version Pinning

Always pin the document version for reproducible workflows:

const snapshot = await call('documents_getSnapshot', { documentId });
const version = snapshot.version;

// Use version in ALL subsequent calls
await call('nodes_get', { documentId, version, nodeId });
await call('tokens_get', { documentId, version });

Rate Limits

Tool	Description
General API calls	100/min
export_svg	20/min
nodes_getSubtree	30/min
nodes_query	60/min

If rate limited, wait and retry with exponential backoff.

Error Codes

Tool	Description
NOT_FOUND	Document/node doesn't exist – Check IDs
FORBIDDEN	No access to resource – Verify permissions
VALIDATION_ERROR	Invalid parameters – Check input format
RATE_LIMITED	Too many requests – Wait and retry
INTERNAL_ERROR	Server error – Retry or report

Limitations

When using browser-pushed documents:

Single document: Only the most recently pushed document is available per wallet. Pushing a new design overwrites the previous one.
No history: history_listVersions returns only the current version.
Asset URLs: resolve_asset_url may return null for images.
Thumbnails: render_thumbnail may return null for pushed documents.
Real-time: Updates are debounced (default 1 second). The MCP server sees changes shortly after you edit.