DEV Community

Aaron K Saunders
Aaron K Saunders

Posted on

I Asked an AI to Build a Mobile App. It Chose Ionic Capacitor and Surprised Me

#ai #javascript #react #capacitor

I've been hearing a lot about AI's potential to build software, so I decided to run an experiment. I gave Loveable, an AI app builder, a detailed prompt to create a to-do app. I expected it to generate a standard React web app, and maybe suggest React Native for mobile.

I was not expecting it to choose Ionic Capacitor.

As the generation process unfolded, I saw the logs reference Capacitor and was genuinely surprised. It was an interesting, opinionated choice by the AI. This is the story of what happened next—the impressive AI debugging, the manual "last mile" to get it on a device, and what this surprising choice tells us about the future of AI in development.

Phase 1: The Initial Prompt and Impressive Scaffolding

I started with a clear set of requirements: a to-do app with role-based access (admin vs. user), image uploads, and comments, all powered by a Supabase backend.

In just a few minutes, Loveable built a complete React application. It didn't just create the UI; it configured the entire Supabase project:

  • Database tables for todos, comments, and profiles.
  • Row-Level Security (RLS) policies to keep user data separate.
  • Storage buckets for the image uploads.

The result was a fully functional web application, built faster than I could have done it myself.

Where the AI Became a True Co-Pilot: Conversational Debugging

The first version wasn't perfect. It had bugs, just like any real-world project. But instead of cracking open VS Code, I just kept talking to the AI.

  • Problem 1: Broken Images. My prompt: "The images are uploaded but are not rendered in the application." The AI correctly identified that the Supabase storage bucket was private and needed signed URLs. It then generated the necessary logic and updated the frontend to fix it.
  • Problem 2: The Admin View Crashed. My prompt: "When logged in as a super admin, I should see all users' to-dos, but the page crashes." The AI diagnosed the issue, added the correct RLS policies for the admin role, and patched the data-fetching code.

This iterative, conversational style of debugging felt like the future.

The Surprise Twist: The AI's Job Was Done, But Mine Wasn't

Loveable's choice of Capacitor was clever—it allows a single web codebase to run natively on iOS and Android. But it also meant the AI's automated work had reached its limit. It could generate the web code, but it couldn't perform the native builds or deployment for me.

The README file simply said, "Follow the Capacitor setup instructions." The "magic" had ended, and it was time for me to step in as a developer.

My Manual "Last Mile" with Capacitor

As someone who's used Capacitor before, I knew the drill. But I was curious to see if the AI-generated code was truly ready for the transition. Here's what that process looked like:

  1. Sync to GitHub: I pushed the entire codebase to a new repository.
  2. Clone Locally: I brought the project onto my local machine and ran npm install.
  3. Add Native Platforms: I ran npx cap add ios and npx cap add android.
  4. Build & Sync: I created a production build (npm run build) and synced the web assets into the native projects with npx cap sync.
  5. Run on Device: Finally, I used npx cap run ios to open Xcode and launch the app on a simulator.

Once it was running, I hit the classic mobile UI problems: content was hiding under the iOS notch and status bar. Once again, I turned to the AI with a prompt: "We need to account for the safe area and status bar in the mobile view." It successfully installed the Capacitor status bar plugin and added the necessary viewport meta tags. Problem solved.

Final Thoughts: An Accelerator, Not an Automator

Loveable's decision to use Capacitor was an unexpected and insightful one. It shows that these AI tools are being trained on modern, efficient web development practices.

The experience proved that AI is an incredible accelerator. It handled the boilerplate, the backend setup, and even complex debugging, saving hours of work. But it's not an automator. The final, crucial steps of mobile deployment still require a developer's knowledge.

The AI can build the car, but you still need to know how to drive it off the lot.

For the full, unfiltered journey—from the first prompt to the final app running on both iOS and Android—check out the video linked at the top of this article.

Tags
#ai #javascript #react #ionic #capacitor #mobile #webdev #supabase

Top comments (0)