How to Create an AI-Powered Web App in 2 Hours

Building an AI-powered web app sounds daunting, but it doesn't have to be. As indie hackers and solo founders, we often juggle multiple roles and limited time. The good news? With the right tools and a structured approach, you can whip up a functional AI web app in just two hours. In this guide, I’ll share exactly how we did it, the tools we used, and the lessons learned along the way.

Prerequisites: What You Need Before You Start

Before diving in, make sure you have the following:

• Basic Coding Knowledge: Familiarity with JavaScript, HTML, and CSS.
• A Code Editor: We recommend Visual Studio Code (free).
• An AI API Key: Sign up for OpenAI or similar service to access their API.
• A Hosting Solution: For quick deployment, consider Vercel or Netlify (both have free tiers).

Step 1: Choose Your AI Functionality (30 minutes)

First, decide what AI functionality you want to implement. Here are some common options:

• Chatbot: For customer support or engagement.
• Text Analysis: For summarizing or sentiment analysis.
• Image Recognition: For analyzing images uploaded by users.

Tool Recommendations for AI Functionality

| Tool | What It Does | Pricing | Best For | Limitations | Our Take | |---------------|--------------------------------------------|-----------------------------|---------------------------|-------------------------------------|----------------------------------| | OpenAI | Text generation and analysis | Free tier + $0.002 per token | Chatbots and text analysis | Limited free usage | We use this for chatbots. | | Hugging Face | Pre-trained models for various tasks | Free, paid models available | NLP and image tasks | Can be complex to set up | Great for advanced users. | | Clarifai | Image and video recognition | Free tier + $30/mo pro | Image recognition | Limited free tier features | We don’t use this due to cost. | | Dialogflow | Build chatbots and voice assistants | Free tier + $0.002 per request | Chatbots | Limited flexibility in responses | Good for quick setups. |

Step 2: Set Up Your Project (30 minutes)

1. Create a New Project: Open your code editor and create a new folder for your app.
2. Initialize Your Project: Run npm init -y to create a package.json file.
3. Install Dependencies: Use the following commands:
   • npm install express for your server.
   • npm install axios for API requests.
   • npm install dotenv for environment variables.

Expected Output

At this stage, you should have a basic Node.js project structure with the necessary packages installed.

Step 3: Build the Server (30 minutes)

Create a simple server using Express. Here’s a basic structure:

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 userInput = req.body.message;
  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}`
    }
  });
  
  res.json(response.data);
});

app.listen(3000, () => console.log('Server running on port 3000'));

Expected Output

Your server should now be running and able to respond to chat requests.

Step 4: Create the Frontend (30 minutes)

Using simple HTML and JavaScript, create a user interface to interact with your AI functionality. Here’s a minimal example:

<!DOCTYPE html>
<html>
<head>
    <title>AI Chat App</title>
</head>
<body>
    <input type="text" id="user-input" placeholder="Type your message here">
    <button onclick="sendMessage()">Send</button>
    <div id="response"></div>
    
    <script>
        async function sendMessage() {
            const message = document.getElementById('user-input').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.choices[0].message.content;
        }
    </script>
</body>
</html>

Expected Output

You should be able to type a message and receive a response from your AI model.

Troubleshooting: What Could Go Wrong

• API Errors: Check your API key and ensure you’re within usage limits.
• CORS Issues: If running locally, you may need to handle CORS in your Express server.
• Deployment Errors: If deploying, ensure your environment variables are set correctly.

What’s Next?

Now that you have a basic AI-powered web app, consider these enhancements:

• Add Authentication: Use Firebase Auth or Auth0 for user management.
• Improve UI/UX: Use frameworks like React or Vue.js for a better interface.
• Scale Up: If you hit usage limits, consider a paid plan or alternatives like Cohere or AI21.

Conclusion: Start Here

If you're ready to dive into building your own AI web app, follow the steps above. With the right tools and a clear plan, you can create a functional prototype in just two hours. Remember, the key is to start small and iterate based on user feedback.

What We Actually Use: For our AI projects, we primarily rely on OpenAI for text generation and Vercel for deployment due to their ease of use and cost-effectiveness.