Web App Builder
The web app builder is where Qira builds your web app with you: a chat on the left, your app running on the right. You describe it, watch it appear, click through it and publish it.
Opening the builder
There are three ways in:
- Home - describe the app under What should we build? and click Build. The builder opens with your request already running.
- Studio - click Start a web app on the Web app card.
- An existing web app - open it from Studio to keep working on it. The chat history is kept.
The layout
| Area | What it does |
|---|---|
| Top left | The app's name (click the pencil to rename it) and the conversation history (clock icon) |
| Chat | Your conversation with Qira. Each reply shows what she did, which files she changed and what she tested |
| Preview | Your app, running. It is a real app: forms submit, sign-in works, data is saved |
| Toolbar | Switch between preview and code, select an element, go back, forward and reload, and choose a device size |
| Top right | Publish, version history and the app's settings |
Starting a new app
An empty app offers two ways to begin.
Starting points
Four starters sit above the chat box. Click one, or describe your own idea:
| Starter | What you get |
|---|---|
| Landing page | Hero, features, call to action |
| Dashboard | Charts, tables, filters |
| Auth flow | Sign in, sign up, password reset |
| Pricing page | Tiers, a monthly or yearly toggle, FAQ |
Start from a look
On the right, Start from a look offers six designs. Pick the kind of thing you are building and Qira starts in that type, colour and texture:
| Look | Made for |
|---|---|
| Ledger | Product / SaaS |
| Signal | Developer / AI |
| Atelier | Studio / editorial |
| Market | Shop |
| Console | App / dashboard |
| Civic | Local business |
If you pin nothing, the look follows your prompt: Qira picks one that fits what you describe.
Talking to Qira
Type in the box at the bottom of the chat. Next to it:
- @ - mention something in your workspace, such as a table or a workflow, so Qira uses it.
- Upload - attach a file: a screenshot, a sketch, a logo, a document with your content.
- Microphone - say it instead of typing it.
- Trash - clear the conversation.
- Model picker - choose the AI model for the next message. You can switch at any time: a strong model for building the structure, a lighter one for small text changes.
Your remaining credits are shown under the box.
Be specific about data and people
Qira builds better apps when you say:
- what the app keeps: "bookings with a date, a time, a service and the client's phone number"
- who signs in and what they may do: "clients see only their own bookings, the owner sees all of them"
- what should happen: "send me an email when a booking comes in"
Pages and backend in one request
Qira builds the pages. When the app needs to store, check or send something, she asks Vira, who builds:
- tables in My Data, with typed columns
- workflows that act as the app's API endpoints, for example
POST /feedback/submitorGET /feedback/list - sign-in: a login endpoint that checks the password and returns a token, and endpoints that only answer with a valid token
Everything Vira creates appears in Studio and My Data like anything you built by hand, so you can open and change it later.
Verified before finishing
Before Qira hands a build back, she tests it. The Verified before finishing card lists each check with its result:
- Build check - the project compiles
- each API endpoint she created, with the HTTP status it returned
- the rows she read back from the tables
Under the card you see the credits the build used and the time it took. If a check fails, Qira tries to fix it before she finishes. When she creates an admin account for you, she gives you its sign-in details in the chat: change the password before you go live.
Preview and code
- Preview (eye icon) runs your app. Use the device menu next to the address bar to see it at desktop, tablet or phone size.
- Code (
<>icon) shows the project's files. Open any file to read it or edit it by hand. - Select (pointer icon) lets you click an element in the preview to work on that element.
Publishing
Click Publish to put the current version live. Every publish is kept in the version history (clock icon next to Publish), so you can go back to an earlier version.
In the app's settings (gear icon) you set:
- its subdomain, or a custom domain from your workspace. See Custom Domains
- whether it is published
- whether search engines may index it
- its look
Examples
Feedback form with an admin area
"A feedback form for a bakery. Visitors submit name, email and message. An admin signs in and marks submissions as handled. Store it in a table."
Result: a public form page, an admin sign-in and an admin table, a feedback_submissions table, and five endpoints (submit, login, register, list, handle), with the list and handle endpoints only answering signed-in admins. Tested and done in about two minutes.
Booking system
"A booking page for my studio. Clients pick a service, a day and a free time slot. I see all bookings in a weekly view."
Client portal
"Clients sign in to see their projects and invoices. I upload the invoices as PDFs."
Next steps
- Workflow Builder - open the workflows behind your app
- My Data - see and edit your app's tables
- Custom Domains - put your app on your own domain