Fanta docs
Agents & AI

Agent workflows

Connect an external agent to Fanta's local MCP server and make visible, validated design changes.

In a non-Store build, Fanta exposes a local MCP server from the running desktop app. Its stdio bridge is the Fanta executable with --mcp-stdio. The bridge forwards MCP requests to the app's private Unix socket. Keep Fanta open with a design document loaded. This is a local desktop connection, not a public TCP endpoint. A packaged Mac App Store bridge has not been verified.

Connect

Choose Help → Connect Claude Code / Codex… in a non-Store Fanta build. It copies project-scoped configuration using the running executable and its user data directory. The command shape is:

fanta --mcp-stdio --user-data-dir <copied Fanta data directory>

Put the copied Codex snippet in the project's .codex/config.toml, or run the copied Claude Code command from the project directory. Fanta's local MCP server is enabled in the default settings. If the client cannot connect, check that the installed app is running and a project or imported .fig document is open. See connection steps.

Available tools

ToolPurpose
get_editor_stateProject, pages, active page, components, selection, viewport, editability, and optional free space
get_design_systemCollections, modes, typed variables, bindings, component properties, and variant sets
prepare_design_assetOpen an image or SVG generation draft for user review; does not submit it
get_guidelinesDesign rules, coordinate conventions, and recommended working method
batch_getList a page tree or inspect exact node IDs, with depth and pagination controls
batch_designStream ordered design operations as one undoable batch
get_screenshotRender a PNG of a page, node, or motion-clip sample
read_fnx_sourceList or read project FNX files in slices
validate_fnx_sourceCheck a complete FNX or managed JSON candidate without writing
import_imageSave a file, HTTP(S) URL, or base64 image in project Assets without placing a layer
list_commentsRead page review threads, unresolved by default
reply_commentReply to a thread and optionally resolve it
report_agent_activityShow the agent's action and canvas, variable, or source-file focus

The canvas uses world coordinates in pixels, with the origin at the upper left and Y increasing downward. Node IDs must come from current editor state or a node read. Page listings use depth and pagination controls and refuse traversals over 1,000 nodes; narrow very large reads instead of fetching an entire imported page at once. get_editor_state advertises the operation capabilities supported by the running editor. batch_get accepts detail: an ID lookup defaults to editable style, while a page listing defaults to summary. Choose style for a detailed listing or raw with IDs for internal records. Inspect styles before writing them back.

Build in visible milestones

Read the state, guidelines, relevant nodes, design system, open comments, and a baseline screenshot. Build one component or screen section at a time. Give each batch_design call a descriptive label and a small group of related operations. Fanta previews content edits as the batch runs, then commits them as one undo step. A selection- or viewport-only batch creates no content undo step. If an operation fails or the batch is canceled, content edits roll back; selection and viewport changes are not transactional. The response identifies the failing operation and returns created IDs on success.

To make the work followable, call report_agent_activity with a stable agent_id and agent_name, the current action, and the page, node, or world position. Pass that same identity in batch_design.activity so each streamed step stays attributed to the agent. When moving to a source file, include its project-contained source_path and workspace (canvas, variables, or code). A user who chooses Follow can track the reported page, component tab, file, and workspace. Clear activity with active: false when finished. These presence indicators report focus; they are not edit locks between agents.

Structured operations cover frames, text, images, variables, bindings, ordering, selection, and viewport changes. The expanded vocabulary also includes create_shape for lines, polygons, stars, and paths; set_fill for solid, linear, radial, and image paints; set_effects for shadow and blur stacks; set_constraints; and stroke sides, dash, cap, and join. set_grid_layout defines fixed, fractional, or content-sized columns, and set_layout_child can place and span a grid cell. Component operations can turn matching layers into a master and instances, combine or extend variants, remove or arrange a variant, and rename a component.

Use batch_get with detail: "style" to inspect values in the operation vocabulary before changing an existing node. For individual rich-text runs and other properties without a structured operation, inspect the full FNX source, validate a complete candidate, save with file tools, and verify the reloaded canvas. Managed JSON also needs full typed validation before writing. See FNX source.

Verify visually

After each milestone, use get_screenshot and compare the result with the brief or reference. It renders the active page by default; pass a page index or node ID to narrow the view. The default maximum output dimension is 768 pixels, capped at 1568. An existing motion_clip ID plus playhead_ms samples animation. A screenshot is a read tool, not a file export. For deliverables, use the export controls.

On this page