Blog - Content Writing Tips for AI & SaaS

AI writing tools are everywhere — but building your own is easier than you think. In this tutorial, you'll create a simple AI content generator using:

Next.js 14 (App Router)
OpenAI's Chat Completions API
A server-side API route
A minimal Tailwind UI

By the end, you'll have a working app where users can enter a topic and generate a content outline, ideas, or full paragraphs.

⭐ What We're Building

A simple interface:

Input field: "Write about…"
Dropdown: Outline, Ideas, Paragraph, Full Article
Button: Generate
Output area: Displays AI-generated content

⭐ Prerequisites

You should have:

Node.js 18+
Basic Next.js knowledge
An OpenAI API key
TailwindCSS (optional but used)

⭐ Step 1 — Create the Project

npx create-next-app ai-content-generator
cd ai-content-generator
npm install

Add Tailwind:

npx tailwindcss init -p

Update configs (standard setup).

⭐ Step 2 — Create the API Route

Create the file: src/app/api/generate/route.ts

import { NextResponse } from "next/server";

export async function POST(req: Request) {
  const { topic, type } = await req.json();

  if (!topic || !type) {
    return NextResponse.json({ error: "Missing fields" }, { status: 400 });
  }

  const prompt = `Generate a ${type} about: ${topic}. 
  Make it clear, structured, and helpful.`;

  const res = await fetch("https://api.openai.com/v1/chat/completions", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      Authorization: `Bearer ${process.env.OPENAI_API_KEY}`,
    },
    body: JSON.stringify({
      model: "gpt-4o-mini",
      messages: [
        { role: "system", content: "You are a helpful content AI." },
        { role: "user", content: prompt },
      ],
      temperature: 0.7,
    }),
  });

  const data = await res.json();
  return NextResponse.json({ output: data.choices[0].message.content });
}

⭐ Step 3 — Add the UI

Create a page: src/app/page.tsx

"use client";

import React, { useState } from "react";

export default function Home() {
  const [topic, setTopic] = useState("");
  const [type, setType] = useState("outline");
  const [output, setOutput] = useState("");
  const [loading, setLoading] = useState(false);

  async function generate() {
    if (!topic.trim()) return;
    setLoading(true);

    const res = await fetch("/api/generate", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ topic, type }),
    });

    const data = await res.json();
    setOutput(data.output);
    setLoading(false);
  }

  return (
    <main className="min-h-screen flex items-center justify-center p-6">
      <div className="max-w-xl w-full bg-white shadow rounded p-6 space-y-4">
        <h1 className="text-2xl font-bold">AI Content Generator</h1>

        <input
          className="w-full border p-2 rounded"
          placeholder="Enter topic... e.g. 'Benefits of remote work'"
          value={topic}
          onChange={(e) => setTopic(e.target.value)}
        />

        <select
          className="w-full border p-2 rounded"
          value={type}
          onChange={(e) => setType(e.target.value)}
        >
          <option value="outline">Outline</option>
          <option value="ideas">Ideas</option>
          <option value="paragraph">Paragraph</option>
          <option value="full article">Full Article</option>
        </select>

        <button
          className="w-full bg-purple-600 text-white p-2 rounded"
          onClick={generate}
        >
          {loading ? "Generating..." : "Generate Content"}
        </button>

        {output && (
          <div className="mt-4 p-4 border rounded bg-gray-50 whitespace-pre-wrap">
            {output}
          </div>
        )}
      </div>
    </main>
  );
}

⭐ Step 4 — Add Your OpenAI Key

Create .env.local:

OPENAI_API_KEY=sk-xxxx

Restart the app.

⭐ Step 5 — Improve the Prompt (Optional)

You can make your generator more structured:

const prompt = `
You are an expert content writer.
Generate a ${type} for the topic: "${topic}".

Guidelines:
- Keep the tone clear and informative
- Avoid unnecessary fluff
- Organize information logically
- Add bullet points when needed
`;

This improves output quality dramatically.

⭐ Step 6 — Deploy

Deploy on Vercel:

vercel deploy

Add OPENAI_API_KEY to your Vercel Environment Variables.

⭐ Results

You now have:

✔ A working AI content generator
✔ API route
✔ Frontend UI
✔ Prompt engineering basics
✔ Real Next.js + AI integration
✔ Portfolio-ready project

⭐ Possible Improvements

Add streaming instead of static output
Add templates ("Blog Post", "Email", "Social Copy")
Add user authentication
Add a history of generated items
Add a UI editor for customizing tone/style

These turn it into a full product.

⭐ Conclusion

You just built a practical AI content generator using Next.js + OpenAI.

This same flow powers:

AI writing apps
Marketing tools
SaaS productivity tools
Internal automation systems

It's a great foundation for deeper AI products.

How to Build an AI Content Generator with Next.js & OpenAI