Your first app
One project from an empty dashboard to a public address, with what to expect at each step and how long each one takes.
This page walks through one project end to end. Nothing here is a shortcut — it is what actually happens, in order.
1. Write the prompt
You land on the dashboard. It greets you with Ready to build? and, under that, a large text box:
Ask Bookbag to create an app…
Type what you want. Press Enter to send, or Shift+Enter for a new line. The circular arrow button to the right does the same thing; its tooltip is Build it.
What makes a good first prompt. Describe the app, not the code. Say what screens it has and what a person does on each one. Two or three sentences is usually right.
A useful one:
A booking page for a barber shop. A list of services with prices, a calendar of available time slots, and a confirmation screen after booking. Warm colours, not corporate.
A weak one:
A website.
If you are stuck, the row of chips under the box prefills a starter prompt, and the Templates tab has ten fully-written ones covering a landing page, a dashboard, a storefront, a portfolio, a task manager, a restaurant site, a blog, a booking page, a Pomodoro timer and a local business site. Clicking one fills the box; you can then edit it before sending.
2. Pick a look, or do not
Under the text box is a row starting 🎨 Look: with a pill reading Surprise me and up to six design pills, each with a small colour swatch.
A design is a set of visual instructions the builder is told to follow — palette, typography, spacing, component treatment, motion. Picking one is how you stop generated apps from all looking the same. Leaving it on Surprise me lets the builder use its own taste.
You can change the design later, but it only affects builds after the change — the app already written does not repaint itself. See Designs.
3. The project is created
Pressing Enter does several things at once:
- A project is created in your current organization.
- It is given a provisional name from the first six words of your prompt, and then quietly renamed by the AI to something short and readable — usually within a few seconds.
- Your prompt is recorded as the first chat message.
- The first build run starts.
- You are taken to the project page.
If you are a viewer in your organization, this is where you stop. The composer still accepts your prompt, but the server refuses it:
You can only view
<organization>— ask an admin there for member access.
4. Watch the first build
The project page splits in two: the chat on the left, the preview on the right.
The first build is the slow one, because the sandbox has to be created before any of your app is written. The step list shows it happening:
Copying the app template…
Installing dependencies (first build only — this takes a minute)…
Starting the dev server…
Expect a minute or two here, more on a cloud sandbox. Every later build skips all of this.
Then the preview comes alive, showing the starter template's placeholder — "Your app is being built". That is expected. Moments later the builder replaces it with your first screen and the preview updates on its own.
While the builder works you see its words appear in the chat as it writes them, and its actions in the step list underneath: Read app/page.jsx, Wrote app/page.jsx, Installed: npm install date-fns. When it is done it writes a short summary of what it built.
You can close the tab. The run continues on the server.
5. Iterate
Now the loop that is actually the product. The composer at the bottom of the chat reads Describe the next change…. One message, one change:
Make the service list two columns on desktop.
The confirmation screen should show the time and the barber's name.
The header is too tall.
Each is a new run. A small change takes twenty or thirty seconds. The builder has the whole history of this project, so it knows what it already wrote and you do not have to repeat yourself.
Ask for one thing at a time. A message with six changes in it is far more likely to come back half done than six messages with one change each.
6. Look at the code
Switch the right pane to Code. You get the file tree and the real source. It is read-only — changes go through the chat — but you can read everything the builder wrote, and you can press Download to take the whole project away as a zip.
7. Run the security check
Before you show the app to anyone, open the project-name dropdown and choose Security check. It runs immediately and costs nothing.
It reads your source for seven specific problems — bundled secrets, an admin page with no gate, an entitlement stored in the browser, and four others. If it finds something, one button hands the findings to the builder as an ordinary change you can review. See The security check.
8. Publish
Press Publish in the top bar. The dialog asks for an Address — 2 to 40 characters, lowercase letters, digits and hyphens — and then builds your app as a static site. That takes about a minute.
Your app is then live at:
https://app.bookbag.ai/p/<your-address>/
It is completely public and it keeps working whether or not your sandbox is running.
Publishing takes a snapshot. Change the app afterwards and the live site stays as it was until you press Publish update. See Publishing an app.
What that cost you
If you are running on Bookbag's own AI, each build run is charged in credits — computed from the tokens it actually used, with a minimum of one credit. An ordinary small change is a few credits; a large first build is more. Your balance tops up to your monthly allowance (500 by default) once each month.
If you have added your own AI provider key, all of it was free of credits — the provider billed you directly. See Credits.