> ## Documentation Index
> Fetch the complete documentation index at: https://docs.subframe.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Exporting code

> View and export code from your designs.

Subframe generates high-quality React code [deterministically](/develop/concepts/code-generation) from your designs.

<Note>For a complete guide to working with Subframe code, see the [developer docs](/develop/overview).</Note>

There are three tabs in code mode:

* **Inspect** — Get code from your designs
* **Installation** — Install MCP servers or get setup with an existing codebase or Replit
* **Prompts** — Get prebuilt prompts after you install MCP server

## Installation

Use the **Installation** tab for the following:

* Setting up Subframe in your codebase
* Setting up Claude Code, Cursor, or Codex MCP servers
* Setting up a new Replit project

## 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 **Code** in the navigation bar
3. Open **Inspect**
4. Copy the React code

To copy code for part of a page, select the elements first. **Inspect** shows code for your selection.

<video autoPlay muted loop playsInline controls className="w-full" src="https://hevpkratkeuc60w7.public.blob.vercel-storage.com/copy-and-paste-JNO1IbVafiW2vHKt9OuGXgteMyHkTR.webm" />

## Inspecting elements

1. Click on **Inspect** 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 on **Inspect** 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](/develop/concepts/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 flow, 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 flow you are viewing and the page you have selected. Learn more about [giving your agent context](/agent/giving-your-agent-context).

## Implementing a page with an external agent

If your team already uses an external agent connected through the [MCP server](/agent/mcp-server), copy the MCP link from **Prompts** and paste it into your agent with your implementation request.

<Note>For new workflows, use Agent chat to implement the page.</Note>

```text theme={null}
Implement the design at https://app.subframe.com/PROJECT_ID/design/DESIGN_ID/edit.

Wire up relevant app logic where applicable.
```

You can also use the page link to update an existing implementation:

```text theme={null}
Update the existing page to match the Subframe design at
https://app.subframe.com/PROJECT_ID/design/DESIGN_ID/edit.

Preserve all existing functionality unless the new design requires a change.
```


## Related topics

- [Annotations](/design/prototype-mode/annotations.md)
- [Overview](/design/components/overview.md)
- [Exporting theme](/learn/theme/exporting-theme.md)