Skip to main content
Subframe generates high-quality React code deterministically from your designs.
For a complete guide to working with Subframe code, see the developer docs.
The canvas stays editable in code mode. You can insert elements and adjust the design without leaving code view, and the inspected code updates to match.

​
Setting up agents and your codebase

Click Connect MCP in the Code tab to open Agents settings. You can also open it from your account menu. Use it to:
  • Connect Claude Code, Codex, Cursor, or Replit through the MCP server
  • Set up Subframe in your codebase with the CLI
  • Sync components into your codebase

​
Inspecting page code

Pages are screens built from components. After designing a page in Subframe, you can copy its React code and add application logic such as API calls, state, and routing in your codebase.
  1. Open the page in Subframe
  2. Click the Code tab at the top of the Inspector panel
  3. Copy the React code
To copy code for part of a page, select the elements first. The Code tab shows code for your selection.

​
Inspecting elements

  1. Click the Code tab
  2. Click on element you want to inspect
  3. Use dropdown to select what code format you want:
    • React + Tailwind code
    • CSS code
    • Properties

​
Syncing components

  1. Click the Code tab
  2. Copy the npx @subframe/cli@latest command for syncing all components in the page or your selection
To learn more about how syncing works, see syncing components.

​
Implementing a page with Agent chat

Agent chat can implement a page directly in your connected codebase. Give it the page in any of these ways:
  • Open the page or its canvas, then ask the agent to implement what you are viewing
  • Select the page before opening Agent chat
  • Add the page to your message with an @ reference
  • Copy the page frame and paste it into Agent chat
Then ask the agent to implement the page and describe any application logic it should add. Agent chat automatically includes the page or canvas you are viewing and the page you have selected. Learn more about giving your agent context.

​
Implementing a page with an external agent

If your team already uses an external agent connected through the MCP server, copy the link under Copy MCP link in the Code tab and paste it into your agent with your implementation request.
For new workflows, use Agent chat to implement the page.
You can also use the page link to update an existing implementation:
Last modified on September 25, 2026