This article breaks down the exact process I’ve used to leverage generative AI in building MVPs. It’s allowed me to accelerate development, iterate faster, and create more targeted solutions that truly address user needs.
Feel free to follow my process and adapt it to your own projects. The steps are straightforward, but if you find yourself needing clarification, don’t hesitate to reach out.
👋 Hi, I’m Jerrik Arango, Principal Software Engineer here at HatchWorks.
Much of my time is spent discovering how to harness the power of AI to enhance client projects, improve our internal processes at HatchWorks, and push the boundaries of what’s possible in software engineering.
Short on time? Get the highlights with these four key takeaways:
- Make sure every MVP starts with solving a real problem, not an imagined one
- To go fast, start slow by breaking your MVP solution into pieces that need to be developed
- Select Gen AI tools that augment your skillset and free you up to move faster
- Learn how to mitigate the common risks of using Gen AI for MVPs (like getting outdated code)
Watch the full webinar:
This article is based on my 1-hour long webinar where I demonstrate step-by-step how I built a local event finder MVP in under 5 minutes using Gen AI.
The webinar offers a more in-depth look at each step and includes live coding demonstrations.
📽️ Watch it here.
Leveraging AI for Faster MVP Iterations: 4 Must-follow Tips
Before I walk you through my process for accelerating development, I want to set you up for success.
And that starts with these four tips.
Tip 1: Be Strategic; Start with a Problem, Not a Solution
If you’ve seen the movie, My Big Fat Greek Wedding, then you’re familiar with the father in the film who believes Windex is a solution to every problem.
Got a cut? Spray some Windex on it. Poison Ivy? Windex will sort you out. A dent in the car? Might as well spray some just in case it works.
I think we might be.
To make sure we’re not wasting time and resources using Gen AI to build solutions that don’t provide real value, we need to:
- Speak to customers
- Gather feedback
- Identify core challenges they face
If you do, the solutions you build with generative AI will be targeted and effective, ultimately leading to a more successful MVP and a better product.
And really, that’s good practice for everything we develop, with or without Gen AI.
Tip 2: Think Small, Not Big
Believe it or not, you don’t need Gen AI across your entire process to go from idea to MVP faster. It’s actually better if you carefully pick out the steps of your process it’s best equipped to assist with.
Incremental gains can add up over time.
Here’s how to approach it:
- Break down your problem into actionable steps.
- Identify specific areas where Gen AI could provide the most value.
- Start with small, manageable tasks rather than expecting AI to handle everything.
By thinking small, you avoid the pitfall of becoming too passive in the development process. You definitely don’t want to spend all the time you intended to save on endlessly tweaking prompts or fixing broken results from an AI trying to do too much at once.
📚 You may like: Large Language Models: Capabilities, Advancements, and Limitations [2024]
Tip 3: See Gen AI as a Sidekick, Not Your Hero
It’s tempting to treat Gen AI like some sort of coding superhero. “Hey AI, I’ve got this brilliant idea—build me a POC, will you?”
But Gen AI isn’t the superhero, you are. It’s more like the sidekick who makes you more effective.
By seeing Gen AI as a sidekick rather than the hero, you maintain control over the development process. You’re leveraging its strengths while avoiding its limitations.
And most importantly, you’re ensuring that the final product aligns with your vision and meets your users’ needs.
So dissect your idea for your MVP and think about the different steps and pieces where Gen AI plugs a gap or makes you faster. The next step will help you here too.
Tip 4: Use Your Team’s Knowledge to Find Where AI Best Augments the Process
Where possible, you want a team to support the application of Gen AI into your MVP processes. And even better if it’s a cross-functional team with the likes of a product manager, designer, and developer.
This combination of minds and skills ensures technical feasibility, user experience, and business viability are considered simultaneously. And it speeds up the development of your MVP.
This type of team will know exactly where Gen AI can augment and accelerate how they work.
The product manager might suggest using AI for market research, the designer for rapid prototyping, and the engineer for code optimization or bug detection.
You don’t just want to build fast, you want to build smart.
📚 Need help embracing AI? Read our guide on integrating it seamlessly into your team.
And if you don’t have a full fledged team to help you, use AI to fill the gaps:
- Need market research? Gen AI can help gather and analyze data.
- Missing a designer? AI can assist in generating initial UI mockups.
- Short on engineering resources? AI can help with code generation and testing.
Now, let’s build an MVP.
How to Go From Idea to MVP (Faster!) with Gen AI: Step by Step with Real Example
Rather than walk you through generic steps, I’m going to show you exactly how I built a local event finder in under 5 minutes using Gen AI.
The advice I provide will be applicable generally, so don’t worry—you won’t be confined to this use case.
It’s 8 quick steps:
- Start with an idea
- Break up execution of your idea into small steps
- Choose your Gen AI tools
- Craft your prompts
- Paste the code
- Polish the code
- Enhance
- Test
Step 1: Start with an Idea
Every great MVP starts with an idea. But not just any idea—one that solves a real problem.
In my case, I noticed friends constantly struggling to find local events. They’d jump between multiple apps and websites, often missing out on cool happenings nearby. It was a pain I felt too, so I thought, ‘How can I fix this?’.
My idea: To build a simple, centralized local event finder.
Your idea doesn’t need to be revolutionary.
It just needs to address a pain point or fill a gap in the market.
The key is to keep it focused and manageable for an MVP. Don’t try to build the next Facebook; aim for something you can realistically prototype quickly.
Once you have your idea, write it down in a single, clear sentence. For me, it was: “Create a web app that aggregates and displays local events from multiple sources in one easy-to-use interface.”
💡 Here’s an idea: You could have your team run a Hackathon event one day where they choose known customer problems and come up with ideas to solve them.
Step 2: Break up execution of your idea into small steps
When it comes to building an MVP, we want to go fast. Ricky Bobby in Talladega Nights fast.
It might sound counterintuitive, but the best way to move fast is to take time breaking your idea into bite-sized pieces.
- Below, you can see how I broke down my local event finder app:
- Map view: Display local events on a map.
- Event list: Show a list of events based on user search or filter criteria.
- Event details: Show detailed information about an event when selected.
- Search and filters: Allow users to search events by name or filter by categories like date, type, proximity, or theme.
It’s not an exhaustive list but it’s a good representation of the types of elements you’ll need to consider as you build.
Think of what it will take for the solution to be effective. Each of those then becomes a potential task where AI can assist, making your development process smoother and faster.
The goal is to have tasks small enough that you can tackle them in a single sitting and clearly see your progress. If a task feels too big or vague, it probably needs to be broken down further.
Step 3: Choose Your Gen AI tools
You have your idea and you know what parts of the solution are critical to success, now comes the bit where you choose the Gen AI tools that can get your MVP to market faster than you can on your own.
Think of it like picking your character in Super Smash Bros. Each comes with different skills and strengths, you need to pick the one that will bring you success.
- Functionality: Does the tool address your specific needs?
- Ease of use: How steep is the learning curve?
- Integration: Will it play nice with your existing tech stack?
- Cost: Is it within your budget, especially for long-term use?
- Community and support: Is there a robust community for troubleshooting?
- Output quality: How reliable and accurate are the results?
- Customization: Can you fine-tune the AI to your specific use case?
For my local event finder MVP, I chose a mix of Gen AI and supporting tools:
- ChatGPT: This was my Swiss Army knife, generating everything from the logo to schema and sample data. Its versatility is hard to beat.
- Imgur: For quick, free logo hosting. Sometimes, the simplest solution is the best.
- JSFiddle: This allowed me to quickly demonstrate and share a working prototype without worrying about dependencies. (An alternative would be Codesandbox or Codepen)
- Amplication: This tool took us closer to a full MVP and even production, providing Docker containers, APIs, authentication, and an admin UI.
- Prisma ORM: This facilitated our data management setup, making database operations a breeze.
- Mermaid: For creating a visual architecture diagram, which helps in planning and communication.
Once you get closer to building the product, you can start to use the Create React App or Refine.dev instead of a sandbox environment like jsfiddle.net:
Your toolkit may look different depending on your project needs, but the principle remains the same: choose tools that complement your skills, fit your project requirements, and most importantly, speed up your MVP development process.
Step 4: Craft Your Prompts
The quality of your Gen AI output comes down to how well you prompt it.
We have a whole article on how to do just that → Expert’s Guide: Generative AI Prompts for Maximum Efficiency
But for right now, I’m going to show you the prompts I used and the outputs I received while offering a few tips to get you started.
Here’s the prompt I used to generate a logo through ChatGPT:
Here’s how I prompted it to create a POC (proof of concept):
I made sure to be specific in my prompt about what I was asking the Gen AI to do but I also wasn’t overloading it with information or asking for too much to be done at once. This allowed the Gen AI to write JavaScript I can use immediately. And it did so in seconds.
My advice to you as you write your prompts would be to:
- Write one prompt per task
- For larger tasks, provide a step-by-step outline of what you need
- Give the AI context
- Be specific (aka if you need JavaScript, ask for Javascript)
- Use bullet points, numbering, or markdown in your prompts to structure complex requests clearly
- If the first result isn’t quite right, use it as a basis for a more refined prompt
Step 5: Paste the Code
Before integrating into your main project, test the code snippet in a separate environment (like JSFiddle) to ensure it works as expected.
That’s exactly what I did:
You can see that the code has done as I’ve asked and created a map view of local events in the London area.
h3
It’s now time to refine and customize the code to fit your specific needs.
Here’s how I would approach it:
- Add your personal touch: In my case, I added our newly created logo to the interface. This small addition made the app feel more polished and branded.
- Don’t hesitate to go back to your Gen AI tool for improvements. For instance, when I wanted to display more events, I prompted ChatGPT with: “Update the following code to display 20 events instead of 10, and add pagination functionality:”
- As you add more features, keep an eye on performance.
You want to refine your MVP until it’s not just functional, but genuinely user-friendly and efficient.
Step 7: Enhance the MVP
Now that you have an MVP and have the go ahead to develop it further, you need to think about what else you’ll need to do to turn it into a functioning tool.
Here’s some ideas:
- API Integration: Identify and integrate necessary APIs. For our event finder, we might need:
- Event data APIs (e.g., Eventbrite, Meetup)
- Maps API for location services
- Weather API to display event day forecasts
- Database Implementation: Move from static data to a robust database solution. Consider:
- Choosing between SQL and NoSQL based on your data structure
- Implementing data models and relationships
- Setting up data persistence and retrieval operations
- User Authentication: Implement secure user accounts and authentication. This might include:
- Sign-up and login functionality
- Password hashing and security measures
- User roles and permissions
- Documentation: Create comprehensive documentation for your project:
- API documentation
- User guides
- Developer documentation
- Scalability Considerations: Prepare your app for growth:
- Implement caching mechanisms
- Consider serverless architecture for certain functions
- Plan for database scaling
- Advanced Features: Add more sophisticated functionality:
- Personalized event recommendations
- Social sharing features
- In-app messaging for event organizers and attendees
- Mobile Responsiveness: Ensure your app works seamlessly on mobile devices:
- Implement responsive design
- Consider developing native mobile apps
Use Gen AI to help with API integration: “Generate a JavaScript function to fetch and parse event data from the Eventbrite API.”
Leverage Gen AI for database queries: “Write a PostgreSQL query to retrieve events filtered by date range and category.”
Ask Gen AI for help with auth implementation: “Provide a code snippet for implementing JWT authentication in a Node.js Express app.”
Use Gen AI to assist with documentation: “Generate a template for API documentation including endpoints, request/response formats, and example usage.”
Prompt Gen AI for scalability advice: “Suggest strategies to improve the scalability of a Node.js event finder app as user numbers grow.”
Get feature implementation ideas from Gen AI: “Outline an algorithm for providing personalized event recommendations based on user preferences and past attendance.”
Use Gen AI for responsive design tips: “Provide CSS media queries for making an event listing page responsive on mobile devices.”
Step 8: Test the MVP
Will your MVP work out of the sandbox environment? It’s time to find out.
Keep in mind that if you’re only at a proof of concept stage, you won’t need to run tests. This is strictly for when you’ve moved on to building a product that will be used.
Here are some test types you can run:
Functional Testing
I tested each feature individually. For example, I checked if the date filter accurately displayed events within the selected range.
I also tested edge cases, like selecting a date range with no events or entering invalid dates.
User Interface Testing
I ensured all UI elements were responsive and worked across different screen sizes.
I also checked that the newly added logo displayed correctly without overlapping other elements.
Performance Testing
I loaded the app with a large number of events to test how it handled increased data.
Cross-browser Testing
I tested the app in different browsers (Chrome, Firefox, Safari) to ensure consistent functionality.
User Testing
I asked a few friends to use the app and provide feedback, which led to some UI improvements and the addition of a ‘clear filters’ button.
Accessibility Testing
I ran the app through accessibility checkers to ensure it was usable for people with disabilities.
💡Gen AI can assist in testing too. Such as:
- To create diverse, realistic test datasets. For example: “Generate a JSON array of 100 events with varied dates, times, categories, and locations for testing my event finder app.”
- To prompt the AI to develop different user personas to guide your testing: “Create 5 user personas with different preferences and behaviors for testing an event finder app.”
- To create performance test scripts: Have the AI help create performance test scripts: “Write a basic JavaScript performance test script to measure load times and event rendering speed for my event finder app.”
Risks of Building MVPs with Gen AI and How to Mitigate Them
Building MVPs with Gen AI isn’t a flawless process and I’ve encountered my fair share of issues.
Rather than pretend they don’t exist, I want to call them out and show you how to mitigate the risks you’re most likely to encounter.
1. Getting Outdated Code Results
Gen AI models might generate code based on outdated libraries or practices, leading to compatibility issues or security vulnerabilities.
How to mitigate it:
- Always verify the generated code against current best practices and documentation.
- Use linters and code analysis tools to catch potential issues.
- Stay updated with the latest versions of libraries and frameworks you’re using.
- Prompt the AI to use specific, up-to-date versions: “Generate code using React version 18.2 and Node.js version 16.x”.
2. You’ve Broken It Into Too Many Steps
You might break your project into an excessive number of small tasks, creating an overwhelming and potentially counterproductive development process.
How to mitigate it:
- Leverage additional accelerators such as Low-Code, Frameworks, etc.
- Employ API-first development using tools like Swagger or Postman to streamline your API design and implementation process.
3. You Might Have a Limited Skillset
If you’re not a developer with the knowledge to write and implement code, you might struggle to use Gen AI to produce it because you won’t know what to prompt.
How to mitigate it:
- Ask the right questions to ChatGPT and use its own knowledge to shape prompts
- Start with simpler tasks and gradually increase complexity as you learn
- Collaborate with more experienced developers when possible
Additional Gen AI Resources You Won’t Want to Miss
In addition to the resources we’ve shared throughout, here are a few more you can use on your journey to integrate AI into your business:- LLM Use Cases: One Large Language Model vs Multiple Models
- Build your Own GPT – A FREE Course by HatchWorks
- Generative AI: Disrupting Software Development – In this special edition of the Built Right podcast, our CEO, Brandon Powell, sits down with J Schwan, the new Executive Chairman of HatchWorks, to explore the impact of generative AI on software development.
- How AI as an Operating System is Shaping Our Digital Future
- Can Generative AI Solve the Software Engineer Shortage?
