How to Build a Simple AI-Powered Web App in Under 2 Hours
How to Build a Simple AI-Powered Web App in Under 2 Hours
If you’ve ever thought about building an AI-powered web app but felt overwhelmed by the complexity, you’re not alone. Many indie hackers and solo founders face the same dilemma: how to leverage AI without getting bogged down in intricate coding and long development cycles. The good news? You can build a simple AI-powered web app in under 2 hours, even if you’re not a coding wizard.
In this guide, I’ll walk you through the tools you need, the steps to take, and the common pitfalls to avoid.
Prerequisites: What You Need Before You Start
- A basic understanding of web development: Know your way around HTML, CSS, and JavaScript.
- An account on a cloud service like Vercel or Netlify (both free for small projects).
- API access to an AI service: I'll recommend several options below.
- A code editor: Visual Studio Code is a solid choice and free.
Step 1: Choose Your AI API
To power your web app, you’ll need an AI API. Here are some options to consider:
| Name | Pricing | Best For | Limitations | Our Take | |-------------------|----------------------|-------------------------------|-------------------------------------------|--------------------------------| | OpenAI GPT-3 | $0.002/1k tokens | Natural language processing | Can get expensive with heavy usage | We use it for chatbots. | | Hugging Face | Free tier + $9/mo | NLP and image processing | Limited features on free tier | Great for experimentation. | | IBM Watson | $0-200/mo | Enterprise-level AI solutions | Complexity can be daunting | We don’t use it; too complex. | | Google Cloud AI | $0-150/mo | Machine learning models | Pricing can escalate quickly | We use it for image analysis. | | Azure Cognitive Services | $0-100/mo | Various AI functionalities | Steeper learning curve | We don’t use it; prefer simpler options. |
Step 2: Set Up Your Development Environment
- Create a new project: Use your code editor to create a new folder for your project.
- Initialize with a package manager: Run
npm init -yto create a package.json file. - Install essential packages: Use
npm install express axios dotenvfor setting up a simple server and making API requests.
Step 3: Build Your Web App
-
Create your server: In your project folder, create a file called
server.js. Here’s a simple Express server setup:const express = require('express'); const axios = require('axios'); const dotenv = require('dotenv'); dotenv.config(); const app = express(); app.use(express.json()); app.post('/api/query', async (req, res) => { const response = await axios.post('YOUR_AI_API_URL', { data: req.body.input }, { headers: { 'Authorization': `Bearer ${process.env.API_KEY}` } }); res.json(response.data); }); const PORT = process.env.PORT || 5000; app.listen(PORT, () => console.log(`Server running on port ${PORT}`)); -
Create a simple frontend: In the same project folder, create an
index.htmlfile. Here’s a basic setup:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>AI Web App</title> </head> <body> <input id="input" type="text" placeholder="Ask me anything..."> <button onclick="submitQuery()">Submit</button> <div id="response"></div> <script> async function submitQuery() { const input = document.getElementById('input').value; const res = await fetch('/api/query', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ input }) }); const data = await res.json(); document.getElementById('response').innerText = data.response; } </script> </body> </html>
Step 4: Deploy Your Web App
- Push to GitHub: Initialize a Git repository and push your code to GitHub.
- Deploy using Vercel or Netlify: Both platforms allow you to connect your GitHub repo and deploy with a few clicks.
Troubleshooting: What Could Go Wrong
- API Key Issues: Ensure your API key is valid and added to your
.envfile. - CORS Errors: If you run into CORS issues, you might need to configure your API or use a CORS proxy for development.
- Server not starting: Check for errors in your console; ensure all required packages are installed.
What's Next?
Once your simple AI-powered web app is up and running, consider enhancing it with additional features. You could:
- Add user authentication to personalize the experience.
- Integrate more complex AI models for richer interactions.
- Collect user data to improve your app over time.
Building an AI-powered web app doesn’t have to be daunting. With the right tools and a clear plan, you can create something valuable in just a couple of hours.
Conclusion: Start Here
If you’re ready to dive in, start by choosing your AI API and setting up your development environment. The tools are more accessible than ever in 2026, and your first AI web app is just a few steps away.
Follow Our Building Journey
Weekly podcast episodes on tools we're testing, products we're shipping, and lessons from building in public.