How to Build a Simple Web App with AI in Just 2 Hours
How to Build a Simple Web App with AI in Just 2 Hours
Building a web app can feel overwhelming, especially for beginners. The good news? With the right tools and a clear path, you can create a simple AI-powered web app in just two hours. In 2026, the landscape of AI coding tools has evolved, making it easier than ever for indie hackers and side project builders to get started.
Prerequisites: What You Need Before You Start
Before diving in, make sure you have the following:
- Basic coding knowledge: Familiarity with HTML, CSS, and JavaScript.
- A code editor: We recommend Visual Studio Code or any text editor you're comfortable with.
- A web server: You can use services like Vercel or Netlify for easy deployment.
- An AI API key: Sign up for an AI service like OpenAI or Hugging Face.
Step 1: Choose Your AI Tool
To build your web app, you’ll need an AI tool that fits your use case. Here’s a comparison of some popular AI coding tools in 2026:
| Tool | Pricing | Best For | Limitations | Our Take | |------------------|-------------------------------|-------------------------------|------------------------------|-------------------------------| | OpenAI GPT-4 | Free tier + $20/mo pro | Text generation | Limited customization | We use this for text-based apps. | | Hugging Face | Free + $10/mo for premium | NLP tasks, model training | Steeper learning curve | Not ideal for simple projects. | | Microsoft Azure | Free tier + pay-as-you-go | Various AI services | Can get costly | We don’t use this due to complexity. | | Google Cloud AI | $0-50/mo depending on usage | Image and text analysis | Requires setup | We prefer simpler options. | | IBM Watson | Free tier + $30/mo | Chatbots and NLP | Less flexible | Good for chat-based apps. |
Our Recommendation: Start with OpenAI GPT-4 for text generation. It's user-friendly and has a free tier to get you started.
Step 2: Set Up Your Environment
- Create a new project: In your code editor, set up a new folder for your web app.
- Initialize npm: Run
npm init -yto create a package.json file. - Install dependencies: Use the command
npm install express axios dotenvto set up a simple server and make API calls.
Step 3: Build Your Web App
-
Create the Server:
- Create a file named
server.js. - Set up a basic Express server that listens on a port.
const express = require('express'); const axios = require('axios'); require('dotenv').config(); const app = express(); const PORT = process.env.PORT || 3000; app.use(express.json()); app.use(express.static('public')); app.listen(PORT, () => { console.log(`Server is running on port ${PORT}`); }); - Create a file named
-
Set Up API Routes:
- Add a route to handle the AI request.
app.post('/api/generate', async (req, res) => { const { prompt } = req.body; const response = await axios.post('https://api.openai.com/v1/engines/text-davinci-003/completions', { prompt, max_tokens: 100, }, { headers: { 'Authorization': `Bearer ${process.env.OPENAI_API_KEY}`, }, }); res.json(response.data); }); -
Create the Frontend:
- In the
publicfolder, create anindex.htmlfile with a simple form to input prompts and display results.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>AI Web App</title> </head> <body> <h1>AI Text Generator</h1> <form id="form"> <input type="text" id="prompt" placeholder="Enter your prompt" required> <button type="submit">Generate</button> </form> <div id="result"></div> <script> document.getElementById('form').addEventListener('submit', async (e) => { e.preventDefault(); const prompt = document.getElementById('prompt').value; const response = await fetch('/api/generate', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ prompt }), }); const data = await response.json(); document.getElementById('result').innerText = data.choices[0].text; }); </script> </body> </html> - In the
Step 4: Testing Your App
- Run your server: Execute
node server.jsin your terminal. - Open your browser: Navigate to
http://localhost:3000. - Test the functionality: Enter a prompt and click "Generate" to see the AI's response.
Troubleshooting: What Could Go Wrong
- CORS issues: If you encounter cross-origin resource sharing (CORS) errors, make sure to configure your Express server to allow requests.
- API key errors: Double-check that your OpenAI API key is correctly set in your
.envfile.
What's Next?
Once you have your basic app running, consider adding features like user authentication, saving previous prompts, or integrating more complex AI functionalities. Explore tools like Firebase for backend services or Tailwind CSS for styling.
Conclusion: Start Here
Building a simple web app with AI can be done in just two hours if you follow this guide. Start with OpenAI for text generation, set up a basic server, and get your app running.
If you’re ready to dive into the world of AI web apps, this is your starting point.
Follow Our Building Journey
Weekly podcast episodes on tools we're testing, products we're shipping, and lessons from building in public.