How to Build Your First AI App with ChatGPT API — Step by Step
How to Build Your First AI App with ChatGPT API — Step by Step
If you want to build your first AI app, do not start with something huge. Start with a tiny product that does one thing well.
In this guide, you will build a simple web app that turns a rough idea into a polished product tagline. A user types a short description, clicks a button, and gets several AI-generated options back.
That is enough to teach the core workflow:
- collecting user input
- sending it to the OpenAI API
- getting a model response
- returning the output to the browser
What you are building
By the end, you will have:
- a tiny front end with a textarea and button
- a backend route that calls the OpenAI API
- a working AI app you can run locally
What you need
Before you start, make sure you have:
- Node.js installed
- an OpenAI API key
- a terminal and code editor
OPENAI_API_KEY.
Step 1: Create a new project
Make a folder and install the two packages we need:
mkdir first-ai-app
cd first-ai-app
npm init -y
npm install express openaiNow create two folders:
mkdir public
touch server.js public/index.htmlStep 2: Add your API key
In your shell, export the key before you run the app:
export OPENAI_API_KEY="your_api_key_here"If you prefer, you can load environment variables from a file in your own setup. The important rule is simple: never hard-code your API key into client-side code.
Step 3: Build the server
Add this to server.js:
const express = require("express");
const OpenAI = require("openai");
const app = express();
const client = new OpenAI({ apiKey: process.env.OPENAI_API_KEY });
const port = 3000;
app.use(express.json());
app.use(express.static("public"));
app.post("/api/generate", async (req, res) => {
try {
const { idea } = req.body;
if (!idea || !idea.trim()) {
return res.status(400).json({ error: "Idea is required." });
}
const response = await client.responses.create({
model: "gpt-5.4",
instructions:
"You are a sharp startup copywriter. Return three concise, punchy product taglines.",
input: Product idea: ${idea.trim()}
});
return res.json({ result: response.output_text });
} catch (error) {
console.error(error);
return res.status(500).json({ error: "Something went wrong." });
}
});
app.listen(port, () => {
console.log(Server running at http://localhost:${port});
});
There are only three important ideas here:
express.static("public")serves the front end/api/generateis your backend endpointclient.responses.create()sends the prompt to OpenAI and returns the model output
instructions field defines the model's role. The input field contains the actual user request.
Step 4: Build the front end
Now add this to public/index.html:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Tagline Generator</title>
<style>
body {
font-family: Arial, sans-serif;
max-width: 720px;
margin: 40px auto;
padding: 0 16px;
line-height: 1.5;
}
textarea {
width: 100%;
min-height: 140px;
margin: 12px 0;
}
button {
padding: 12px 18px;
cursor: pointer;
}
pre {
white-space: pre-wrap;
background: #f5f5f5;
padding: 16px;
border-radius: 8px;
}
</style>
</head>
<body>
<h1>AI Tagline Generator</h1>
<p>Describe your product and get three tagline ideas.</p>
<textarea id="idea" placeholder="A budgeting app for freelancers who hate spreadsheets"></textarea>
<button id="generate">Generate</button>
<h2>Result</h2>
<pre id="result">Your output will appear here.</pre>
<script>
const button = document.getElementById("generate");
const idea = document.getElementById("idea");
const result = document.getElementById("result");
button.addEventListener("click", async () => {
result.textContent = "Generating...";
const response = await fetch("/api/generate", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ idea: idea.value })
});
const data = await response.json();
result.textContent = data.result || data.error || "No result returned.";
});
</script>
</body>
</html>
This page does not do anything fancy. It grabs the text from the textarea, posts it to your backend, and prints the result when the response comes back.
That is the basic architecture of most beginner AI apps:
- browser sends request
- server talks to the model
- server returns output
- browser renders the result
Step 5: Run the app
Start the server:
node server.jsThen open http://localhost:3000 in your browser. Type in a product idea and click Generate.
If everything is wired correctly, you should get three tagline options back in a few seconds.
Step 6: Improve the prompt
The fastest way to make your app feel smarter is to improve the prompt.
For example, replace the original instructions with something more specific:
const response = await client.responses.create({
model: "gpt-5.4",
instructions:
"You are a senior SaaS copywriter. Return exactly three taglines. Each one should be under 12 words, sound modern, and avoid cliches.",
input: Product idea: ${idea.trim()}
});Small prompt changes can produce much better results than large code changes.
Step 7: Make the app production-safe
Your first version works, but a real app needs guardrails.
Add these next:
- input validation so empty or huge prompts do not hit your API
- rate limiting so one user cannot spam requests
- logging so you can debug failures
- retries or friendly error states for transient API errors
- analytics so you know which prompts produce useful results
Common mistakes beginners make
Calling the API directly from the browser
Do not expose your API key in client-side JavaScript. Keep model calls on the server.
Using vague prompts
"Write something good" is weak. Good prompts include audience, format, length, and constraints.
Trusting every output
Models can be wrong, repetitive, or off-brand. Always review the output before showing it to users or publishing it.
Building too much too early
Start with one narrow task. If users love that, add memory, file uploads, multi-step workflows, or tool use later.
Where to go next
Once this mini app works, you can turn the same pattern into:
- an email drafting assistant
- a blog outline generator
- a support reply suggester
- a meeting notes summarizer
- an internal knowledge bot
If you want the official reference material while you build, OpenAI's Responses API guide and quickstart docs are the best places to stay aligned with the current API surface.
Final takeaway
Your first AI app does not need to be impressive. It needs to be clear.
If you can collect input, call the API safely on the server, and return a useful result, you already understand the core loop behind a huge number of AI products.
Build one small thing, make it reliable, then iterate from there.
Unlock Pro insights
Get weekly deep-dive reports, exclusive tool benchmarks, and workflow templates with AIPulse Pro.
Related Articles
More tutorials coverage, plus recent reads from across AIPulse.
How to Use AI for Financial Analysis and Reporting
The best finance AI workflow does not hand the close to a chatbot. It turns clean exports, clear prompts, and human review into faster variance analysis, sharper reporting commentary, and fewer hours wasted translating numbers into narrative.
How to Build an AI Renewal Workflow for Customer Success Teams
Renewals usually break down long before the contract end date. This practical AI workflow helps customer success teams spot risk earlier, prep faster, and run tighter renewal motions without turning judgment into a black box.
How to Build an AI Lead Scoring and Follow-Up Workflow for B2B Teams
Most B2B teams do not need more leads first. They need a faster way to score, route, and personalize follow-up on the leads they already have. This AI workflow does that without turning qualification into a black box.