How to Build a Simple Web App with AI in Under 2 Hours
How to Build a Simple Web App with AI in Under 2 Hours
Building a web app used to feel like a monumental task, especially when AI is thrown into the mix. But in 2026, thanks to some powerful tools and frameworks, you can create a simple AI-driven web app in less than two hours. If you’re an indie hacker or a side project builder, this is a game plan you can execute without breaking the bank. Let's dive in!
Prerequisites: What You Need Before You Start
Before we jump into the building process, here’s what you’ll need:
- Basic knowledge of JavaScript: Familiarity with frontend development will be helpful.
- A code editor: I recommend using Visual Studio Code (free).
- Node.js installed: Make sure you have the latest version (free).
- An account on a cloud hosting platform: Options like Vercel or Netlify are great (both have free tiers).
Step 1: Choose Your AI Service
You’ll want to pick an AI service that fits your needs. Here’s a comparison of some popular options:
| Tool | What It Does | Pricing | Best For | Limitations | Our Take | |--------------|--------------------------------------------|-----------------------------|------------------------------|-----------------------------------------------------------|---------------------------------| | OpenAI | Text and image generation | $0-20/mo for API access | Natural language processing | Can get expensive with high usage | We use OpenAI for text prompts. | | Hugging Face | Wide range of ML models | Free tier + $10/mo pro | Custom ML model deployment | Limited customization on free tier | Great for specific ML tasks. | | Google Cloud | Machine learning APIs and models | Free tier + $30/mo pro | Scalable AI solutions | Can be complex to set up | Skip if you're a complete beginner. | | IBM Watson | AI services for language and data analysis | Free tier + $40/mo pro | Business applications | Limited free tier features | Not our first choice. | | Pipedream | Workflow automation with AI integrations | Free tier + $20/mo pro | Quick automation tasks | Less robust for complex AI applications | We use this for quick integrations. |
Step 2: Set Up Your Project
Now that you’ve chosen an AI service, let’s set up your web app:
-
Initialize your project:
mkdir my-ai-web-app cd my-ai-web-app npm init -y -
Install necessary packages (e.g., Express for backend):
npm install express axios dotenv -
Create your app structure:
my-ai-web-app/ ├── .env ├── package.json ├── server.js └── public/ ├── index.html └── styles.css
Step 3: Build the Backend
In server.js, set up a simple Express server that connects to your chosen AI tool.
const express = require('express');
const axios = require('axios');
require('dotenv').config();
const app = express();
app.use(express.json());
app.use(express.static('public'));
app.post('/api/ai', async (req, res) => {
try {
const response = await axios.post('AI_SERVICE_ENDPOINT', {
prompt: req.body.prompt,
apiKey: process.env.API_KEY
});
res.json(response.data);
} catch (error) {
res.status(500).send('AI service error');
}
});
app.listen(3000, () => {
console.log('Server running on http://localhost:3000');
});
Expected Output:
- You’ll have a running backend that can receive prompts and return AI-generated responses.
Step 4: Build the Frontend
Now, let’s create a simple HTML form in public/index.html to interact with your backend.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AI Web App</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>AI Web App</h1>
<form id="ai-form">
<textarea id="prompt" placeholder="Enter your prompt here..."></textarea>
<button type="submit">Generate</button>
</form>
<div id="response"></div>
<script>
const form = document.getElementById('ai-form');
form.addEventListener('submit', async (e) => {
e.preventDefault();
const prompt = document.getElementById('prompt').value;
const res = await fetch('/api/ai', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ prompt })
});
const data = await res.json();
document.getElementById('response').innerText = data.response;
});
</script>
</body>
</html>
Expected Output:
- A simple webpage where users can input prompts and see AI-generated responses.
Step 5: Deploy Your App
For deployment, Vercel or Netlify are fantastic options:
- Push your code to GitHub.
- Connect your GitHub repo to Vercel/Netlify.
- Follow the prompts to deploy.
Troubleshooting:
- If you encounter CORS errors, ensure your backend is set up to handle requests from your frontend.
- Check if your API keys are correctly configured in
.env.
What's Next: Enhancing Your Web App
Once your basic app is up and running, consider adding features like user authentication, saving chat history, or integrating more advanced AI capabilities.
Conclusion: Start Here
You’ve now built a simple AI-driven web app in under two hours. Start with OpenAI for natural language tasks or Hugging Face for custom models. Don’t be afraid to experiment with different tools and features as you grow your project.
What We Actually Use: For our projects, we lean heavily on OpenAI for text generation and Pipedream for quick integrations.
Follow Our Building Journey
Weekly podcast episodes on tools we're testing, products we're shipping, and lessons from building in public.