> ## 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.

# Quickstart

> Install Subframe, connect your codebase, and ship your first change.

Here's how to connect your agent and codebase, then make a design change to your live app.

[YouTube video player](https://www.youtube-nocookie.com/embed/N1nwneJ9f_k)

Get started in Subframe, from design to code and back.

**1. Download the desktop app**

[Download Subframe for macOS or Windows ↗](https://subframe.com/downloads) and sign in.

**2. Connect your agent**

[Connect Claude Code or Codex](https://docs.subframe.com/agent/connecting-an-agent.md) using your existing subscription.

![The Agents dialog with Connect buttons for Claude Code and Codex, and the Subframe agent already connected](https://mintcdn.com/subframe-59800133/GtOCu5jrUJRxHQ5U/images/agent/connect-agent.png?fit=max\&auto=format\&n=GtOCu5jrUJRxHQ5U\&q=85\&s=db101eb6f74c212dcbc4329aa48af0e2)

**3. Connect your codebase**

[Select your local repository](https://docs.subframe.com/agent/connecting-your-codebase.md). Your code stays on your machine.

![The beit-rima repository on the main branch connected above the Agent chat message box](https://mintcdn.com/subframe-59800133/GtOCu5jrUJRxHQ5U/images/agent/codebase-connected.png?fit=max\&auto=format\&n=GtOCu5jrUJRxHQ5U\&q=85\&s=53e70e627f0afa50e2251e7da17fb641)

**4. Open your app**

[Start your development server and open your app](https://docs.subframe.com/browser/previewing-your-local-app.md) from a new tab.

![A new tab with localhost:3000 listed under Detected servers, along with its page title, repository, and branch](https://mintcdn.com/subframe-59800133/GtOCu5jrUJRxHQ5U/images/browser/detected-servers.png?fit=max\&auto=format\&n=GtOCu5jrUJRxHQ5U\&q=85\&s=3ff69b88a0b19dbe54dea8b1db0e97ec)

**5. Make design changes**

[Use **Inspect**](https://docs.subframe.com/browser/making-live-edits.md) to edit an element on the live page, or [capture the page](https://docs.subframe.com/browser/capturing-as-designs.md) to explore bigger changes on the canvas.

<video autoPlay muted loop playsInline controls src="https://mintcdn.com/subframe-59800133/GtOCu5jrUJRxHQ5U/videos/browser/inspect-and-capture.mp4?fit=max&auto=format&n=GtOCu5jrUJRxHQ5U&q=85&s=8aef7a0dab0ccc9b43bcfee6c2231f48" />

**6. Ship with the agent**

[Ask the agent to implement your design](https://docs.subframe.com/agent/making-code-changes.md) in your codebase. Agent chat automatically includes the design or browser page you're viewing.


## Related topics

- [Introduction](https://docs.subframe.com/overview.md)


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.