Build Your First Mobile App

You open Runable. You describe the app you want. The agent builds it, and within seconds you scan a QR code and the app is running on your phone. This page walks you from sign-in to a working app you can hand to a friend.

How a first build flows

Step by step

Open runable.com, sign in, and click the Mobile App artifact shortcut under the input bar. This configures the agent with the right tools, project template, and clarifying questions before you type a single character.

Skipping the artifact shortcut works too. Type Build me an iOS and Android app for... and the agent will detect mobile intent. Picking the shortcut is just faster and removes one clarifying question.

Write a detailed prompt

A good first prompt is specific about screens, brand, hex colors, and the parts that feel native. Compare:

Vague
Specific (use this)

Build me a habit tracker app.

The agent will ask: how many habits, daily or weekly, what color, which platforms, push reminders, accounts or local-only, free or paid. Five back-and-forth rounds before it even starts.

Build a habit tracker called Cairn for iOS and Android.

Three tabs: Today, History, Settings.

Today: a vertical list of today's habits. Each row has the habit name, a streak counter, and a large circular check button. Tapping the check gives a medium haptic and animates the streak counter up by 1. Pull down to refresh.

History: a 12-week heatmap of completion for the selected habit (GitHub-style), with a habit picker chip row at the top. Tap a square to see the date in a small popover.

Settings: profile (email, avatar, sign out), a switch for a daily reminder push with a time picker (defaults to 8pm), a switch for haptics, and a paid plan section with a paywall ($2.99/mo or $19.99/yr through the App Store and Play Store).

Sign-in: email magic link.

Design: warm cream (#FFF8F0) background, charcoal (#1F1F1F) text, terracotta (#C56C45) accent, DM Sans font.

The agent has enough context to start without asking anything, or with one or two confirmation questions at most.

Answer clarifying questions

For a first-time mobile chat, the agent typically asks:

Platforms: iOS, Android, or both?
Sign-in: yes, and which methods?
Payments: yes, and subscriptions or one-time?
Push notifications: yes or no?

Answer once. The agent bakes the answers into the project setup and build configuration.

Scan the QR code

Within a minute, a QR code appears in the side panel. On iOS open the camera app and point it at the code; on Android open the Expo Go app and use its built-in scanner. The bundle downloads and the app boots on your phone in 510 seconds.

If your app uses device features that go beyond what Expo Go bundles by default (custom notification channels, certain biometric flows, App Tracking Transparency, Live Activities), the agent generates a one-time custom preview build. You install it via TestFlight or a Play internal-sharing link once; every future chat reuses it.

Watch the app come alive

Hot reload is on. As the agent writes screens, navigation, and styles, your phone updates within a second or two. You can interact with the app while the build is still in progress the agent skips the screens you are currently on, then folds in the changes the next time you navigate.Every tool call streams to the chat: file writes, edits, dependency installs, checks. The same change that lands on the phone is the same change you see in the chat history.

Refine in chat

Keep talking. Common first-pass edits:

Make the check button 80px circular with a coral fill (#E07A5F) instead of an outline.

Move the Settings tab to a cog icon in the top right of the Today screen instead of a tab.

Add a streak freeze: if the user misses a day, the streak does not reset for the first miss in any 7-day window. Show a small snowflake badge next to the streak when a freeze was used.

The agent edits the project in place. Roll back to any earlier version with one click, or branch the chat to try a different direction without losing your current work.

Save preferences to memory

Before you build a second app, tell the agent your defaults once:

Remember this for all future mobile builds: my brand is Cairn. Colors are cream #FFF8F0, charcoal #1F1F1F, terracotta #C56C45. Font DM Sans. Always include haptic feedback on meaningful interactions. iOS and Android, never one or the other. Sign-in via email magic link. Payments through the App Store and Play Store.

Every future mobile chat starts with those defaults loaded. No repeating yourself.

Example first prompts

Reading log
Group expenses
Daily affirmations
Field reports

Build a reading log app called Margin for iOS and Android. Tabs: Library, Reading Now, Stats. Library is a grid of book covers in 2 columns; tap a cover to open a detail sheet with title, author, status (To Read / Reading / Finished), 5-star rating, and notes. Reading Now is a feed of in-progress books with a pages-read input and a small line chart of pages per day for the last 14 days. Stats shows books finished this year, total pages, average rating, and a streak of reading days. Add books by scanning the ISBN barcode with the camera. Book covers cached for instant scrolling. Local-only storage no accounts, no backend. Cream (#F5F1EA) background, dark green (#2D4A2B) text, gold (#C9A24A) accent. Serif headlines.

Common edits on the first day

Ask	What changes
`Move the tab bar from bottom to top`	Tabs slide up to a top row, iOS-style
`Use a sheet instead of a full screen for the form`	The form opens as a swipe-down sheet from the bottom
`Make the list snappier`	Scrolling stutters disappear, even on long lists
`Add haptics on every meaningful action`	Subtle taptic feedback on confirms, errors, and selection changes
`Support iPad and tablets`	Sidebar on tablet, tab bar on phone, breakpoint-aware spacing
`Switch to dark mode`	New color palette plus automatic light/dark following the system
`Add pull-to-refresh`	Pull down on any list and it refetches the data
`Make the app icon and splash screen`	The agent generates an icon set and a splash screen from your brand

When something does not work

The QR code does not scan or the app does not open

Make sure your phone and laptop are on the same Wi-Fi network. If you are on a corporate network with client isolation, switch to a phone hotspot. If that still fails, ask the agent to switch to tunnel mode it routes the preview through the cloud and works across any network (slightly slower to load).

Hot reload stops working

Shake your phone to open the dev menu and tap Reload. If you have just added a device feature like push notifications or biometrics, you may need a fresh custom preview build ask the agent to rebuild it.

The preview is slower than I expected

The preview runs through a development host, which is slower than a real production build. To see the real performance, ask the agent to run a preview build (510 minutes). The resulting app is signed and runs at native speed.

A change does not show up on my phone

Try a reload from the dev menu. If it still does not show, the agent may be mid-way through writing a related change watch the chat for the file diff to finish, then reload. If the change involves a new device feature, a custom preview build may be required.

What you cannot do on your first build

Submit to the App Store without an Apple Developer account. Preview is free; submission requires a $99/year membership.
Test real in-app purchases in the Expo Go preview. Real purchase testing requires a signed preview build on TestFlight or Play internal testing. In the Expo Go preview, the paywall UI is shown but no money moves.
Run two mobile chats at the same time on the same phone. Only one preview can be loaded at a time. Switch between them by reloading.

Next steps

Deploy to App Store & Play Store

Set up store credentials, run a production build, and ship.

Push Notifications

Permission prompts, deep links, local schedules, Live Activities.

Payments & Subscriptions

Paywalls, free trials, restore purchases.

Over-the-air Updates

Ship JS-only fixes without a store review.

Documentation Index

​How a first build flows

​Step by step

​Example first prompts

​Common edits on the first day

​When something does not work

​What you cannot do on your first build

​Next steps

Deploy to App Store & Play Store

Push Notifications

Payments & Subscriptions

Over-the-air Updates

How a first build flows

Step by step

Example first prompts

Common edits on the first day

When something does not work

What you cannot do on your first build

Next steps