Build an AI Image Generator: From Prompt to Working App in 30 Minutes

What You'll Build

By the end of this tutorial, you'll have a working web app that looks like this:

• A text input — type any description ("a golden retriever wearing a hard hat on a construction site")
• A Generate button — click it, watch a loading spinner, get your image
• An image display area — shows the generated image with a download button
• A history sidebar — your last 10 generations, saved in the browser

It's a real, deployable app. Not a toy. You can put it on a custom domain and use it every day. Friends can use it. You can turn it into a product.

What You'll Need

• Node.js installed — check with node --version in your terminal
• An OpenAI API key — sign up at platform.openai.com, add $5-10 in credits
• A code editor — Cursor, VS Code, whatever you use
• A Vercel account — free tier is plenty for deployment
• ~30 minutes

Cost reality check: DALL-E 3 costs $0.04 per standard image. Your $5 in credits = 125 images. More than enough to build, test, and show friends. If you want to go cheaper, we'll cover Replicate in Step 3 — their models run about $0.003 per image.

Step 1: Set Up the Project

Open Cursor (or Claude Code in your terminal) and give it this prompt:

AI will scaffold the whole structure. You'll get:

my-image-generator/
├── server.js          ← Express server (handles API calls)
├── index.html         ← The UI your users see
├── .env               ← Your secret API key (never commit this)
├── .env.example       ← Template for others
├── package.json       ← Dependencies
└── .gitignore         ← Keeps secrets out of git

After AI generates the files, run:

npm install

Then open .env and add your real OpenAI key:

OPENAI_API_KEY=sk-your-actual-key-here

Step 2: Build the UI

Now let's build the frontend. Give AI this prompt:

What you'll get back is a complete HTML file with embedded CSS. The key elements are:

<!-- The prompt input -->
<textarea id="promptInput" 
  placeholder="Describe the image you want..."></textarea>

<!-- The button -->
<button id="generateBtn" onclick="generateImage()">
  Generate Image
</button>

<!-- Loading state -->
<div id="loading" class="hidden">
  <div class="spinner"></div>
  <p>Generating your image... (~10 seconds)</p>
</div>

<!-- Result -->
<div id="result" class="hidden">
  <img id="generatedImage" alt="AI Generated Image">
  <button onclick="downloadImage()">Download</button>
</div>

Run node server.js and open localhost:3000. You should see the UI — nothing works yet, but it should look clean.

Step 3: Connect the AI API

This is the core of the project. Give AI this prompt:

The server code AI generates will look like this:

import OpenAI from 'openai';
import dotenv from 'dotenv';
dotenv.config();

const openai = new OpenAI({
  apiKey: process.env.OPENAI_API_KEY
});

app.post('/generate', async (req, res) => {
  const { prompt } = req.body;
  
  try {
    const response = await openai.images.generate({
      model: "dall-e-3",
      prompt: prompt,
      n: 1,
      size: "1024x1024",
      style: "vivid"
    });
    
    const imageUrl = response.data[0].url;
    res.json({ imageUrl });
    
  } catch (error) {
    if (error.code === 'content_policy_violation') {
      res.status(400).json({ error: "Prompt rejected by safety filter. Try rephrasing." });
    } else if (error.status === 429) {
      res.status(429).json({ error: "Rate limited. Wait a moment and try again." });
    } else {
      res.status(500).json({ error: "Generation failed: " + error.message });
    }
  }
});

What this code does in plain English:

• Your browser sends a prompt to your server at /generate
• Your server passes that prompt to OpenAI's API
• OpenAI generates the image and returns a temporary URL
• Your server sends that URL back to your browser
• Your browser displays the image

Step 4: Handle Loading and Errors in the Frontend

The server works. Now wire up the UI so it actually calls it:

The key pattern is the async fetch call:

