AI Content Generator
Build a tool that turns a short brief into marketing copy, blog outlines, or social posts using an LLM API, with saved history and export options.
Technology used
- Next.js
- TypeScript
- Claude API
- Tailwind CSS
- Postgres
AI coding tools you'll need
- Claude Code
- Cursor
Skills you'll practice
- How to design structured prompts that reliably produce a specific output format
- How to build a form-driven UI that turns user input into a well-formed LLM prompt
- How to stream and render generated content, including basic Markdown formatting
- How to save generation history per user and let them regenerate or edit a result
- How to implement a simple usage/credit system to control API cost
Step-by-step build
- 1
Scaffold and connect the API
Set up Next.js with TypeScript and connect to an LLM API.
- 2
Design the input form
Add fields for content type (blog outline, ad copy, social post), topic, tone, and target length.
- 3
Build a prompt template
Write a function that turns form fields into a structured, consistent LLM prompt.
- 4
Create the generate route
Send the prompt to the LLM from an API route and stream the response back.
- 5
Render the output
Render the streamed output with Markdown formatting and a 'copy to clipboard' button.
- 6
Add regeneration
Add a 'regenerate' option that resends the same prompt with a note to vary the result.
- 7
Persist generations
Save each generation's input and output to a database tied to a user account.
- 8
Add a credit system
Track generations per user per billing period and block further use once a limit is hit.
- 9
Add export options
Support copy-to-clipboard and download as .txt or .md.
- 10
Add authentication and deploy
Add auth so generation history is private per account, then deploy.
Paste this into your AI coding tool
Adapt the placeholders in brackets to your own product, then iterate on the result step by step rather than expecting a perfect first pass.
Build an AI content generator web app using Next.js App Router, TypeScript, Tailwind CSS and the Claude API. Build a form where a user selects a content type (blog post outline, ad copy, social media post, product description), enters a topic, selects a tone (professional, casual, playful), and sets a target length. On submit, build a structured prompt from these fields and call a POST /api/generate route that streams the model's response back to the client, rendering it with Markdown support as it streams in. Add a 'Copy to clipboard' button and a 'Regenerate' button that resends the same request. Add simple email/password authentication, and save every generation (inputs and output) to a Postgres table tied to the logged-in user, with a /history page listing past generations that can be reopened. Implement a basic credit system: each user gets 20 free generations per month, tracked in the database, with the generate button disabled and a clear message once the limit is reached.
SEO considerations
- The generator app itself is likely behind auth — keep it noindexed, but give the marketing/landing page its own indexable metadata
- If generated content is ever published publicly, such as an example gallery, disclose that it's AI-generated
- Avoid publishing raw AI output as your own site's content without human review — thin, unedited AI content can hurt search rankings
- Add structured data and metadata only to the marketing and pricing pages, not the authenticated app itself
Deployment steps
- Store the LLM API key server-side only, never in a client-exposed environment variable
- Provision a Postgres database for user accounts, credits and generation history
- Deploy to a host that supports streaming responses
- Set per-user rate limits at the API layer in addition to the credit system to prevent abuse
- Monitor token usage and cost per generation to keep the free-tier credit allowance sustainable
Related projects
AI Chatbot for a Website
Build an embeddable AI-powered chat widget that answers questions using an LLM API, with streaming responses and persisted conversation history.
Markdown-Powered Blog
Build a statically generated blog with Markdown/MDX posts, categories, and per-post SEO metadata — a solid project for learning content-driven Next.js sites.
AI-Powered SaaS Landing Page
Build a fast marketing landing page for a SaaS product with a hero, feature grid, pricing table, and an email capture form wired to a real API route.
Ready to build ai content generator?
Pick a tool from the directory, paste in the starter prompt, and iterate from there.