Build a mobile app with AI
Build a cross-platform iOS and Android app with React and Capacitor. A Claude coding agent writes the app while you preview it in the browser.
A Capacitor + React starter that detects which platform it's running on. You build the app's web layer in CloudCode with a live preview, then ship it to iOS and Android with Capacitor.
Use cases
What you can build
- Cross-platform MVPs for iOS and Android
- Companion apps for an existing web product
- Internal mobile tools
- Turning a React web app into an installable app
What's included
In the starter
- capacitor.config.ts with appId, appName, and webDir set to dist
- src/App.tsx that reads Capacitor.getPlatform() and displays it
- package.json with @capacitor/core, @capacitor/cli, React 18, and Vite
- A cap:sync script that builds and runs npx cap sync
Files
- capacitor.config.ts
- src/App.tsx
- package.json
Prompt ideas
Things to ask the AI agent
“Add a bottom tab bar with Home, Search, and Profile screens.”
“Style the app for safe areas on notched phones.”
“Add Supabase auth and a profile screen.”
“Show a different layout when running on the web vs iOS or Android.”
How it works
From template to deployed app
- 1Sign up or sign in to CloudCode.
- 2Click New Project, give it a name, and choose "Capacitor + React" under Mobile (Capacitor).
- 3Open the preview — dependencies are read from package.json and fetched automatically.
- 4Describe what you want in the agent chat. The agent edits the files and the live preview updates.
- 5Deploy to Vercel from the Deploy panel when it's ready, or push the code to your GitHub repo.
FAQ
Questions about this template
How do I get a native iOS or Android build?
The starter includes a capacitor.config.ts and the Capacitor packages in package.json. You build and preview the web layer in CloudCode, then push to GitHub and run the standard Capacitor commands (build, npx cap sync, then open in Xcode or Android Studio) on a machine with the native toolchains installed.
Can I preview the mobile app in CloudCode?
Yes. The web layer runs in the live preview, and the mobile viewport shows it at phone size.
Is the template free to use?
Yes. Templates are available to every CloudCode account, and new accounts get free credits on signup with no card required.
Build a mobile app with AI today
Free credits on signup. No card required.