Agentic Canvas quickstart

You can go from nothing to a shared design in four moves: create, refine, check the real code, and ship. No account is needed.

Before you start

Your files are kept in that browser on your device, so keep working in the same browser. See Local storage.

Steps

1. Open the canvas. Go to canvas.agentgrid.io. You land on Home.
2. Create. Choose New to start an empty file, or drop existing work onto Home. You can also let your agent draft the first version. See Bring in your work.
3. Refine. Add a frame with Frame (F), then select, resize, recolor, and rearrange by hand. Every edit is real code. See Design on the canvas.
4. Bring your agent, if you want one. Choose AI agents, then Add an agent. See Connect your agent to the canvas.
5. Ship. Export the design, hand the HTML to a coding agent, or choose Share to share it through AgentGrid.io. See Export, hand off, and publish.

What you have at the end

A design that is real HTML and CSS. Nothing has to be redrawn or rebuilt before it ships. See Frames are real pages.

Questions and answers

Do I have to sign in first? No. The canvas opens straight away and works without an account.

Do I need an AI agent to use the canvas? No. You can design entirely by hand and add an agent later.

Where did my file go when I came back? Files are kept in the browser you used. Open the canvas in the same browser on the same device and look on Home.

Direct answer

A first session has four stages: create, refine, check the code, ship. The human opens canvas.agentgrid.io in their browser. No account is required.

Human-only steps

Instruct the human to do these; an agent cannot do them:

1. Open the canvas. It starts on Home.
2. Choose New, or drop existing work onto Home.
3. To give an agent access, choose AI agents, then Add an agent.
4. To share through AgentGrid.io, choose Share.

Agent steps after being added

1. Read the canvas outline and the current selection before changing anything.
2. Draft or change frames as requested. The human sees every change live.
3. Report what changed. Each agent write is one step the human can undo.

See Connect your agent to the canvas.

Constraints

• Files live in the human's browser on their device. A different browser or device does not have them. See Local storage.
• An agent can work in the canvas only while the human's canvas tab is open.
• Do not claim a design was shared or published unless the human did it or explicitly asked for it.

Questions and answers

Can an agent open the canvas for the human? No. The human opens the canvas and adds the agent.

Is an agent required for a first session? No. The human can design by hand and add an agent later.

What is the first thing an added agent should do? Read the outline and the current selection, then act on the request.