How to Build a Simple App with GPT-4 in Under 2 Hours
How to Build a Simple App with GPT-4 in Under 2 Hours
Building an app can often feel like a daunting task, especially for indie hackers or solo founders juggling multiple side projects. But what if I told you that with the right tools and a bit of guidance, you could leverage GPT-4 to create a simple app in under two hours? In 2026, advances in AI coding tools have made this possible, and I’m here to walk you through the process step-by-step.
Prerequisites: What You Need Before You Start
Before diving in, make sure you have the following:
- OpenAI Account: You need access to the GPT-4 API. Pricing starts at $0 for limited usage, with paid plans from $20/month for higher limits.
- Code Editor: I recommend Visual Studio Code (free).
- Node.js Installed: This will allow you to run your app locally. Get it from nodejs.org.
- Basic JavaScript Knowledge: Familiarity with variables, functions, and asynchronous programming is helpful.
Step 1: Set Up Your Environment (15 Minutes)
- Install Node.js: Follow the instructions on the Node.js website to download and install.
- Create a New Project: Open your terminal and run:
mkdir my-gpt-app cd my-gpt-app npm init -y - Install Required Packages: You’ll need some packages to interact with the GPT-4 API:
npm install axios express dotenv
Step 2: Create Your App Structure (30 Minutes)
-
Create the Main Files:
index.js: This will be your main server file..env: Store your OpenAI API key here.
-
Setup Basic Express Server in
index.js:const express = require('express'); const axios = require('axios'); require('dotenv').config(); const app = express(); const PORT = process.env.PORT || 3000; app.use(express.json()); app.listen(PORT, () => { console.log(`Server is running on http://localhost:${PORT}`); });
Step 3: Integrate GPT-4 API (30 Minutes)
-
Create a Route to Handle Requests: In
index.js, add the following route to interact with GPT-4:app.post('/generate', async (req, res) => { const { prompt } = req.body; try { const response = await axios.post('https://api.openai.com/v1/chat/completions', { model: "gpt-4", messages: [{ role: "user", content: prompt }] }, { headers: { 'Authorization': `Bearer ${process.env.OPENAI_API_KEY}` } }); res.json(response.data.choices[0].message.content); } catch (error) { res.status(500).send("Error generating response"); } }); -
Test Your API: Start your server with
node index.jsand use Postman or curl to send a POST request tohttp://localhost:3000/generatewith a JSON body containing a prompt.
Step 4: Create a Simple Frontend (30 Minutes)
-
Create an HTML File: Create
index.html:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>GPT-4 App</title> </head> <body> <h1>Simple GPT-4 App</h1> <textarea id="prompt" rows="4" cols="50"></textarea><br> <button id="generate">Generate</button> <pre id="response"></pre> <script> document.getElementById('generate').onclick = async () => { const prompt = document.getElementById('prompt').value; const res = await fetch('/generate', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ prompt }) }); const data = await res.json(); document.getElementById('response').textContent = data; }; </script> </body> </html> -
Serve the HTML File: Modify your Express server to serve this file. Add the following line in
index.js:app.use(express.static('.'));
Troubleshooting: What Could Go Wrong
- API Key Issues: Ensure your API key is correctly set in the
.envfile. - CORS Errors: If you're testing from a different origin, you may need to enable CORS in your Express app.
- Rate Limits: Be aware of the OpenAI API rate limits. If you exceed them, you’ll get errors.
What's Next?
Once your app is running, consider expanding its functionality. You could add user authentication, store previous prompts, or even deploy it using platforms like Vercel or Heroku.
In our experience, the next logical step is to integrate a database like MongoDB to save user interactions. This can evolve your simple app into a more robust tool.
Conclusion: Start Here
Building a simple app with GPT-4 in under two hours is entirely achievable. With the combination of Node.js and Express, you can create a functional prototype that leverages powerful AI capabilities. If you’re ready to dive in, grab your tools and start coding!
What We Actually Use
- OpenAI API: For generating responses.
- Express: To create the server.
- Axios: For making HTTP requests.
- Node.js: The runtime environment.
Follow Our Building Journey
Weekly podcast episodes on tools we're testing, products we're shipping, and lessons from building in public.