How to Build Your First AI-Assisted Web App in 2 Hours
How to Build Your First AI-Assisted Web App in 2 Hours
If you’re a solo founder or indie hacker, the idea of building an AI-assisted web app can feel daunting. You probably think it requires extensive coding knowledge or endless hours of work. But what if I told you that you could build a functional AI web app in just 2 hours? In this guide, I’ll walk you through the essential tools and steps to make this happen, even if you’re a beginner.
Prerequisites: What You Need to Get Started
Before we dive in, let’s make sure you have everything you need. Here’s a quick checklist:
- A Code Editor: I recommend Visual Studio Code (free) for its versatility.
- Basic HTML/CSS/JavaScript Knowledge: You don’t need to be an expert, but knowing the basics will help.
- An OpenAI API Key: Sign up at OpenAI and get your API key (pricing starts at $0 for limited usage).
- Node.js Installed: You can download it from nodejs.org.
Step 1: Setting Up Your Project (20 Minutes)
Start by creating a new directory for your project. Open your terminal and run:
mkdir my-ai-web-app
cd my-ai-web-app
npm init -y
Next, install the necessary packages:
npm install express axios dotenv
This sets up an Express server and allows you to make HTTP requests to the OpenAI API.
Step 2: Building the Server (30 Minutes)
Create an index.js file in your project directory. This file will be the backbone of your web app. Here's a simple version:
const express = require('express');
const axios = require('axios');
require('dotenv').config();
const app = express();
app.use(express.json());
app.post('/api/chat', async (req, res) => {
const userMessage = req.body.message;
try {
const response = await axios.post('https://api.openai.com/v1/chat/completions', {
model: 'gpt-3.5-turbo',
messages: [{ role: 'user', content: userMessage }],
}, {
headers: {
'Authorization': `Bearer ${process.env.OPENAI_API_KEY}`,
},
});
res.json(response.data.choices[0].message.content);
} catch (error) {
res.status(500).send('Error communicating with OpenAI API');
}
});
app.listen(3000, () => console.log('Server running on port 3000'));
Expected Output:
You should see "Server running on port 3000" in your terminal when you run node index.js.
Step 3: Creating the Frontend (30 Minutes)
Now let’s create a simple HTML page to interact with your server. Create an index.html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI Chat App</title>
</head>
<body>
<h1>AI Chat</h1>
<textarea id="message" placeholder="Type your message here..."></textarea>
<button id="send">Send</button>
<div id="response"></div>
<script>
document.getElementById('send').onclick = async () => {
const message = document.getElementById('message').value;
const res = await fetch('/api/chat', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ message }),
});
const data = await res.json();
document.getElementById('response').innerText = data;
};
</script>
</body>
</html>
Running Your App
Open a browser and navigate to http://localhost:3000. You should be able to type a message, click "Send," and get a response from the AI model.
What Could Go Wrong
- API Key Issues: Make sure your API key is correctly set in a
.envfile in your project directory with the lineOPENAI_API_KEY=your_key_here. - CORS Issues: If you run into Cross-Origin Resource Sharing (CORS) errors, consider using the
corspackage in your Express app.
What's Next?
Once you have your basic AI web app running, consider enhancing it by:
- Adding user authentication with Auth0.
- Storing conversations in a database like Firebase.
- Improving the UI with a framework like React.
Tool Comparison: AI Tools for Web App Development
| Tool Name | Pricing | Best For | Limitations | Our Take | |--------------------|-----------------------------|----------------------------------|------------------------------------|---------------------------------| | OpenAI API | Free tier + $0.002/1K tokens| Text generation and chatbots | Limited free usage | We use this for AI responses | | Firebase | Free tier + $25/mo | Real-time database integration | Costs can escalate with usage | Great for user data storage | | Auth0 | Free tier + $23/mo | User authentication | Limited features in free tier | We use this for user auth | | Express.js | Free | Building web servers | Requires Node.js knowledge | Essential for our backend | | Axios | Free | Making HTTP requests | No built-in error handling | We use this for API calls |
Conclusion: Start Here
To kick off your journey into building AI-assisted applications, follow the steps outlined above. Set aside about 2 hours, gather your prerequisites, and dive into the code. Once you get the hang of it, you can iterate and improve your app based on user feedback.
If you’re looking for further guidance and real-time updates on what tools we’re using, check out our podcast, Built This Week, where we share lessons from our own building journey.
Follow Our Building Journey
Weekly podcast episodes on tools we're testing, products we're shipping, and lessons from building in public.