Creating a project
You create a project directly from the Genie home screen by typing a description of the app you want to build into the prompt input and pressing Enter (or clicking Generate). Genie reads your description, generates the app, and opens it in the project view.1
Open Genie
Go to genie.app and sign in to your account.
2
Describe your app
Type a description of the app you want to build into the prompt field. Be as specific as you like — for example, “a task tracker for a small team with due dates and priority labels”.
3
Generate
Press Enter or click the send button. Genie will start building your app. Once it finishes, you are taken directly into the project view.
The project view
Once your project is created, the project view is where you spend most of your time. It has two main areas side by side: the chat panel on the left and the live preview on the right.Chat panel
The chat panel is where you talk to Genie. Type follow-up instructions — “add a search bar”, “change the color scheme to dark blue” — and Genie updates the app in real time. Your full conversation history is saved and visible here.
Live preview
The live preview renders your app as it actually runs. You can click through it, fill in forms, and test behavior exactly as a real user would — without leaving the project view.
Chat history
Every message you send and every response Genie gives is stored in the chat history for that project. You can scroll back through the entire conversation to review past changes, understand why something was built a certain way, or pick up where you left off after a break.Rating a response
Once Genie finishes a response, rate it with a thumbs-up or thumbs-down right on the message, and optionally add a short note explaining why. Click your rating again to clear it, or click the other thumb to change your mind — switching from a dislike to a like drops any note you left, since a complaint shouldn’t carry over as praise. Anyone who can see the project can rate a response; each person’s rating is their own.Watching a build in progress
While Genie is building or updating your app, the chat panel shows a live progress card listing every step of the build — planning, coding, and publishing. Click any step to open its details: what it did, which files changed, and — if it failed — why, along with an Ask Genie to fix this button that retries with the failure reason already filled in. Once a build finishes, Genie also shows a short summary of what changed. While that summary is being written, the progress card’s status line reads “Writing your summary…” rather than the generic “Finishing things up…” — so you can tell coding is done and Genie is just wrapping up. What I built and Not built yet appear as a compact preview — click Show more to expand the full summary — so any to-do suggestions or Genie’s next-step recommendation stay visible right underneath instead of getting pushed down the page.Refreshing the preview
Once a build finishes, a small See current version button appears floating over the live preview — and, while the preview is still loading, on its placeholder too — so you can pull in the latest result immediately. It disappears on its own once the preview is up to date, and reappears the next time a follow-up prompt changes your app.Chat mode
Sometimes you want to ask a question instead of asking for a change — “what does this component do?”, “how would I add authentication?”, or “which fields should this form have?”. Genie automatically recognizes when you’re chatting or asking a question rather than requesting a build, and answers directly in the chat panel instead of starting a rebuild. There’s nothing to toggle — just ask naturally, and no credits are spent on a rebuild you didn’t ask for. Genie’s answer isn’t always plain text — when it makes sense to offer you a choice, it renders a clickable card right in the chat instead of a paragraph you have to answer in your own words: a button to confirm an action, a list to pick one option from, or a checklist where you can tick as many choices as apply and add your own note. See Interactive answers for the full rundown.The Genie AI panel
Click the Genie AI handle beside your live preview to open the full workspace AI in a panel next to your app, without leaving the project. It’s the same assistant as the command palette and workspace chat, so anything it can do there — create or update projects, check credits, manage members — it can do from here too. The panel holds one ongoing conversation for the project — there’s no switcher inside it. Every hand-off into the panel, whether from Continue with Genie AI, an Ask Genie button, or the command palette, continues that same conversation instead of starting a new one, so context is never split across threads. To browse your other conversations or start a fresh one, use the workspace AI from the sidebar or command palette. That conversation is shared with your whole team — when a teammate opens the same project, they land in the same thread instead of starting their own, so nobody has to catch up on what already happened before they can help. On mobile, the Genie AI tab is the primary way to work on a project. On both mobile and desktop, the project’s own build chat — separate from the Genie AI panel — is a secondary, admin-only view, reachable from the Genie AI tab’s header.Who else is here
A project is shared — everyone in your workspace can open it. The Genie AI tab shows a small badge naming who else currently has the project open: one other person’s avatar and name, a pill listing several people once it gets crowded (“+N more”), or nothing at all if you’re the only one there right now.Editing text directly in the preview
You can click on any text in the live preview and edit it directly, without sending a new prompt. This is useful for quick label changes, button copy tweaks, and headline adjustments.1
Enter edit mode
Click the Edit icon (pencil-and-selection cursor) in the prompt toolbar. The prompt input switches to an edit card, and hovering over the live preview highlights text elements you can select.
2
Select text to edit
Click one or more highlighted text elements in the preview. Each selection appears in the edit card as a labelled field.
3
Update the text
Change the text for each field in the edit card.
4
Apply
Click Apply edits. Genie applies all changes at once.
Adding images and videos to your app
You can include an image or video in your project by dropping it directly into the project chat. Drag a file — a logo, a hero image, a product photo, or a background video — into the prompt input field and describe what you want Genie to do with it. For example:- “Use this as the hero background image”
- “Add this logo to the navigation bar”
- “Use this video as the landing page background”
Project URL
Each project gets a unique URL that you can use to open it directly. You can find this URL in Settings under the General tab, or simply copy it from your browser’s address bar when you are viewing the live app. If your project is public, this URL works for anyone — no login required. On paid plans you can also connect a custom domain, so your app lives at an address you own. See Publish and share your app for details.Remixing a project
If you are viewing a public project that the owner has made remixable, you will see a Remix button in the project view. Clicking it creates a copy of that project in your own account — including all of its generated code — so you can build on top of it with your own prompts. If you are not signed in when you click Remix, Genie will redirect you to the login page first, then complete the remix once you are authenticated.Rolling back to a previous version
Every change Genie deploys is saved as a version you can return to. If a recent update didn’t go the way you wanted, you can restore your live app to exactly how it looked at an earlier point.1
Find the version
Scroll back through your chat history to the turn whose result you want to restore.
2
Roll back
Click Rollback to this state on that turn’s card. A confirmation dialog explains that this replaces your app’s current live code with the selected version.
3
Watch it deploy
Genie restores the code and redeploys your app. A status indicator tracks progress until your live app is serving the restored version.
Rollback isn’t available while your project runs on Genie Cloud. Restoring an earlier version would only revert your app’s frontend code, not the database and edge functions your live Cloud backend has since moved on to — so the Rollback to this state button stays disabled, with a tooltip explaining why, for as long as Genie Cloud is active.
Browser AI agents
If you use a browser with a built-in AI assistant — such as Gemini in Chrome or Copilot in Edge — that assistant can work with your open project directly. It can send a prompt to Genie on your behalf and check whether Genie is still busy, without you needing to type into the chat yourself.This works automatically on browsers that support the emerging WebMCP standard. On any other browser, the project page behaves exactly as normal.
Next steps
Project settings
Rename your project, add a description, and control who can see or remix it.
Publish and share
Make your app public, get a shareable link, or connect a custom domain.
Store secrets
Add API keys and environment variables your app needs to run.
Genie Cloud
Connect a database, authentication, and file storage to your project.
