Fanta docs
Getting Started

Connect an Agent

Connect Claude Code or Codex to the open Fanta canvas through local MCP.

For the Public Alpha, use the installed app's copied instructions and verify the exact open project before editing. The agent recording and sample task show the first bounded workflow.

The recorded example uses an external Opus 5.5 agent through Fanta MCP, then inspects the native result, saved FNX and Undo/Redo in the accepted signed app.

Keep Fanta running with the intended design open. The app starts a local MCP server by default over a private Unix socket. The fanta --mcp-stdio command bridges an agent's stdio MCP connection to that running app; it does not open a network port. In settings, fanta_live_mcp.enabled can disable the server.

In a non-Store build, choose Help → Connect Claude Code / Codex… to copy instructions for the current executable and user data directory. The welcome page also offers Copy command for Claude Code and Copy Codex config. The copied values matter if you use a development build, multiple profiles, or a custom data directory: the bridge must find the discovery file written by the same running app.

Claude Code

Run the copied command from the design project directory. Its shape is:

claude mcp add --scope project --transport stdio fanta -- '/Applications/Fanta.app/Contents/MacOS/fanta' --mcp-stdio --user-data-dir '/path/to/the/running/Fanta/data-directory'

Replace both paths with the values copied from Fanta. The project scope keeps this registration with the project. Restart Claude Code after adding it.

Codex

Put the copied TOML snippet in this project's .codex/config.toml, then restart the agent. Its shape is:

[mcp_servers.fanta]
command = "/Applications/Fanta.app/Contents/MacOS/fanta"
args = ["--mcp-stdio", "--user-data-dir", "/path/to/the/running/Fanta/data-directory"]

Use the exact executable and data directory shown by Fanta. Do not assume the default profile path if you launched the app with --user-data-dir or FANTA_USER_DATA_DIR.

Verify the connection

Check the client's MCP status and call get_editor_state. A successful connection shows an Agent connected notice in Fanta. The current local server offers these 13 tools:

WorkTools
Inspect the canvasget_editor_state, get_guidelines, batch_get, get_screenshot
Edit and inspect sourcebatch_design, read_fnx_source, validate_fnx_source
Reuse and prepare assetsget_design_system, prepare_design_asset, import_image
Review with agentslist_comments, reply_comment, report_agent_activity

Start with guidelines and editor state, then follow the design build loop. batch_design now paints each operation while it runs and commits the batch as one undo step; a failed or canceled batch rolls back. Use a stable agent_id and agent_name in report_agent_activity and batch_design.activity so Follow can track the work. Report a project-contained source_path and workspace when moving to code or variables. An agent can validate a complete FNX or managed JSON candidate before writing it; validation alone does not modify the project. import_image saves an image to project assets but does not place a layer. prepare_design_asset opens a prefilled image or SVG composer for your review and does not submit generation.

Fanta's in-app MCP & Tools settings connect the built-in agent to other tool servers. They are a separate direction from this live canvas bridge. The commands above are verified for non-Store builds. Connecting an external client to a packaged Mac App Store build needs separate validation; that build cannot launch command-backed MCP servers from inside Fanta. See Settings and build differences.

One bounded first task

After get_editor_state identifies the intended saved sample, request:

Change only the existing button label to “Explore Fanta”. Keep its geometry, styles, IDs and all other layers unchanged. Inspect the result and stop. Do not generate media or call paid services.

Check the canvas and corresponding FNX, then use Undo and Redo. For source work, read the complete relevant file, preserve IDs and validate the complete candidate with validate_fnx_source before using the agent's normal file tools. There is no local edit_fnx_source tool. Read-source results can be truncated, so inspect the continuation information. The local bridge is separate from the metered hosted API and does not configure credentials or establish spending limits.

On this page