Unlocking Full AI-Powered App Development: A Complete Setup
Nowadays, you can build apps without knowing how to code even not writing single line of code with AI tools. A lot of people with no coding/programming background already shipped their apps (SaaS) with help of AI tools without writing a single line of code.
“But, there would be a lot of errors and bugs, and the app would’nt work anyway especially on production.”
Well you can just debug and fix the errors, ask LLM to fix the code, improve the code, explain the code, and repeat the process until it’s done.
Current AI tools I use for prototyping and production-grade level app development (yep, full brainrot setup):
- Cursor as the default IDE for AI-pair programming
- v0 to generate/modify UI components, pretty UI prototyping
- Bolt as a fullstack app prototyping tool, might be used for production-grade level apps
- Claude for coding assistance in general (still the best LLM for coding/app development for me) and its API key
- Aider, AI pair programming in terminal (rarely use it)
- OpenHands, software development agent, open source version of Devin (rarely use it, a bit buggy)
- Replit (optional, Bolt replacement)
This fullstack app development approach, with almost 80-99% AI-generated code, works really well for web development, specifically on the front-end side (no-brainer, as frontend can be fully generated by LLMs). The downside of this setup is inconsistent coding style and messy code that needs to be cleaned and reorganized to be maintainable & readable.
For example, AI-generated code might be written entirely in a single file when it would be better modularized (by sub-problem, feature, etc.) for easier maintainability. AI-generated code also often includes unnecessary code that doesn’t need to be there and frequently contains mistakes. As a result, to make our code production-ready, we often have to do extensive debugging at the end.
Another downside is the cost of using LLM APIs and tool subscriptions (Cursor, Claude, Replit, v0 monthly subscriptions total around $20/month), even though you can work within the free usage limits.
In the end, AI-generated code works great as boilerplate for app development or MVPrather than end-to-end fullstack development. It significantly reduces development time - apps that would typically take 2 weeks to develop can be completed within 20 minutes - 2 hour.
Playbook
A. Prototyping First
- Make a prototype directly on bolt.new (the website version)
- Revise and improve it until reaching the limit or achieving a satisfactory look (based on the overall vibe)
- From the Bolt web interface, export the repo to GitHub, clone the repo, debug and make further improvements > evaluate and repeat on Cursor until reaching production-grade level. You can deploy directly from the Bolt web interface using Netlify.
B. Cursor Composer Setup
- Create a comprehensive, well-written
novelprompt as text or markdown and save it as .cursorrules in a new repo. Here is a list of cursorrules. - Instruct to develop the app through Cursor Composer
- Loop through the generate > try > debug > evaluate > improvement cycle
C. UI Improvement with v0
UI improvement can be achieved using v0 for UI/UX and component prototyping. It can also be used for creating and styling components. This works particularly well for frontend development, especially with a React + NextJS + Tailwind CSS setup.
D. Straight to Production
You can directly develop a production-grade level app that works in less than an hour, especially if your app is relatively simple. By simple, I mean apps such as a snake game, coin flip (heads/tails), word counting app, color palette generator, etc. Provide detailed and structured prompts to Bolt or Replit (I would recommend Replit for this) and deploy the app immediately if it works fine.
Well that’s it, I might add more to this list and update it as I discover new tools or more efficient ways to do it.