Building Mobile Apps with AI Agents

Overview

This cookbook covers building cross-platform mobile apps (iOS + Android) using AI coding agents. Whether you're a developer or a non-technical founder, AI agents dramatically compress the time from idea to App Store. Target audience: Developers and founders who want to ship apps faster Expected outcome: A working mobile app from idea to App Store

---

What You'll Need

Tool	Cost	Purpose
Claude Code CLI	$0.01–0.08/token	AI coding agent in terminal
Cursor	$20/mo	AI-powered IDE
Expo	Free	React Native framework
Supabase	Free tier	Backend + database
EAS (Expo Application Services)	Free tier	Build + submit to stores
Prerequisites: Basic JavaScript/TypeScript knowledge; a Mac for iOS builds
Time commitment: 1–3 weeks for MVP

---

The Core Workflow: Idea → PRD → Build

Step 1: Brainstorm with AI Use ChatGPT or Claude to generate app ideas and refine them. Ask it to poke holes in your concept, identify competitors, and sharpen your unique value proposition. Step 2: Write a PRD Feed your idea into a structured PRD generator prompt. A good PRD includes:

• Framework choice (React Native/Expo vs Flutter)
• Design system (colors, fonts, component style)
• Target audience and core use cases
• Feature list (MVP vs v2)
• Tech stack (frontend + backend + auth) Step 3: Set Up Your AI Coding Environment Configure Cursor or Claude Code with rules generated from your PRD. Connect MCP servers for your backend services. This one-time setup pays dividends across the entire build.

---

Step-by-Step: Claude Code + Expo + Supabase (Most Popular Stack)

1. Install Claude Code CLI

npm install -g @anthropic-ai/claude-code

2. Create Your Expo Project

npx create-expo-app@latest my-app
cd my-app

3. Connect MCP Servers

Create .mcp.json in your project root:

{
  "mcpServers": {
    "supabase": {
      "command": "npx",
      "args": ["-y", "@supabase/mcp-server-supabase@latest",
               "--access-token", "YOUR_SUPABASE_PAT"]
    },
    "github": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-github"],
      "env": {"GITHUB_PERSONAL_ACCESS_TOKEN": "YOUR_TOKEN"}
    }
  }
}

4. Enter Plan Mode

Press Shift+Tab twice to activate Plan Mode. Paste your full PRD and ask Claude to:

• Create CLAUDE.md with project architecture
• Propose a file/folder structure
• List the implementation steps in order

5. Review and Approve Architecture

Read Claude's plan carefully before executing. This is your chance to course-correct before any code is written.

6. Switch to Auto Accept Mode

Press Shift+Tab once to activate Auto Accept. Claude will now write files without asking for confirmation on each step.

7. Build Feature by Feature

Prompt one feature at a time — one screen, one component per prompt. Example:

Build the WorkoutLogScreen component. It should display a FlatList of exercise entries, each showing exercise name, sets, reps, and weight. Use the design tokens in CLAUDE.md. No backend wiring yet — use the hardcoded data in src/data/mockWorkouts.ts.

8. Test on Device with Expo Go

npx expo start

Scan the QR code with Expo Go on your phone. Hot reload is instant.

9. Deploy with EAS

npm install -g eas-cli
eas login
eas build --platform ios
eas submit --platform ios

---

Step-by-Step: Cursor + Flutter (Alternative)

1. Clone the evanca/flutter-ai-rules repo and copy .cursorrules into your Flutter project
2. Open Cursor Agent mode and share your design mockup as a screenshot
3. Build in strict layers — never skip ahead:
   • UI only (hardcoded data, no logic)
   • Domain models (data classes and business logic)
   • Infrastructure (API clients, local storage)
   • Application (state management, use cases)
   • Wire up (connect layers)
   • Real data (swap mocks for live API)
4. After model changes, always run: flutter pub run build_runner build --delete-conflicting-outputs

---

Multi-Agent Patterns

Claude Code Subagents

Create specialized agents in .claude/agents/:

Agent	Responsibility
code-reviewer	Enforce code style and catch bugs
code-simplifier	Reduce complexity and remove dead code
verify-app	Run tests and check for regressions
researcher	Look up docs and best practices
security-auditor	Check for vulnerabilities

Parallel Execution

Run multiple Claude Code instances simultaneously:

• backend-agent — API endpoints + database schema
• frontend-agent — UI screens + navigation
• test-agent — Unit and integration tests
• docs-agent — README and API docs

Multi-Model Routing

