How to Build a Simple Web App with AI in Just 1 Hour

Building a web app can feel like a daunting task, especially if you’re not a seasoned developer. But what if I told you that with the right tools and a bit of guidance, you could whip up a simple AI-powered web app in just one hour? In 2026, the landscape of AI tools has evolved, making it easier than ever for indie hackers and side project builders to leverage powerful technology without needing to write extensive code.

Prerequisites: What You Need to Get Started

Before we dive into the building process, you’ll need a few things:

1. An OpenAI API key: Sign up at OpenAI and get your API key.
2. A code editor: I recommend using Visual Studio Code (free).
3. Basic knowledge of HTML, CSS, and JavaScript: You don’t need to be an expert, but familiarity helps.
4. Node.js installed: Download from nodejs.org.

Step-by-Step Guide to Building Your Web App

Step 1: Set Up Your Project (10 minutes)

Create a new directory for your project and navigate to it in your terminal. Run the following commands to initialize a new Node.js project and install Express:

mkdir my-ai-web-app
cd my-ai-web-app
npm init -y
npm install express axios dotenv

This sets up a simple server framework using Express.

Step 2: Create Your HTML Interface (15 minutes)

In your project directory, create an index.html file. Here’s a simple template you can use:

<!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 Chatbot</h1>
    <textarea id="input" placeholder="Ask me anything..."></textarea>
    <button id="submit">Submit</button>
    <div id="response"></div>
    <script src="app.js"></script>
</body>
</html>

Step 3: Create Your Server Logic (20 minutes)

Create a new file called server.js and add the following code:

const express = require('express');
const axios = require('axios');
require('dotenv').config();

const app = express();
const PORT = process.env.PORT || 3000;

app.use(express.static('public'));
app.use(express.json());

app.post('/ask', async (req, res) => {
    const userInput = req.body.input;
    try {
        const response = await axios.post('https://api.openai.com/v1/chat/completions', {
            model: "gpt-3.5-turbo",
            messages: [{ role: "user", content: userInput }],
        }, {
            headers: {
                'Authorization': `Bearer ${process.env.OPENAI_API_KEY}`,
                'Content-Type': 'application/json',
            },
        });

        res.json({ answer: response.data.choices[0].message.content });
    } catch (error) {
        res.status(500).send('Error communicating with AI');
    }
});

app.listen(PORT, () => {
    console.log(`Server running on http://localhost:${PORT}`);
});

Step 4: Connect Frontend to Backend (10 minutes)

Create a new file called app.js in the same directory and add the following code:

document.getElementById('submit').onclick = async function() {
    const input = document.getElementById('input').value;
    const responseDiv = document.getElementById('response');

    const response = await fetch('/ask', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({ input }),
    });

    const data = await response.json();
    responseDiv.innerText = data.answer;
};

Step 5: Run Your App (5 minutes)

Make sure you have your OpenAI API key set up in a .env file:

OPENAI_API_KEY=your_api_key_here

Now, run your server with:

node server.js

Open your browser and go to http://localhost:3000. You should see your AI chatbot interface!

Troubleshooting: What Could Go Wrong

• API Key Issues: Ensure your OpenAI API key is valid and correctly set in the .env file.
• CORS Errors: If you run into cross-origin resource sharing issues, make sure your server is set up to handle requests from your frontend.
• Network Errors: Check your internet connection if the AI response is not coming through.

What’s Next: Expanding Your Web App

Once you have the basics down, consider adding features like:

• User authentication to save conversations.
• A database (like MongoDB) to store chat histories.
• More complex AI interactions with different models.

Conclusion: Start Here

You’ve just built a simple AI web app in under an hour! This is a fantastic starting point to explore more complex applications and integrations. If you're looking for real-world examples and more in-depth discussions on tools we use, check out our podcast, Built This Week, where we share our experiences as builders.

What We Actually Use

For our projects, we rely on:

• OpenAI for AI capabilities.
• Express for backend server management.
• Axios for API calls.

These tools are straightforward and cost-effective, making them great for indie hackers and solo founders.