I Built an AI Text Summarizer in One Night with Claude + ...

It was a Monday. I had the Anthropic API key provisioned, Next.js scaffolded, and one self-imposed deadline: ship a working demo live on the public internet before midnight.

A few hours later, https://ai-summarizer-next.vercel.app/ went live. You paste any block of text, pick a style — concise, bullet points, executive summary, or ELI5 — and Claude Sonnet 4.6 gives you back a clean summary in about a second.

Here's how I did it, what the code looks like, and a few things that surprised me.

The problem

Every day, we skim more words than we read. Articles, meeting notes, policy documents, contract clauses, research papers — the wall of text never stops. Existing summarization tools are either buried inside other products (Notion AI, Gmail) or too generic (just "tl;dr" with no control over tone or length).

I wanted something trivially fast, with a few quality knobs, and completely free for the user.

The stack

Next.js 14 (App Router) — one framework for UI + API in one repo
TypeScript — catches the silly mistakes I always make at 10 PM
Tailwind CSS — styling without leaving the TSX file
Anthropic SDK — Claude Sonnet 4.6 as the brain
Vercel — one git push and the world has access

Total cost: $0. Anthropic gives generous free credits for new accounts, Vercel's hobby tier is free, and everything else is open-source.

The prompt (simpler than you'd think)

The entire "AI" logic is one parameterised system prompt:

You are a summarization expert. Summarize in a ${style} style.
Return ONLY the summary.

That's it. I spent more time tuning the UI than the prompt. Claude is smart enough that you don't need to bludgeon it with instructions — you need to be specific about what you want and quiet about everything else. The line Return ONLY the summary is what keeps the model from prefacing every response with "Here's a summary:".

The API route

app/api/summarize/route.ts:

import Anthropic from '@anthropic-ai/sdk';
import { NextRequest, NextResponse } from 'next/server';

const client = new Anthropic();

export async function POST(req: NextRequest) {
  try {
    const { text, style } = await req.json();
    const msg = await client.messages.create({
      model: 'claude-sonnet-4-6',
      max_tokens: 1024,
      system: `You are a summarization expert. Summarize in a ${style || 'concise'} style. Return ONLY the summary.`,
      messages: [{ role: 'user', content: text }],
    });
    return NextResponse.json({ summary: (msg.content[0] as any).text });
  } catch (err: any) {
    return NextResponse.json({ error: err.message }, { status: 500 });
  }
}

Thirty lines. One Claude call. That's the whole backend.

The UI

app/page.tsx is a textarea, a dropdown, and a button. A feature doesn't have to look complicated to be useful:

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

export default function Home() {
  const [text, setText] = useState('');
  const [style, setStyle] = useState('concise');
  const [summary, setSummary] = useState('');
  const [loading, setLoading] = useState(false);

  async function summarize() {
    setLoading(true);
    const r = await fetch('/api/summarize', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ text, style }),
    });
    const d = await r.json();
    setSummary(d.summary || d.error);
    setLoading(false);
  }

  return (
    <main className="max-w-2xl mx-auto p-8">
      <h1 className="text-3xl font-bold mb-2">AI Summarizer</h1>
      <p className="text-gray-600 mb-4">Powered by Claude Sonnet 4.6</p>
      <textarea className="w-full p-3 border rounded-lg mb-3" rows={8}
        value={text} onChange={e => setText(e.target.value)}
        placeholder="Paste text to summarize..." />
      <div className="flex gap-2 mb-4">
        <select className="border rounded-lg p-2" value={style}
          onChange={e => setStyle(e.target.value)}>
          <option value="concise">Concise</option>
          <option value="bullet points">Bullet Points</option>
          <option value="executive summary">Executive Summary</option>
          <option value="ELI5">ELI5</option>
        </select>
        <button onClick={summarize} disabled={loading || !text}
          className="bg-black text-white px-6 py-2 rounded-lg disabled:opacity-50">
          {loading ? 'Summarizing...' : 'Summarize'}
        </button>
      </div>
      {summary && (
        <div className="bg-gray-100 p-4 rounded-lg whitespace-pre-wrap">{summary}</div>
      )}
    </main>
  );
}

Deploying to Vercel

Three shell commands and one web click:

git init && git add . && git commit -m "AI Summarizer on Next.js"
git remote add origin https://github.com/YOUR_USERNAME/ai-summarizer-next.git
git push -u origin main

Then on vercel.com/new:

Import the repo
Add environment variable: ANTHROPIC_API_KEY = your key
Click Deploy

About 60 seconds later the URL is live.

The single most important thing to get right: the environment variable must be set BEFORE you click Deploy. If you forget, the build succeeds but every request hits a 500. Add the env var first.

Things that surprised me

How boring the code got. I expected LLM-powered apps to need careful error handling, streaming, complicated state — but Claude is quick enough on a 1k-token summary that a plain request/response flow feels instant.
How clean the Anthropic SDK is. new Anthropic() just works if the env var is named ANTHROPIC_API_KEY. No config object, no initialisation dance.
How much the UI matters. I spent more time on textarea padding and the button's disabled state than on the API integration. That felt wrong, but users judge trust from design, not from clever prompts.

Try it + see the code

Live demo: https://ai-summarizer-next.vercel.app/
GitHub: [https://github.com/yramstech/ai-summarizer-next/]

If you've been putting off your first Claude API project — it's genuinely a Tuesday-night, one-sitting build. Pick a narrow problem, resist the urge to add features, and hit deploy before midnight.

推荐订阅源

DEV Community