Build Mode app builder

Turn a small idea into a working calculator with Grok’s Build Mode, then test it with numbers you can check yourself. Build Mode lives in Grok chat; use it here to make a simple app before considering a public link.

Before you start

• A SuperGrok Heavy subscription with Build Mode access. xAI currently describes this as Early Beta on grok.com, iOS, and Android.
• A browser or the Grok mobile app, and a short app brief. This exercise builds an event-seat calculator using fictional numbers.
• An expected result written down: 10 seats at 20 each should total 200; zero seats should total zero.

Want to do it yourself?

Difficulty

6 out of 10

Estimated completion time

1–3 hours for a small prototype

Skills you’ll need: Describe one app workflow, inspect the generated preview, and test inputs and failure cases before relying on it.

I’ll do it myselfI’d rather get help

How this helps your brand

A checked calculator can help visitors explore an option before they enquire. Linking it from a relevant website page can support that decision, while a separate form or booking route handles any actual request.

1. 1

   Step 1: Write the smallest useful brief

   Describe one screen with two inputs: number of seats and price per seat. The output is the total. Choose a currency label and decide whether decimals are allowed.

   Use whole seats and non-negative prices. Keep payments, accounts, stored bookings, and customer details out of this exercise. The goal is an understandable calculator you can check in a few minutes.

   Illustrated exampleTurn the brief into one clear rule

   SEATS10whole number

   PRICECAD $20.00up to 2 decimals

   ×

   TOTALCAD $200.00one clear result

   ↳ Keep this screen to the calculation; leave payments and bookings out.

2. 2

   Step 2: Open Build Mode and describe the app

   Open grok.com or the Grok app and choose Build from the mode switcher. Paste the prompt below. Build Mode writes code and shows a working preview inside the conversation.

   If Build is missing, check that you are signed into the account with access and confirm availability before continuing. A normal chat response containing code is not the preview this walkthrough expects.

3. 3

   Step 3: Test the normal calculation

   In the preview, enter 10 seats and a price of 20. The total should be 200 in your chosen currency. Then change only the seat count to 5; the total should become 100.

   Click into each field and edit the values yourself. Check that the displayed total follows your inputs rather than remaining fixed at the example number. Ask Grok to explain the calculation in one sentence so you can compare it with the brief.

   Illustrated exampleCheck that changing an input changes the result

   0110 seats×CAD $20=CAD $200.00✓

   025 seats×CAD $20=CAD $100.00✓

   Change one input at a time · leave price at $20

4. 4

   Step 4: Try the inputs people get wrong

   Enter zero seats, clear a field, and try a negative number. Zero should give a zero total; an empty field should have a clear state; negative inputs should not produce a valid booking total.

   If something fails, describe the exact input and result: “With minus 2 seats at 20, it shows minus 40. Reject negative seat counts and explain the problem beside the field.” Ask for that one fix and rerun both the failing input and the original 10-by-20 example.

   Illustrated exampleGive each unusual input a sensible state

   Valid zero

   0 seats × $20$0.00 total

   Empty field

   price = blankAsk for a price; no total

   Negative seats

   −2 seats × $20Reject; show a field error

   Fractional seats

   1.5 seatsReject; seats are whole

5. 5

   Step 5: Check the screen on a phone

   Open the conversation and preview in the Grok mobile app if you have it. Check whether both input labels, the full total, and any error message fit on the screen.

   Ask for a specific adjustment if needed: “At this screen width, the currency label covers the total. Place the label above it and keep both visible.” After a layout change, repeat the calculation checks so a visual improvement does not hide a broken interaction.

6. 6

   Step 6: Decide whether to share it

   Keep using the preview until the checks pass. Build Mode supports publishing to a grok.me link. Publishing makes a version available to other people, so first remove any private details or accidental claims.

   If you choose to publish, use Build Mode’s publishing flow and open the resulting link in a separate browser session. Run the 10-by-20 and zero-seat checks again there. Send the link to someone only after the published page behaves as expected.

   To use the calculator in your website journey, link to the checked public version from the relevant event or service page and explain what its total includes. Test the link on a phone and provide a clear route back to your own enquiry or booking page. Do not assume embedding is supported, or that this calculator reserves seats, collects details, or takes payment; those require separate, tested systems.

Build a one-screen event-seat calculator.

Audience: [who will use it]
Currency label: [currency]
Inputs: whole number of seats, and non-negative price per seat with up to two decimal places.
Output: seats multiplied by price, formatted to two decimal places.

Start with 10 seats and a price of 20, so the total is 200. Zero seats is valid and totals zero. Reject negative numbers and fractional seat counts. Explain empty or invalid inputs beside the relevant field instead of showing a misleading total.

Make labels and error messages easy to read on a phone. Keep this as a preview for review. When it is ready, tell me how to test it with the examples above.