Every writer faces the same moment of hesitation: you type a book title, then stop. Should it be in italics? Quotes? Which style guide applies? MLA, APA, Chicago, or AP? As a developer, I realized this was a problem I could solve with a simple web tool.
But building it wasn’t just about creating another online utility. I wanted to understand how to combine a clean Next.js frontend with OpenAI’s API to generate context-aware book titles that follow proper formatting rules.
Here’s how I built it - and what I learned along the way.
The Architecture
I chose Next.js 14 with the App Router for this project. The stack is simple but powerful:
<ul>
<li>Next.js 14 (App Router) - server-side rendering and API routes</li>
<li>Tailwind CSS - rapid UI development</li>
<li>OpenAI API (GPT-4) - title generation with style guide awareness</li>
<li>Vercel - deployment and hosting</li>
</ul>
Why Next.js? The API routes feature lets me keep the OpenAI key secure on the server, never exposing it to the client.
The API Route — Keeping Secrets Safe
Here’s the core API endpoint (app/api/generate-title/route.ts):
import { NextResponse } from ‘next/server’;
import OpenAI from ‘openai’;
const openai = new OpenAI({
apiKey: process.env.OPENAI_API_KEY,
});
export async function POST(request: Request) {
const { topic, style } = await request.json();
const prompt = `Generate a book title about “${topic}” in ${style} style.
Return only the title, properly formatted with correct capitalization.`;
const response = await openai.chat.completions.create({
model: ‘gpt-4’,
messages: [{ role: ‘user’, content: prompt }],
temperature: 0.8,
max_tokens: 30,
});
return NextResponse.json({
title: response.choices[0].message.content
});
}
The key insight: never put your OpenAI key in client-side code. Next.js API routes run on the server, keeping credentials secure.
The Frontend - Simple and Fast
The UI is intentionally minimal. Users enter a topic and select a style guide (MLA, APA, Chicago, or AP). Here’s the component logic:
‘use client’;
import { useState } from ‘react’;
export default function TitleGenerator() {
const [topic, setTopic] = useState(‘’);
const [style, setStyle] = useState(‘MLA’);
const [title, setTitle] = useState(‘’);
const [loading, setLoading] = useState(false);
const generateTitle = async () =&gt; {
setLoading(true);
const res = await fetch(‘/api/generate-title’, {
method: ‘POST’,
headers: { ‘Content-Type’: ‘application/json’ },
body: JSON.stringify({ topic, style }),
});
const data = await res.json();
setTitle(data.title);
setLoading(false);
};
return (
&lt;div className=“max-w-2xl mx-auto p-6”&gt;
&lt;h1 className=“text-3xl font-bold”&gt;Book Title Generator&lt;/h1&gt;
&lt;input
type=“text”
placeholder=“Enter a topic…”
value={topic}
onChange={(e) =&gt; setTopic(e.target.value)}
className=“w-full p-3 border rounded mt-4”
/&gt;
&lt;select
value={style}
onChange={(e) =&gt; setStyle(e.target.value)}
className=“w-full p-3 border rounded mt-3”
<blockquote></blockquote>
&lt;option value=“MLA”&gt;MLA&lt;/option&gt;
&lt;option value=“APA”&gt;APA&lt;/option&gt;
&lt;option value=“Chicago”&gt;Chicago&lt;/option&gt;
&lt;option value=“AP”&gt;AP&lt;/option&gt;
&lt;/select&gt;
&lt;button
onClick={generateTitle}
disabled={loading}
className=“w-full bg-blue-600 text-white p-3 rounded mt-3”
<blockquote></blockquote>
{loading ? ‘Generating…’ : ‘Generate Title’}
&lt;/button&gt;
{title &amp;&amp; (
&lt;div className=“mt-6 p-4 bg-gray-100 rounded”&gt;
&lt;p className=“text-xl font-semibold”&gt;{title}&lt;/p&gt;
&lt;p className=“text-sm text-gray-500 mt-2”&gt;Style: {style}&lt;/p&gt;
&lt;/div&gt;
)}
&lt;/div&gt;
);
}
The Challenge - Formatting Rules
The tricky part wasn’t generating titles - it was generating titles that follow proper formatting rules. MLA, APA, and Chicago require italics for full-length books, while AP uses quotation marks.
I solved this by including formatting instructions in the prompt:
const prompt = `Generate a book title about “${topic}” in ${style} style.
<ul>
<li>If ${style} is MLA, APA, or Chicago: wrap the title in asterisks (for italics)</li>
<li>If ${style} is AP: wrap the title in “quotation marks”</li>
<li>Capitalize using title case (first and last word capitalized, major words capitalized)</li>
</ul>
Return only the formatted title.`;
The asterisks get rendered as &lt;em&gt; tags in the UI, and quotation marks display correctly for AP style.
Lessons Learned
Lesson 1: API costs add up. Each generation costs a fraction of a cent, but at scale it matters. I added a simple rate limiter using Vercel’s Edge Config.
Lesson 2: Caching is your friend. I cached common topic+style combinations using Redis. No point regenerating “sci-fi book title in MLA” thirty times.
Lesson 3: Markdown rendering. I used react-markdown to render the generated titles with proper formatting. The title becomes italicized &lt;em&gt;title&lt;/em&gt;.
The Result
The tool is live and free to use. Writers can now generate book titles formatted for their specific style guide - no more guessing or Googling mid-sentence.
If you’re curious, you can try it here:
Free Tools Valley - Book Title Generator
<a href="https://freetoolsvalley.com/book-title-generator/" target="_blank" rel="noopener nofollow">https://freetoolsvalley.com/book-title-generator/</a>
Final Thoughts
Building this tool taught me that the best developer projects solve real problems — even small ones. Every writer I know has paused to ask “should this be italicized?” Now they don’t have to.
The code is clean, the API is secure, and the tool actually helps people. That’s a win in my book.

Become a cool developer with Dev Source! Your ultimate dev source for resources, insights, and a thriving community to learn, grow, and stay ahead every single day!

Dev Source

A developer walks through building a free book title generator using Next.js 14 App Router, Tailwind CSS, and OpenAI's GPT-4 API. The post covers keeping API keys secure via server-side API routes, prompt engineering to enforce MLA/APA/Chicago/AP formatting rules, and lessons learned around rate limiting, Redis caching, and markdown rendering. The finished tool is linked at the end as a free product.

How I Built a Free Book Title Generator with Next.js and OpenAI