Connect your agent to the canvas

Agentic Canvas is built for designing with an AI agent. Claude, ChatGPT, Codex, Cursor, Claude Code, or any other agent that supports MCP can read what is on the canvas and add to it or change it. MCP, the Model Context Protocol, is the standard way AI agents connect to tools.

Add an agent

1. Open canvas.agentgrid.io and choose AI agents at the top of the window.
2. Choose Add an agent.
3. Follow the steps shown to connect your agent. Each agent you add gets its own link.

The AI agents panel lists the agents that can work in this canvas. Agents can work in it while this tab is open, so keep the canvas tab open during the session.

What your agent can do

• Read the canvas: the layers, the current selection, and the HTML behind them.
• Add and change designs: draft new frames, edit existing ones, add pages and images, and duplicate or remove layers.
• Export: produce the HTML or an image of a design.

You see every change on the canvas as it happens. Each change an agent makes is one step you can undo.

Work well together

• Select the thing you mean before you ask. Your agent can see the selection.
• Ask for a first draft, then refine by hand. See Design on the canvas.
• If a change is wrong, undo it and ask again.

This is separate from connecting to AgentGrid.io

Adding an agent to the canvas lets it work on your canvas files. It does not connect that agent to your AgentGrid.io team or artifacts. For that, see How agents connect.

Questions and answers

Which agents can I connect? Claude, ChatGPT, Codex, Cursor, Claude Code, and any other agent that supports MCP.

Can my agent work while the canvas is closed? No. Agents can work in the canvas while its tab is open.

Can I undo what my agent did? Yes. Each change an agent makes is one undoable step.

Does my agent get access to my AgentGrid.io artifacts? No. The canvas connection covers the canvas only.

Direct answer

A human adds an agent in the canvas with AI agents, then Add an agent. Each agent gets its own link. The agent then acts on the human's open canvas tab over MCP (Model Context Protocol). The human sees every change live, and each write is one undoable step.

Human-only setup

Only the human can add an agent. Instruct them to open canvas.agentgrid.io, choose AI agents, choose Add an agent, and follow the steps shown. The agent can work only while that canvas tab is open.

What the connection allows

Tool names are as exposed by the canvas connector. If a client lists different names, use the names it lists.

Working rules

• Start with get_outline and get_selection. Act on what the human selected when they refer to "this".
• The canvas document is HTML: each layer is an element, and a child layer is a direct child element of its parent.
• To repeat something that exists, duplicate it and patch each copy instead of resending its HTML.
• Text cannot be measured from outside. To center or align text, put it in an auto-layout frame and let it hug its content.
• Report each change. The human can undo any single write.

Boundaries

• No access when the canvas tab is closed.
• No access to the human's AgentGrid.io team or artifacts through this connection. That is a separate connection. See How agents connect.
• Sharing or publishing through AgentGrid.io is a human decision. See Export, hand off, and publish.

Questions and answers

Who adds the agent to the canvas? The human, with AI agents and then Add an agent.

Can the agent act when the tab is closed? No. It acts on the human's open canvas tab.

How should an agent copy an existing layer? Use duplicate_nodes with a patch per copy; do not resend the HTML.

Does this connection reach AgentGrid.io artifacts? No. Canvas access and AgentGrid.io access are separate.