# Your first version

> This page is about FlutterFlow (the app builder you use by describing your app), not FlutterFlow Studio.

URL: https://docs.flutterflow.io/ffx/first-version

Learn what the agent builds from your prompt, the eight steps it shows while it works, and how to follow, stop, and check your first version.

Your [first version](https://docs.flutterflow.io/ffx/glossary#building-with-the-agent) is the app the agent builds from your [prompt](https://docs.flutterflow.io/ffx/glossary#building-with-the-agent) in your app's first [thread](https://docs.flutterflow.io/ffx/glossary#building-with-the-agent). When the agent finishes, FlutterFlow pushes the first version to your app automatically so that you can open, try, and share it right away.

## What the agent builds {#what-the-agent-builds}

The agent plans your app's screens from your prompt. To change how your app looks afterward, see [Change the look](https://docs.flutterflow.io/ffx/change-the-look).

Your first version comes with a backend: a table for each kind of record your app shares or keeps across devices, filled with starter data, and sign-in with an email and password. When people can add pictures to a record, its sample pictures are saved in **Backend › Files**, along with the ones people add. To change any of this, ask the agent in a thread.

To learn how the backend works, see [How the backend works](https://docs.flutterflow.io/ffx/backend).

To learn how your app gets its name, see [App name and launch screen](https://docs.flutterflow.io/ffx/app-name).

## First version card {#the-card}

After you send your prompt, a thread named **First version** opens with a **First version** card that tracks the agent's work. This page shows the card as it looks on a computer. While the agent works, the card shows:

- A title that shows what the agent is doing, and then your app's name after the agent plans it.
- Under your app's name, a line that shows how many screens the agent has made, such as "Making the screens · 2 of 5 made".
- **Notify me** and **Stop** at the top of the card.
- A row of eight step bars.

<Mock name="first-version-running" alt="The First version card while the agent works, titled Ledger, with Notify me and Stop in the top row, the line Making the screens · 3 of 4 made, the eight step bars with the third under way, the app's screens and Show the work, and the Screen previews band below it with three pictures ready and one rendering." />

## First version steps {#the-eight-steps}

The agent works through the first version's eight steps in order:

1. **Starting the agent's workspace**
2. **Planning the app**
3. **Writing the screens**
4. **Checking every screen**
5. **Landing the app in the project**
6. **Building the preview**
7. **Saving the first version**
8. **Pushing it to your app**

To see the step names on the card, point to a step bar. To see the eight steps and which ones are done, click **Show the work**.

## Screen previews {#screen-previews}

**Screen previews** appears after the card while the agent builds your screens. It shows each screen in each of its states, along with the number of states and previews. To switch all previews between light and dark, click **Light** or **Dark**.

## Get notified {#notify-me}

To get a browser notification when the first version finishes, click **Notify me** on the card while the agent works, and keep the app open in the same tab. Reloading the page or leaving for Home or another app cancels the notification.

## Stop the first version {#stop}

To stop the first version, click **Stop** on the card.

To pick it up again, send a message. See [Steer or stop the agent](https://docs.flutterflow.io/ffx/stop-or-steer).

<Mock name="first-version-stopped" alt="The First version card after it was stopped, titled The first version was stopped, with the elapsed time, the line Send a message to pick it up again, two of the eight step bars done, and Show the work." />

Closing the browser tab leaves the first version running. See [Steer or stop the agent](https://docs.flutterflow.io/ffx/stop-or-steer#closing-the-tab).

## When the first version is ready {#ready}

When the agent finishes, click **Open on your phone** on the card, and then scan the QR code with your phone. See [Open on a phone](https://docs.flutterflow.io/ffx/open-on-a-phone).

## First version thread {#initial-generation}

A lightning icon marks the first version's thread in the thread switcher. Its tooltip reads **Initial generation**.

## Next steps {#what-you-can-do-next}

- [Your first change](https://docs.flutterflow.io/ffx/first-change)
- [Open on a phone](https://docs.flutterflow.io/ffx/open-on-a-phone)
- [Change the look](https://docs.flutterflow.io/ffx/change-the-look)

## Troubleshooting {#troubleshooting}

- [Troubleshoot getting started](https://docs.flutterflow.io/ffx/troubleshoot-getting-started)