• Claude → code generation and architecture decisions
• Gemini → document analysis and large context tasks
• DeepSeek → complex logic validation

---

MCP Servers for Mobile Dev

MCP Server	What It Does
Supabase MCP	Create tables, manage auth, query data
Expo MCP	Install packages, trigger EAS builds
GitHub MCP	Create PRs, manage branches
Firebase MCP	Query Firestore, manage FCM tokens
Example config:

{
  "mcpServers": {
    "supabase": {
      "command": "npx",
      "args": ["-y", "@supabase/mcp-server-supabase@latest",
               "--access-token", "sbp_YOURTOKEN"]
    }
  }
}

---

Prompt Engineering Tips

PRD-First Approach

Paste this prompt into Claude or ChatGPT before writing a single line of code:

I want to build a mobile app. Here's the concept: [YOUR IDEA]

Generate a complete PRD that includes:
1. App name and tagline
2. Target audience and core problem
3. MVP feature list (max 5 features)
4. Recommended tech stack (React Native/Expo + Supabase OR Flutter)
5. Screen-by-screen breakdown
6. Data models
7. Authentication flow
8. Monetization strategy

Task Decomposition

❌ BAD	✅ GOOD
Build me the full app	Create the WorkoutLogScreen with a FlatList of exercises
Add authentication	Implement email/password sign-in with Supabase Auth
Make it look good	Apply the color tokens from CLAUDE.md to the HomeScreen header

UI-First Pattern

Always build UI with hardcoded mock data first. Wire in the real backend only after the UI is pixel-perfect. This prevents backend errors from blocking UI progress.

Plan Mode First

Never start coding without a plan. Shift+Tab twice in Claude Code, or ask Cursor: "Before writing any code, describe exactly what you're going to build and how."

---

CLAUDE.md Template

# Project: [APP NAME]

## Tech Stack
- Frontend: React Native + Expo SDK 52
- Backend: Supabase (PostgreSQL + Auth + Storage)
- State: Zustand
- Navigation: Expo Router
- Styling: StyleSheet + design tokens

## Architecture
src/
  app/          # Expo Router screens
  components/   # Reusable UI components
  hooks/        # Custom React hooks
  services/     # Supabase queries
  stores/       # Zustand stores
  types/        # TypeScript interfaces

## Code Style
- TypeScript strict mode
- Functional components only
- Named exports for components
- No any types

## Bash Commands
- Start dev: npx expo start
- Run tests: npx jest
- Build iOS: eas build --platform ios
- Build Android: eas build --platform android

## iOS-Specific Rules
- NEVER modify .pbxproj files directly
- Use expo-modules-core for native modules
- Always test on a real device, not just simulator

## Anti-Patterns to Avoid
- No inline styles (use StyleSheet.create)
- No API calls in components (use services/)
- No useEffect for data fetching (use SWR or React Query)
- No hardcoded strings (use i18n keys)

---

Real Case Studies

RITESWIPE

16-year engineering veteran, zero SwiftUI experience. Took the concept to App Store in 3 weeks using Claude Code. Shipped with 54 users and a 5.0 App Store rating.

Luna Budgeting App

Built with Cursor + Claude. The AI chat feature — one of the app's core differentiators — was built in 4 prompts. (Source)

Expenses Tracker

Built in one session using Cursor + Supabase + Expo. The developer used the UI-first pattern: hardcoded data first, then wired Supabase in a second pass.

---

Common Pitfalls

1. Starting without a PRD — You'll drift and rebuild the same screens multiple times
2. Tasks too large — One feature per prompt; never ask for the whole app at once
3. Skipping Plan Mode — Always plan before executing
4. Neglecting version control — Commit after every working feature: git add . && git commit -m "feat: add workout log screen"
5. Context window degradation — After ~30 minutes of work, run /clear in Claude Code to reset context
6. Letting AI modify .pbxproj files — This breaks iOS builds; add to your anti-patterns list
7. Skipping testing — Ask Claude to generate Detox E2E tests after every screen

---

Quick Reference

Optimal Stack: Claude Code CLI + Expo + Supabase + EAS Workflow Order:

1. Brainstorm idea with AI
2. Generate PRD
3. Create CLAUDE.md from PRD
4. Connect MCP servers
5. Plan Mode → architecture
6. Build screen by screen (UI first)
7. Wire backend
8. Test on device
9. EAS build + submit Key Resources:

• Claude Code Docs
• Expo Documentation
• Supabase Docs
• EAS Build
• Flutter AI Rules