Building AI-Powered Content Generators with ChatGPT API and Next.js
Introduction
The integration of Large Language Models (LLMs) into web applications has revolutionized how we approach content creation. As developers, we can now build sophisticated AI-powered tools that generate human-like text, code, and creative content. In this comprehensive guide, we'll build a practical content generator using OpenAI's ChatGPT API and Next.js, implementing streaming responses and robust error handling.
Setting Up the Foundation
First, let's create a new Next.js project and install the necessary dependencies:
npx create-next-app@latest ai-content-generator --typescript --tailwind --eslint
cd ai-content-generator
npm install openaiCreate a .env.local file to store your OpenAI API key:
OPENAI_API_KEY=your-api-key-here
NEXT_PUBLIC_APP_URL=http://localhost:3000Creating the API Route
Let's build an API route that handles content generation requests. Create app/api/generate/route.ts:
import OpenAI from 'openai';
import { NextRequest, NextResponse } from 'next/server';
const openai = new OpenAI({
apiKey: process.env.OPENAI_API_KEY,
});
export async function POST(request: NextRequest) {
try {
const { prompt, contentType, tone, length } = await request.json();
const systemPrompt = `You are a professional content creator. Generate ${contentType} content with a ${tone} tone. The content should be approximately ${length} words long.`;
const completion = await openai.chat.completions.create({
model: 'gpt-3.5-turbo',
messages: [
{ role: 'system', content: systemPrompt },
{ role: 'user', content: prompt }
],
max_tokens: Math.min(length * 2, 4000),
temperature: 0.7,
stream: true
});
const encoder = new TextEncoder();
const stream = new ReadableStream({
async start(controller) {
for await (const chunk of completion) {
const content = chunk.choices[0]?.delta?.content || '';
controller.enqueue(encoder.encode(content));
}
controller.close();
},
});
return new Response(stream, {
headers: {
'Content-Type': 'text/plain; charset=utf-8',
'Cache-Control': 'no-cache',
},
});
} catch (error) {
console.error('OpenAI API error:', error);
return NextResponse.json(
{ error: 'Failed to generate content' },
{ status: 500 }
);
}
}Building the Frontend Interface
Now let's create a user-friendly interface for our content generator. Replace the contents of app/page.tsx:
'use client';
import { useState } from 'react';
interface GenerationParams {
prompt: string;
contentType: string;
tone: string;
length: number;
}
export default function ContentGenerator() {
const [params, setParams] = useState({
prompt: '',
contentType: 'blog post',
tone: 'professional',
length: 300
});
const [generatedContent, setGeneratedContent] = useState('');
const [isGenerating, setIsGenerating] = useState(false);
const [error, setError] = useState('');
const handleGenerate = async () => {
if (!params.prompt.trim()) {
setError('Please enter a prompt');
return;
}
setIsGenerating(true);
setError('');
setGeneratedContent('');
try {
const response = await fetch('/api/generate', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(params),
});
if (!response.ok) {
throw new Error('Failed to generate content');
}
const reader = response.body?.getReader();
const decoder = new TextDecoder();
if (reader) {
while (true) {
const { done, value } = await reader.read();
if (done) break;
const chunk = decoder.decode(value);
setGeneratedContent(prev => prev + chunk);
}
}
} catch (err) {
setError('Failed to generate content. Please try again.');
} finally {
setIsGenerating(false);
}
};
return (
AI Content Generator