One rule
Your frontend should never call OpenAI directly. Put the OpenAI call in a backend route, read the key from an environment variable, and let your UI call your own route.
Use the Responses API for new text features. Older tutorials may show Chat Completions first, but that is no longer the recommended starting point for text generation apps.
What goes where
Think of the model call like a function. The instructions are your product rules and business logic. The input is what the user typed.
For example, instructions can say: “You are a study assistant for Indian college students. Keep answers under 120 words.” The input is the student’s actual question.
Set up safely
Do each one yourself, then tap it to tick it off. The ticks are only a checklist for you: they are not marked or scored.
0 of 5 done
npm install openaiMinimal server route
This example uses Express because it is easy to read. The same idea works in Next.js, Hono, Fastify, Django, or Flask: keep the key on the server and expose your own route to the UI.
The route accepts user text, sends product rules in instructions, and returns one answer.
import express from "express";
import OpenAI from "openai";
const app = express();
app.use(express.json());
const client = new OpenAI({
apiKey: process.env.OPENAI_API_KEY
});
app.post("/api/ai", async (req, res) => {
try {
const userText = req.body.message;
if (!userText || typeof userText !== "string") {
return res.status(400).json({ error: "message is required" });
}
const response = await client.responses.create({
model: "gpt-4o-mini",
instructions: "You are a helpful assistant. Give a clear answer in under 120 words.",
input: userText,
max_output_tokens: 200
});
res.json({ answer: response.output_text });
} catch (error) {
console.error(error);
res.status(500).json({ error: "AI request failed" });
}
});
app.listen(3000, () => {
console.log("Server running on http://localhost:3000");
});Local files
Your .env is private. Your .env.example is safe to commit because it shows the name of the variable without the real value.
This matters for hackathon judging. A reviewer should be able to set up your repo without seeing your secret key.
.env
OPENAI_API_KEY=sk-your-real-key-here
.env.example
OPENAI_API_KEY=replace_with_your_key
.gitignore
.env
node_modulesCommon leak
Do not paste your API key into React, Android, Flutter, or any browser code. If it ships to a user device, assume the key can be copied.
Also do not ask an AI coding tool to “add my key into the code”. Ask it to use process.env.OPENAI_API_KEY and to update .env.example instead.
Check AI code
AI tools often give working code, but you must inspect the safety parts. Check that the OpenAI SDK is used only in server files, the key comes from an environment variable, and errors do not print secrets into responses.
If a generated answer uses Chat Completions for a new text feature, ask it to rewrite using the Responses API.
Do this now
Do each one yourself, then tap it to tick it off. The ticks are only a checklist for you: they are not marked or scored.
0 of 5 done