[Documentation](https://fluxnative.app/docs) / Build your app

# Tour the workspace

Find your way around a project: the chat, the project panel, the preview, and the project bar's pages and tools.

![The editor: the chat on the left, the project panel with the app's screens in the middle, the preview with the app on the right, under the project bar](https://fluxnative.app/guide-media/the-workspace.6f02ea88.webp)

Chat on the left, the project panel in the middle, the live preview on the right.

## The screen

1. **Chat**, on the left: send requests, attach images, answer questions, undo a turn. See [Work with the assistant](https://fluxnative.app/docs/work-with-the-assistant).
2. **Project panel**, in the middle: the **App**, **Design**, **Code** and **Status** tabs.
3. **Preview**, on the right: the app in a device frame, compiled from the current source. See [Preview](https://fluxnative.app/docs/preview).

## The project bar

| Control | What it does |
| --- | --- |
| **Projects** | Back to your apps. On a phone, the ← arrow. |
| The app's icon and name (**App settings**) | Opens App settings: name, icon, launch screen and store identifiers. On a phone it is in the app menu. |
| **Editor**, **Publish**, **Manage App**, **Push notifications** | The app's pages: tabs on a wide window, the app menu on a narrower one. |
| **Saved** | Whether your own edits are saved, and whether the assistant is working. |
| **Server** | Backend, in-app purchases and secrets; a dot shows a connected backend. See [Server](https://fluxnative.app/docs/connections). |
| **MCP** | Connects Claude Code, Codex, Cursor, VS Code and other coding agents. See [Connect an editor](https://fluxnative.app/docs/remote-mcp). |
| **Build** | Signed APK, App Bundle or IPA, with progress. Store uploads happen in **Publish**. |
| Credits | The organization's balance after finalized charges. |
| ⋯ (phone) | Code, Server, MCP, the credit balance and your other open apps. |

## The project panel

- **App**: screens, navigation and shared components. See [App structure](https://fluxnative.app/docs/app-structure).
- **Design**: brand colour, radius, density, type and typefaces, no prompt needed. See [Design tokens](https://fluxnative.app/docs/design-tokens).
- **Code**: the source, with **Download** and **Upload to assets/** (**Upload to public/** on a landing page). ⌘E (Ctrl+E) opens it anywhere. See [Edit the source](https://fluxnative.app/docs/edit-the-source).
- **Status**: open checklist items from every chat (with **Jump** and **Continue**), **Feature journeys** (the app's journeys), and **Quality checks** (what the last checks found).

## Good to know

- Tabs stay loaded, so switching keeps your place. A narrow panel shows only their icons; hover one for its name.
- Collapse the panel for a bigger preview. On a phone, Chat, Preview and App are tabs at the bottom, and Code opens from ⋯ as a drawer.

## Related

[Work with the assistant](https://fluxnative.app/docs/work-with-the-assistant) · [Preview](https://fluxnative.app/docs/preview)

Previous: [Import an existing Expo app](https://fluxnative.app/docs/import-expo-app) · Next: [Work with the assistant](https://fluxnative.app/docs/work-with-the-assistant)

---

Find your way around a project: the chat, the project panel, the preview, and the project bar's pages and tools.

Page: https://fluxnative.app/docs/the-workspace