DEV Community

S M Tahosin
S M Tahosin

Posted on

Build a Free AI Writing Tool with Next.js and Google Gemini (2026 Guide)

#nextjs #tutorial #ai #javascript

Building AI tools doesn't have to be expensive or complicated. In this tutorial, I'll show you how to build a free AI writing assistant using Next.js and Google Gemini's free tier.

What We're Building

A web app where users can:

  • Generate blog posts, emails, and cover letters
  • Choose tone (professional, casual, creative)
  • Get results in seconds
  • No signup needed

Live demo: maxai-writer.pages.dev

Prerequisites

Step 1: Create Next.js Project 

npx create-next-app@latest ai-writer --typescript --tailwind --app
cd ai-writer
npm install lucide-react
Enter fullscreen mode Exit fullscreen mode

Step 2: Backend API Route (Keep Key Secure)

Never expose your API key in frontend code. Create a server-side API route:

// app/api/generate/route.ts
import { NextRequest, NextResponse } from "next/server";

export const runtime = "edge";

export async function POST(req: NextRequest) {
  const { prompt, maxTokens } = await req.json();
  const apiKey = process.env.GEMINI_API_KEY;

  const res = await fetch(
    `https://generativelanguage.googleapis.com/v1beta/models/gemini-2.0-flash:generateContent?key=${apiKey}`,
    {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        contents: [{ parts: [{ text: prompt }] }],
        generationConfig: { maxOutputTokens: maxTokens || 2000 },
      }),
    }
  );

  const data = await res.json();
  const text = data?.candidates?.[0]?.content?.parts?.[0]?.text || "";
  return NextResponse.json({ text });
}
Enter fullscreen mode Exit fullscreen mode

Step 3: Frontend UI 

"use client";
import { useState } from "react";

export default function Home() {
  const [input, setInput] = useState("");
  const [output, setOutput] = useState("");
  const [loading, setLoading] = useState(false);
  const [tool, setTool] = useState("blog");

  const tools = {
    blog: "Write a blog post about:",
    email: "Write a professional email about:",
    cover: "Write a cover letter for:",
  };

  const generate = async () => {
    setLoading(true);
    const prompt = `${tools[tool]} ${input}. Be detailed and professional.`;
    const res = await fetch("/api/generate", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ prompt, maxTokens: 1500 }),
    });
    const data = await res.json();
    setOutput(data.text);
    setLoading(false);
  };

  return (
    <main className="max-w-2xl mx-auto p-8">
      <h1 className="text-3xl font-bold mb-6">AI Writing Tool</h1>
      <select value={tool} onChange={(e) => setTool(e.target.value)}
        className="w-full p-3 border rounded mb-4">
        <option value="blog">Blog Post</option>
        <option value="email">Email</option>
        <option value="cover">Cover Letter</option>
      </select>
      <textarea value={input} onChange={(e) => setInput(e.target.value)}
        placeholder="What should I write about?"
        className="w-full p-3 border rounded mb-4 h-24" />
      <button onClick={generate} disabled={loading}
        className="w-full bg-blue-600 text-white py-3 rounded font-bold">
        {loading ? "Writing..." : "Generate"}
      </button>
      {output && (
        <div className="mt-6 p-4 bg-gray-50 rounded whitespace-pre-wrap">
          {output}
        </div>
      )}
    </main>
  );
}
Enter fullscreen mode Exit fullscreen mode

Step 4: Deploy Free on Cloudflare Pages 

# Build static export
npm run build

# Deploy
wrangler pages deploy out --project-name ai-writer
Enter fullscreen mode Exit fullscreen mode

Set GEMINI_API_KEY in Cloudflare Pages → Settings → Environment Variables.

Key Takeaways

  1. Google Gemini free tier gives 15 RPM — enough for a personal tool
  2. Always use backend routes for API keys
  3. Static export + Cloudflare Pages = free hosting with unlimited bandwidth
  4. Edge runtime keeps response times fast

Source Code

GitHub logo x-tahosin / maxai-writer

Free AI Writing Tools - Resume Builder, Cover Letter Generator, Email Writer | Powered by Gemini

✍️ MaxAI Writer

6 Free AI Writing Tools — No Signup Required

Live Demo

Next.js Gemini TypeScript Tailwind

Features

Tool Description
📄 Resume Builder AI-generated professional resumes
💼 Cover Letter Tailored cover letters for any job
✉️ Email Writer Professional emails in seconds
📝 Blog Post SEO-optimized blog content
📋 Summary Summarize long text instantly
🔄 Rewriter Paraphrase and improve text

Tech Stack

  • Next.js with static export
  • Google Gemini 2.0 Flash via secure backend proxy
  • Tailwind CSS for styling
  • Cloudflare Pages for hosting

Quick Start

git clone https://github.com/x-tahosin/maxai-writer.git
cd maxai-writer
npm install
npm run build
Enter fullscreen mode Exit fullscreen mode

Made with ❤️ by Tahosin


View on GitHub


Found this helpful? Follow me for more AI tutorials!

Top comments (0)