Builders

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/submit or GET /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

We update these pages often. Spotted something out of date? Tell us

AI AssistantPowered by Ubex
Beta
Ask me anything about Ubex workflows, nodes, or the API.