--- title: "Build a Mobile App with Autohand" source: https://docs.autohand.ai/tutorials/build-mobile-app --- # Build a Mobile App with Autohand Create a cross-platform mobile app for iOS and Android from a plain English description. Use Autohand in interactive mode to build screen by screen, or non-interactive mode to generate the entire app at once. Beginner 20 min echo "Create a habit tracker mobile app using Expo and React Native. Include a home screen with today's habits, an add habit form, streak tracking, and push notification reminders. Use AsyncStorage for local data." | autohand --auto-mode -p ## What you'll learn - How to describe a mobile app and have Autohand build it - The difference between interactive and non-interactive mode for app building - How to test your app on a real phone with Expo Go - How to use design mockups as input for app generation ## Step 1: Understand the command The prompt block above uses non-interactive mode to build a complete mobile app. Here is what each part means. - `echo "..."` pipes your instructions to Autohand instead of typing them in a live session. This is [pipe mode](/docs/working-with-autohand-code/pipe-mode.html), and it lets you script app generation or run it from a Makefile. - `--auto-mode` tells the agent to work autonomously: scaffold the project, install packages, write all screens and components, and iterate until the task is finished. You can cap the effort with `--max-iterations 30` or `--max-cost 5`. See the [auto mode guide](/docs/guides/auto-mode.html) for every option. - `-p` (short for `--prompt`) reads the piped text as the prompt and prints progress to your terminal. Without it, Autohand tries to start an interactive session. All flags are listed in the [CLI reference](/docs/working-with-autohand-code/cli-reference.html). ## Before you start Make sure you have the following ready, then create a folder for your app. ### Requirements - **Node.js 18 or newer.** Run `node --version` to check. - **Autohand Code installed.** See [Your First Autohand Session](/docs/tutorials/your-first-session.html) if you need to set up. - **For iOS testing:** A Mac with Xcode installed, or [Expo Go for iOS](https://apps.apple.com/app/expo-go/id982107779) on your phone. - **For Android testing:** Android Studio with an emulator, or [Expo Go for Android](https://play.google.com/store/apps/details?id=host.exp.exponent) on your phone. ### Project setup Create a new empty folder for your mobile app. **Tip:** [Expo Go](https://expo.dev/go) on your phone is the fastest way to test. No emulator setup needed. Autohand generates Expo projects by default because of this. ## Step 2: Build with interactive mode Interactive mode lets you build the app screen by screen. You control the pace and review each piece before moving on. ### Create the project You are now in an interactive session. Start with the project setup. The agent scaffolds the full project, installs dependencies, and creates the initial screen files. ### Build the home screen ### Build the add habit form ### Add the stats screen ### Test on your phone Scan the QR code with [Expo Go](https://expo.dev/go) on your phone. The app loads over the network and hot-reloads when files change. **Tip:** Keep the Autohand session open while testing. When you find something you want to change, describe it in the session. The agent sees all your project files and makes targeted edits without breaking what already works. ## Step 3: Build with non-interactive mode If you want the entire app generated in one shot, use non-interactive mode with a detailed description. ### The one-liner ### Useful flag combinations Every flag is documented in the [CLI reference](/docs/working-with-autohand-code/cli-reference.html). ## Step 4: Refine the app Whether you used interactive or non-interactive mode, you can always open a new session to make changes. Or refine with a quick non-interactive command. Note the difference: `autohand -p` without `--auto-mode` runs a single pass. It makes the change and stops. Use it for quick edits. Use `--auto-mode` when the change needs multiple steps like installing packages, creating files, and running tests. ## Step 5: Start from a design If you have a design mockup, wireframe, or screenshot of an app you want to build, include it as context. ### Interactive mode ### Non-interactive mode Autohand reads the image and extracts the screen structure, navigation flow, colors, and component layout. Works with photos of whiteboard sketches, Figma exports, or screenshots of other apps you want to use as inspiration. ## Step 6: Try other frameworks This tutorial uses Expo because it has the simplest setup, but Autohand works with any mobile framework. Mention the framework in your prompt. The prompts and flags work the same way regardless of framework. Autohand adapts its output to the tools you ask for. ## What you learned - Built a cross-platform mobile app from a plain English description - Used interactive mode to build screen by screen - Used non-interactive mode for one-shot generation - Tested the app on a real device with Expo Go ### Try next autohand "Add push notifications to my habit tracker that remind me at the time I set for each habit" ### Related tutorials [ #### Build a Personal Website from Scratch Go from an empty folder to a deployed personal website using interactive or non-interactive mode. ](/docs/tutorials/build-personal-website.html)[ #### Create a Vue Component from a Design Brief Turn a written design brief into a working Vue 3 component with props, events, and styling. ](/docs/tutorials/create-vue-component.html)