Skip to main content

Development Overview

Describe an app. Hold the real thing in seconds. AppX turns a plain‑English description into a real React Native (Expo) app, shows it on your phone via an Expo Go QR code, and lets you refine it by chat — all from a single workspace.

This page is the map. The rest of this section goes deep on each piece.

The Workspace​

When you open a project, the workspace gives you three things side by side:

┌─────────────────┬──────────────────────┬──────────────────┐
│   Chat          │   Live Preview       │   Code           │
│                 │                      │                  │
│  - Message box  │   [Phone frame]      │  - File tree     │
│  - Screen       │   [Web preview]      │  - Editor        │
│    selector     │   [Expo Go QR]       │  - File actions  │
│  - History      │                      │                  │
└─────────────────┴──────────────────────┴──────────────────┘

Chat (left)​

This is where you build. You describe what you want, pick which screen to change, and AppX writes the code. The chat shows the AI's plan, a short summary of every change it makes, and live progress while it works.

  • Screen selector — target a specific screen, or stay in General mode for new screens and app‑wide changes.
  • Plan / Direct mode — let the AI plan first, or jump straight to the edit.
  • History — the full conversation, including the plain‑English summary of each edit.

Live Preview (center)​

Your app inside a phone frame. The center panel shows a fast web preview, and a QR code you scan with Expo Go to run the real thing on your actual phone. Apply an edit and your phone updates in seconds — no rebuild, no waiting.

Code (right)​

Full, inspectable Expo + React Native code — not a visual‑builder export. Browse the file tree, open any file in the built‑in editor, and tweak by hand when you want to. The AI always reads your latest code, so hand edits and chat edits stay in sync.

The Build Loop​

The rhythm of building with AppX:

  1. Generate an app (or a new screen) from a clear description.
  2. Preview it on your phone via the Expo Go QR.
  3. Chat to refine — add features, fix layout, change copy.
  4. Inspect the code whenever you want to understand or hand‑tune something.
  5. Publish to the App Store / Google Play, or share a link.

Most of your time lives in steps 2–4: describe, see it on your phone, adjust, repeat.

Thinking in Screens​

AppX organizes your app by screens — each screen is a real file in your project. Targeting the right screen makes edits faster and more accurate, because the AI focuses on just that screen's code.

  • General mode — generate new screens, ask questions about the whole app, or make app‑wide changes (theme, navigation, global styles).
  • Screen mode — pick a screen to make a focused edit without touching anything else.

What Things Cost​

You only pay credits when the AI changes code:

  • Generating an app or a new screen — 1 credit per screen. Screens that fail are auto‑refunded, so you only pay for screens that land.
  • Chat edits — metered by how much work the edit takes (a small change is usually a credit or two). Retries within a single edit turn are free.
  • Reading code, previewing, and asking questions — free.

You learn the feel of cost by watching the credit meter as you work. Full rules: Credits.

Next Steps​

Live Preview

Expo Go QR, web preview, and how updates reach your phone in seconds.

Chat‑Driven Editing

Pick a screen, describe the change, preview it, keep or reject.

Code Editor

Browse and hand‑edit the real Expo + React Native code.

Device Testing

Run on a real phone via Expo Go, and debug iOS vs Android.