How to Build a Simple Web App Using GPT-4 in Under 2 Hours

If you're an indie hacker or a side project builder, you know the struggle of turning your ideas into functional web apps quickly. The good news? With advancements in AI, particularly GPT-4, you can now build a simple web app in under 2 hours. In this guide, I’ll walk you through the entire process, including the tools you'll need, step-by-step instructions, and some honest trade-offs you should consider.

Prerequisites

Before diving into the build, here are the prerequisites you’ll need:

1. Basic Programming Knowledge: Familiarity with HTML, CSS, and JavaScript.
2. Node.js Installed: Make sure you have Node.js (version 14 or above) installed on your machine.
3. OpenAI API Key: Sign up at OpenAI and grab your API key.
4. Code Editor: Use any code editor you prefer (VSCode is highly recommended).

Time Estimate

You can finish this entire process in approximately 2 hours if you follow along with the steps closely.

Step-by-Step Guide

Step 1: Set Up Your Project

Create a new directory for your project and initialize it:

mkdir gpt-web-app
cd gpt-web-app
npm init -y

Step 2: Install Required Packages

You’ll need Express (for the server) and Axios (to call the OpenAI API):

npm install express axios dotenv

Step 3: Create Your Server

Create a file called server.js and set up a basic Express server:

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

const app = express();
app.use(express.json());

app.post('/api/generate', async (req, res) => {
  const userInput = req.body.input;

  try {
    const response = await axios.post('https://api.openai.com/v1/chat/completions', {
      model: 'gpt-4',
      messages: [{ role: 'user', content: userInput }],
    }, {
      headers: {
        'Authorization': `Bearer ${process.env.OPENAI_API_KEY}`,
      },
    });
    res.json(response.data.choices[0].message.content);
  } catch (error) {
    res.status(500).send('Error generating text');
  }
});

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
});

Step 4: Create the Frontend

Create an index.html file to serve as your frontend:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GPT-4 Web App</title>
</head>
<body>
    <h1>GPT-4 Web App</h1>
    <textarea id="input" placeholder="Ask me anything..."></textarea>
    <button onclick="generateResponse()">Generate</button>
    <p id="response"></p>
    
    <script>
      async function generateResponse() {
        const input = document.getElementById('input').value;
        const res = await fetch('/api/generate', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
          },
          body: JSON.stringify({ input }),
        });
        const data = await res.json();
        document.getElementById('response').innerText = data;
      }
    </script>
</body>
</html>

Step 5: Run Your App

Start your server:

node server.js

Now, open index.html in your browser, and you should see your web app in action!

Troubleshooting

• Error 500: If you see this error, double-check your API key and ensure it’s set up correctly in your .env file.
• CORS Issues: If you're testing locally, ensure that the API calls are allowed. You might need to adjust your server settings or use a tool like CORS Anywhere for development.

What's Next

Once your basic app is up and running, consider adding more features like user authentication, saving chat history, or even deploying it on platforms like Vercel or Heroku.

Conclusion

Building a simple web app using GPT-4 can be done quickly and efficiently, even if you don't have extensive coding experience. Start with the steps above, and you'll have a functional web app running in no time.

What We Actually Use

For our projects, we often rely on tools like Vercel for deployment and Postman for testing API requests. If you find the need to expand your app, consider integrating databases like Firebase or MongoDB.