How to Build a Simple AI-Powered Web App in 2 Hours
How to Build a Simple AI-Powered Web App in 2 Hours
Building a web app can feel like a daunting task, especially for those of us who are just starting out. But what if I told you that you could create a simple AI-powered web app in just 2 hours? Sounds impossible? It’s not. With the right tools and a bit of guidance, you can have a functional app up and running in no time. This guide will walk you through the process step-by-step, using tools that are accessible and cost-effective.
Prerequisites: What You Need to Get Started
Before diving in, make sure you have the following:
- Basic knowledge of JavaScript: You don’t need to be a pro, but some familiarity with the language is helpful.
- An account on a cloud platform: We’ll be using tools like Vercel and OpenAI, so sign up for free accounts if you don’t have them already.
- A code editor: Visual Studio Code is a great choice and is free to use.
Step 1: Choose Your AI Tool
For our web app, we need an AI tool that can handle requests and return results. Here are some options to consider:
| Tool | Pricing | Best For | Limitations | Our Take | |----------------|---------------------------|-------------------------------|-----------------------------------------|-----------------------------------| | OpenAI GPT-3 | $0 for 100k tokens, $0.003 per token beyond | Text generation | Limited to text; can be costly at scale | We use this for chatbots | | Cohere | Free tier + $50/mo pro | Text classification | Less powerful than OpenAI for generation | We don’t use this because of complexity | | Hugging Face | Free with limited models | NLP tasks | Requires setup and model selection | Great for experimentation | | Google Cloud AI| $0 for first 12 months, then pay-as-you-go | Various AI tasks | Can get expensive; complex setup | Use this for image recognition | | IBM Watson | Free tier + $0.0025 per call | Customer service applications | Limited flexibility with free tier | We don’t use this due to cost |
Step 2: Set Up Your Development Environment
- Create a new folder for your project.
- Initialize a new Node.js project:
npm init -y - Install Express for your backend:
npm install express
Step 3: Build Your API Endpoint
Create a file named server.js and set up a basic Express server:
const express = require('express');
const app = express();
app.use(express.json());
app.post('/api/query', async (req, res) => {
// Integrate your AI tool here
});
app.listen(3000, () => {
console.log('Server is running on http://localhost:3000');
});
Step 4: Connect to Your AI Tool
Inside your /api/query endpoint, you will need to make a call to your chosen AI tool. Here’s an example using OpenAI:
const axios = require('axios');
app.post('/api/query', async (req, res) => {
const userInput = req.body.input;
const response = await axios.post('https://api.openai.com/v1/engines/davinci/completions', {
prompt: userInput,
max_tokens: 150
}, {
headers: {
'Authorization': `Bearer YOUR_API_KEY`
}
});
res.json(response.data);
});
Step 5: Create a Simple Frontend
- Create an
index.htmlfile to serve as your frontend:
<!DOCTYPE html>
<html>
<head>
<title>AI Web App</title>
</head>
<body>
<h1>Ask me anything!</h1>
<input id="userInput" type="text" />
<button onclick="sendQuery()">Send</button>
<div id="response"></div>
<script>
async function sendQuery() {
const input = document.getElementById('userInput').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.choices[0].text;
}
</script>
</body>
</html>
Step 6: Deploy Your App
- Deploy using Vercel:
- Install Vercel globally:
npm install -g vercel. - Run
vercelin your project folder and follow the prompts.
- Install Vercel globally:
Troubleshooting: What Could Go Wrong
- API key issues: Ensure your API key is correct and has the necessary permissions.
- CORS errors: If you encounter CORS issues, consider using the
corspackage in your Express app.
What’s Next?
Now that you have a simple AI-powered web app running, consider adding features like user authentication, saving conversations, or even integrating a database.
Conclusion: Start Here
Building an AI-powered web app doesn’t have to be complicated or time-consuming. With the right tools and this guide, you can create something functional in just 2 hours. Start with the simple setup provided, and as you gain confidence, expand your app's capabilities.
Remember, the key to building is iteration. Keep tweaking and improving your app based on user feedback.
Follow Our Building Journey
Weekly podcast episodes on tools we're testing, products we're shipping, and lessons from building in public.