Skip to main content
Agent chat docked to the right side of the editor
You can prompt the agent to generate page designs, edit your existing designs, or update your theme.
  • Design new pages — Generate multiple variations of page designs
  • Edit your page directly — Make targeted changes to your current page
  • Design components and snippets — Create reusable building blocks and design system examples
  • Update your theme — Modify colors, fonts, and tokens project-wide
  • Answer questions — Search Subframe docs for help with features and development workflows
Agent chat is for creating and updating designs. For adding interactivity and state, use Prototype mode.

​
Getting started

  1. Click the Agent button in the toolbar or press Cmd + /
  2. Type a prompt and press Enter or click the send button
  3. The agent creates a new conversation and responds to your prompt
Agent chat docks to the right side of the editor and follows you across your project — it’s available on all project level pages. The agent chooses how to respond based on your prompt:
  • Variations — For new designs, creative exploration, or prompts requiring new components. The agent generates 1-4 variations for you to choose from.
  • Direct edits — For simple changes to existing elements like colors, text, or layout tweaks
You can keep prompting while the agent is working — follow-up messages queue and send when the current response finishes. Click the stop button (or press Esc) to stop a running response.

​
Review designs

Variations land as real pages on a canvas as each one finishes generating. The chat shows a live tile for each variation — click a tile to jump to that page on the canvas. From there you can:
  • Ask a follow-up — Refine a variation or combine ideas from different ones (“use the header from variation 1 with the layout from variation 3”)
  • Edit visually — Open any variation in design mode for manual edits
  • Delete the variations you don’t want

​
Conversation history

Your conversations persist across sessions and pages so you can reference past generations. Click the history button at the top of agent chat to see every chat in the project, grouped by recency — or hover over it to peek at the list. An animated indicator means a chat is still working, and a dot marks unread results. Click the + button to start a new chat. Each chat is labeled with the page, component, or canvas it last worked on. Click the label in the chat header to jump to that resource.

​
Agent chat toolbar

Agent chat includes additional tools: You can also use quick edits to make targeted edits to specific elements using the agent.

​
Troubleshooting

Agent chat is great for generating new designs or making broad changes to your page. But for more targeted edits, you may want to use quick edits.
Open the component editor and use the same agent chat to insert elements, create variants, and refactor components. You can also right-click or press / to open quick actions and select Ask agent to edit….
Cmd + Z undoes changes made directly in the visual editor. It does not revert changes applied through MCP or API tools.To revert a tool-applied change, restore the affected page, component, snippet, or theme using Version history. Use project version history to recover deleted items or roll back changes across multiple parts of your project.
Last modified on September 24, 2026