async function generateImage() {
  const prompt = document.getElementById('promptInput').value.trim();
  if (!prompt) return alert('Enter a prompt first');
  
  // Show loading, hide old result
  showLoading(true);
  document.getElementById('result').classList.add('hidden');
  document.getElementById('generateBtn').disabled = true;
  
  try {
    const response = await fetch('/generate', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ prompt })
    });
    
    const data = await response.json();
    
    if (!response.ok) {
      throw new Error(data.error || 'Generation failed');
    }
    
    // Show the image
    document.getElementById('generatedImage').src = data.imageUrl;
    document.getElementById('result').classList.remove('hidden');
    
    // Save to history
    saveToHistory(prompt, data.imageUrl);
    
  } catch (error) {
    showError(error.message);
  } finally {
    showLoading(false);
    document.getElementById('generateBtn').disabled = false;
  }
}

Test it now: restart your server, open localhost:3000, type a prompt, click Generate. You should see a spinner for about 10 seconds, then an image appears. If it works — you've just built an AI-powered app.

Step 5: Save Your Generation History

Right now, every time you refresh the page your history disappears. Let's fix that:

AI will add a saveToHistory() and loadHistory() function using localStorage.getItem and localStorage.setItem. The expiry indicator is a nice touch — it tells users why old thumbnails show broken images.

Step 6: Deploy It to Vercel

Right now your app only works on your computer. Let's put it on the internet:

After AI generates the config, the deployment steps are:

1. Push your code to GitHub (make sure .env is in .gitignore)
2. Go to vercel.com → New Project → Import your GitHub repo
3. Before clicking Deploy: go to Environment Variables and add OPENAI_API_KEY
4. Click Deploy — Vercel builds and deploys in about 60 seconds
5. You get a URL like your-project.vercel.app — share it

What AI Gets Wrong

Common issues you'll hit and how to fix them:

1. The image URL is broken after an hour

DALL-E image URLs are temporary and expire after ~1 hour. If you screenshot the URL and share it later, the image will be gone. To permanently save images, ask AI: "After generating, download the image to a /public/images/ folder and serve it from there instead of using the OpenAI URL directly."

2. "Content policy violation" errors

DALL-E has strict content filters. It rejects prompts with violence, nudity, real person's names, and sometimes surprisingly innocent things. When it rejects a prompt, it doesn't always tell you why. Strategy: rephrase the prompt more neutrally, avoid proper nouns, describe composition rather than subjects. Replicate's models have less restrictive filters if you need more creative freedom.

3. The server works locally but fails on Vercel

Almost always: missing environment variable. Check Vercel's dashboard → Functions tab → look for the error logs. If you see "invalid API key" or "process.env.OPENAI_API_KEY is undefined", go to Project Settings → Environment Variables and add it. Then redeploy (Vercel doesn't auto-redeploy when you add env vars).

4. CORS errors in the browser

If you're calling the API directly from the browser (not through your server), you'll get CORS errors because OpenAI's API doesn't allow browser-side calls. The fix: always route API calls through your server. Your browser calls /generate on your server, and your server calls OpenAI. Never put your API key in frontend JavaScript.

5. Slow generation with no feedback

DALL-E 3 takes 10-15 seconds. Without a loading indicator, users will click the button repeatedly thinking it's broken. Make sure your loading state actually shows before the async call, not after. The showLoading(true) call must come before the await fetch().

Make It Your Own

Three directions to take this project further:

1. Add style presets

Add buttons for "Photorealistic", "Cartoon", "Oil Painting", "Pixel Art" that append style instructions to the prompt automatically. Ask AI: "Add a style selector to my image generator that appends style keywords to the user's prompt."

2. Multi-image grid

Generate 4 variations at once and let users pick their favorite. Ask AI: "Change my generator to produce 4 images simultaneously using Promise.all and display them in a 2x2 grid."

3. Turn it into a product

Add user accounts (so people don't use your API key) and a credit system (each user gets 10 free generations, then pays for more). Ask AI: "Add Clerk authentication and a Stripe payment system to my image generator so users pay for credits."

FAQ

What to Learn Next

You've built your first AI-powered app. Here's where to go from here: