The Workspace
After creating a project, you land in the workspace — a split-panel editor where you build your app through conversation on the left and see the results on the right.
Layout overview
Section titled “Layout overview”The workspace has three main areas:
Left column — Chat
Section titled “Left column — Chat”This is where you interact with the AI. The chat panel contains:
- Message history — your conversation with the AI, including text responses, file operations, and tool usage
- Prompt input — a text field at the bottom where you type requests, attach images, reference files, and select your AI model
Everything you want the AI to do goes through this chat. Describe features, request design changes, report bugs, or ask questions about your code.
Right column — Preview and workspace panels
Section titled “Right column — Preview and workspace panels”The right side shows either the live preview or one of several workspace sections, controlled by the mode switch in the top bar.
Top navigation bar
Section titled “Top navigation bar”The bar across the top of the editor contains:
- Project name — your app’s name, displayed at the top of the chat column
- Mode switch — toggles between Preview and Workspace (see below)
- Screenshot button — on mobile, located in the top navigation bar. On desktop, it’s a floating button in the bottom-right corner of the preview area. Captures a screenshot of the preview to attach as context for your next message.
- Publish button — quick access to build and publish your app
Preview vs Workspace
Section titled “Preview vs Workspace”The mode switch in the top bar toggles between two views for the right column.
Preview mode (default) shows your running app in a live web preview. As the AI makes changes, the preview refreshes automatically. You can interact with the app directly — tap buttons, navigate screens, scroll lists.
Workspace mode gives you access to:
- App Settings — project configuration (package name, description) and key project information
- Code — a file browser with a built-in code viewer (Monaco) to read and explore your project’s source files
- Export — download your Flutter source code
- Publish — build APK, AAB, IPA, or PWA and publish to stores
- App Icon — upload and crop a custom app icon
Side menu
Section titled “Side menu”Click the hamburger icon (or hover near the left edge on desktop) to open the side menu. It contains:
- Project list — all your projects, searchable and sortable
- Sort options — sort by last accessed, creation date, or project name (ascending or descending)
- Pin button — pin the menu open so it stays visible alongside the chat
- New project button — start a fresh project
- Discover apps — browse top apps on the App Store and Google Play for inspiration
- Personal settings — profile, appearance, and subscription management
On desktop, the side menu overlays or pins alongside the editor. On mobile, it opens as a full-screen panel.
Desktop vs mobile
Section titled “Desktop vs mobile”The workspace adapts to your screen size:
Desktop — split-panel layout with a resizable divider between the chat and the preview/workspace. You can drag the divider to adjust how much space each side gets.
Mobile — full-screen panels. You see one panel at a time (chat, preview, or workspace section) and switch between them with taps or the mode switch. The side menu opens as a full-screen overlay.
Next steps
Section titled “Next steps”Now that you know the workspace, try making your first iteration — send a message and watch your app update in real time.