# How to Add AI Text Summarization to Your App (Copy-Paste Prompts Included)

- Tool: App Features
- Last updated: July 2026

## TL;DR

AI text summarization needs three pieces: an input layer that accepts text or a URL, a backend Edge Function or API route that calls an LLM (Anthropic claude-sonnet-4-5 or OpenAI gpt-4o-mini) with streaming enabled, and a display card that shows the summary with copy-to-clipboard. With Lovable or V0 you can ship a working summarize button in 2-4 hours. Running costs start at $0 for low volume and reach $10-30/mo at 1,000 active users depending on document length.

## What an AI Text Summarization Feature Actually Is

Text summarization adds a button that distils a long article, document, or page into a concise output — a 3-sentence TL;DR, a bullet-point list, or a structured brief. Users expect it to feel instant: words should appear token by token rather than arriving after a multi-second blank wait. The feature has two variants: paste-and-summarize (user supplies the text directly) and URL-based (the app fetches and strips the page, then summarizes it). The former is simpler and works with any LLM API call; the latter requires a scraping layer like Firecrawl. The real product decisions are output format, input length limits, daily usage caps for cost control, and whether anonymous users can access the feature.

## Anatomy of the Feature

Six components. The streaming handler and the rate-limit layer are where AI tools most often generate incomplete code — be explicit about both in your prompt.

- **Text input / content extractor** (ui): A shadcn/ui Textarea for direct text paste, with an optional URL input field. When a URL is submitted, the app calls Firecrawl (available as a native Lovable connector) or a server-side Cheerio scraper to fetch and clean the page body before summarization.
- **Summarization Edge Function** (backend): Supabase Edge Function (Deno) that accepts input text and format preferences, checks usage limits, then calls Anthropic claude-sonnet-4-5 via @anthropic-ai/sdk with streaming enabled — or OpenAI gpt-4o-mini for cost-sensitive high-volume apps. Returns a ReadableStream.
- **Streaming response handler** (ui): A React hook that consumes the ReadableStream from the Edge Function using `for await (const chunk of stream)` and appends each decoded text chunk to component state. Updates trigger real-time re-renders so users see words appear as they generate.
- **Summary display card** (ui): A shadcn/ui Card with prose-styled text output, a word count badge showing original vs summary length (e.g. '1,240 words → 87 words'), and a copy button using navigator.clipboard.writeText(). Formats markdown output from the LLM with a lightweight renderer.
- **Usage and rate limit layer** (backend): A Supabase usage_limits table tracking daily summarization count per user_id with a reset_at timestamp. The Edge Function checks this before calling the LLM — anonymous users are capped at 3/day, authenticated users at a configurable limit. Returns a structured 429 response when exceeded.
- **Summarization history** (data): An optional summaries table storing user_id, source_text_hash (SHA-256), summary_text, model_used, tokens_used, and created_at. Enables revisiting past summaries and — critically — returning cached summaries when the same source text is submitted again, avoiding duplicate LLM calls.

## Data model

Two tables cover the summarization data model. Run this in the Supabase SQL editor (Dashboard → SQL editor → New query):

```sql
create table public.summaries (
  id uuid primary key default gen_random_uuid(),
  user_id uuid references auth.users(id) on delete cascade,
  source_text_hash text not null,
  summary text not null,
  model_used text not null,
  tokens_used integer,
  created_at timestamptz not null default now()
);

alter table public.summaries enable row level security;

create policy "Users can read own summaries"
  on public.summaries for select
  using (auth.uid() = user_id);

create policy "Service role manages summaries"
  on public.summaries for all
  using (true)
  with check (true);

create index summaries_hash_idx
  on public.summaries (source_text_hash);

create index summaries_user_idx
  on public.summaries (user_id, created_at desc);

create table public.usage_limits (
  user_id text primary key,
  daily_count integer not null default 0,
  reset_at timestamptz not null default (now() + interval '1 day')
);

alter table public.usage_limits enable row level security;

create policy "Users can read own usage"
  on public.usage_limits for select
  using (auth.uid()::text = user_id);

create policy "Service role manages usage"
  on public.usage_limits for all
  using (true)
  with check (true);
```

user_id in usage_limits is text (not uuid) to support anonymous users identified by session ID alongside authenticated users. The source_text_hash index makes cache lookups instant — before calling the LLM, the Edge Function checks if this hash already has a recent summary.

## Build paths

### Lovable — fit 5/10, 2-3 hours

The best fit for summarization. Firecrawl is a native Lovable connector for URL scraping, Supabase Edge Functions handle Anthropic API calls with Secrets, and streaming works on the published URL.

1. Create a new Lovable project with Lovable Cloud enabled so auth and the Supabase database are provisioned automatically
2. Add your Anthropic API key in Cloud tab → Secrets as ANTHROPIC_API_KEY
3. Optionally connect Firecrawl in the Cloud tab connectors if you want URL-based summarization
4. Paste the prompt below into Agent Mode and let it build the summarize page, Edge Function, and usage tracking
5. Click Publish → Update and test streaming on the published HTTPS URL — streaming does not work inside the preview iframe

Starter prompt:

```
Build an AI text summarization feature. Create: 1) A Summarize page with a shadcn/ui Textarea (min 100 characters, max 8,000 tokens worth of text — show character count), an optional URL input field that uses Firecrawl to fetch page content when a URL is submitted, a Format toggle between 'Short (3 sentences)' and 'Detailed (bullet points)', a 'Summarize' button that is disabled while processing, and a Summary card below that streams the LLM output token by token as words appear using a ReadableStream consumer. Show a copy-to-clipboard button on the Summary card. Show word counts for original and summary. 2) A Supabase Edge Function 'summarize' that: first checks usage_limits table for the current user_id (use session ID for anonymous users) — reject with 429 if daily_count >= 3 for anonymous or >= 20 for authenticated users; check summaries table for an existing summary with matching source_text_hash (SHA-256 of input text) — return cached result if found; otherwise call Anthropic claude-sonnet-4-5 with streaming, system prompt 'You are a precise summarizer. Return ONLY the summary, no preamble. Short format: exactly 3 sentences. Detailed format: 5-7 bullet points starting with -. Match the source language.', max 1,000 output tokens; save the summary and increment usage count; stream the response back. 3) Handle these states: loading (spinner on button), streaming (words appear), error (429 usage limit with upgrade message, 500 server error with retry button), empty input validation. The feature should work for both anonymous and authenticated users.
```

Limitations:

- Streaming only works on the published URL, not inside Lovable's preview iframe — test after publishing
- Firecrawl URL scraping has a 500 page/mo free limit; heavy URL-based usage needs a paid Firecrawl plan from $16/mo (approx)
- Very long documents over 8,000 tokens must be chunked before submission — AI tools omit chunking logic unless explicitly requested

### V0 — fit 4/10, 3-4 hours

V0's AI SDK v6 has native streaming UI components that integrate cleanly with Vercel serverless functions. Ideal when summarization is part of a larger Next.js app.

1. Prompt V0 with the spec below to generate the Summarize component and Next.js API route
2. In V0's Vars panel, add ANTHROPIC_API_KEY (server-only, no NEXT_PUBLIC_ prefix)
3. Run the SQL schema from this page in the Supabase SQL editor, then add SUPABASE_SERVICE_ROLE_KEY to Vars for usage tracking
4. Publish to Vercel and test streaming on the production URL — do not test in V0's sandbox preview

Starter prompt:

```
Build an AI text summarization feature in Next.js App Router using the Vercel AI SDK. Create: 1) A SummarizePage client component with a shadcn/ui Textarea (character counter, 50-char minimum), an optional URL input with a 'Fetch URL content' button that calls /api/fetch-url, a Format selector (radio group: 'Brief - 3 sentences' / 'Detailed - bullet points'), a Summarize button disabled during streaming, and a SummaryCard component below. SummaryCard shows streamed text using the AI SDK useCompletion hook, a compression badge ('1,240 words → 87 words'), and a copy-to-clipboard button. Show shadcn/ui Skeleton during initial loading before first token. 2) A Next.js Route Handler at app/api/summarize/route.ts using Vercel AI SDK streamText with the Anthropic provider (claude-sonnet-4-5): check Supabase usage_limits table with service role key before calling; if usage exceeded return NextResponse with status 429; otherwise stream the summarization response. System prompt: 'Summarize the following text. Brief: 3 sentences. Detailed: 5-7 bullet points with -. Match the language of the source.' 3) A Route Handler at app/api/fetch-url/route.ts that uses cheerio to scrape and clean page body text from a submitted URL, returning plain text. Handle errors: 429 with 'Daily limit reached', 500 with retry button, invalid URL with inline validation.
```

Limitations:

- ANTHROPIC_API_KEY must be added to Vercel environment variables before the API route will work — set it in the Vars panel before testing
- V0 may generate a localStorage-based history that crashes on server-side rendering; add `typeof window !== 'undefined'` guard or wrap in useEffect
- Cheerio URL scraping is blocked on some sites with bot detection — Firecrawl gives better extraction rates but requires a paid plan at volume

### Custom — fit 3/10, 3-5 days

Custom development is only justified for domain-specific summarization needs that a general LLM handles poorly, or for very high document volumes requiring a cost-optimised pipeline.

1. Fine-tune a summarization model on domain-specific documents (legal contracts, medical reports) using OpenAI fine-tuning or a Hugging Face BART model
2. Build a map-reduce pipeline for documents over 200 pages: chunk at paragraph boundaries, summarize each chunk, then summarize the summaries
3. Implement language detection and route to language-specific models or use multilingual claude-sonnet-4-5 with explicit language instructions
4. Add real-time audio/video transcript summarization using Whisper transcription piped into the summarization pipeline

Limitations:

- Fine-tuning requires thousands of high-quality example summaries — a data labelling effort that takes weeks before model training even begins
- Custom infrastructure only breaks even above roughly 500K summarizations per month compared to API pricing

## Gotchas

- **Streaming works in preview but shows blank in production** — Lovable's preview iframe blocks ReadableStream for security, so the streaming component appears to work in development but renders a blank output in what seems like production. This fools many builders into thinking the Edge Function is broken when the real issue is the test environment. Fix: Always test streaming on the published domain. In Lovable, click Publish → Update and open the live URL. In V0, deploy to Vercel. Never evaluate streaming behaviour inside a sandbox iframe.
- **Long documents throw context_length_exceeded errors** — When a user pastes an article that exceeds the model's context window (typically 8,000 tokens for the prompt plus output), the API returns a context_length_exceeded error. AI tools almost never add input length validation or chunking unless explicitly instructed. Fix: Add a 30,000-character (roughly 7,500 tokens) hard limit on the client with visible character counter feedback. For longer inputs, prompt the AI tool to implement chunk-and-merge: split at sentence boundaries into 3,000-token chunks, summarize each, then run a final summary-of-summaries pass.
- **V0 component crashes with 'localStorage is not defined'** — V0 often uses localStorage to persist summary history between sessions. Next.js renders components on the server where localStorage does not exist, causing an immediate runtime crash on page load before any user interaction. Fix: Wrap all localStorage access in `typeof window !== 'undefined'` checks, or move history loading into a useEffect hook that only runs client-side. If V0 generates this pattern, follow up with 'fix the localStorage SSR error using useEffect' prompt.
- **CORS error when calling Anthropic API directly from the browser** — Builders sometimes prompt AI tools to call the Anthropic API directly from React components. This exposes the API key in the browser bundle and fails with a CORS error because Anthropic's API does not allow cross-origin browser requests by design. Fix: Always route LLM calls through a Supabase Edge Function or Next.js API route. The API key must live in Supabase Secrets or Vercel environment variables — never in client-side code or a NEXT_PUBLIC_ variable.

## Best practices

- Cache summaries by source text hash — if two users submit the same article, return the stored summary instead of calling the LLM twice
- Implement daily usage limits per user before you launch; LLM costs are unbounded without caps and a single abusive user can generate significant bills
- Always stream the LLM response rather than waiting for the full completion — users abandon features that show a blank screen for 3+ seconds
- Match the summary language to the source language by including this in the system prompt — avoid hard-coding English output for multilingual apps
- Validate minimum input length client-side (at least 100 characters) before firing the API call — short inputs produce useless summaries and waste tokens
- Show the compression ratio (original vs summary word count) on the output card — it makes the value of the feature quantifiable and satisfying
- Store tokens_used per summary in the summaries table to track costs by user and catch unexpectedly large inputs early

## Frequently asked questions

### Can I summarize PDFs, not just text?

Yes, but PDFs need an extraction step first. For text-based PDFs (not scanned images), use pdf-parse (Node.js) in your API route to extract the text layer before passing it to the LLM. Scanned PDFs require OCR — Tesseract.js or a cloud service like Google Document AI. Once you have the raw text, summarization works identically.

### How do I prevent the AI from making up details not in the original text?

Include an explicit instruction in the system prompt: 'Summarize only information present in the provided text. Do not add context, explanations, or facts not stated in the source.' Also instruct the model to use shorter, more constrained output — hallucination risk increases with longer outputs that drift away from the source.

### What is the cheapest LLM for text summarization?

OpenAI gpt-4o-mini at approximately $0.15/$0.60 per million input/output tokens is the lowest cost capable model as of 2026. For most summarization tasks — articles, meeting notes, product descriptions — the quality is indistinguishable from claude-sonnet-4-5 at one-tenth the price. Switch to claude-sonnet-4-5 for complex legal or technical documents.

### Can I customize the summary style — bullets versus paragraphs?

Yes. Add a format parameter to your Edge Function call and branch the system prompt based on the selected format: 'Return exactly 3 sentences' for brief prose, '5-7 bullet points starting with -' for detailed bullets. Show this as a toggle in the UI so users choose per summarization. The LLM respects explicit format instructions reliably.

### How do I summarize content from a URL automatically?

Add a URL input field that calls a separate fetch-and-clean step before summarization. Firecrawl (native Lovable connector) handles bot detection and JavaScript-rendered content better than raw fetch. For simpler cases, a server-side Cheerio scraper strips the HTML and returns clean body text in under a second. Never fetch URLs client-side — it triggers CORS errors on most sites.

### Can anonymous users summarize without signing up?

Yes, with a daily cap. Use the user's session ID (or a UUID stored in a cookie) as their identifier in the usage_limits table. Cap anonymous users at 3 summaries per day and authenticated users at a higher limit. This gives new visitors a chance to experience the feature while protecting your LLM budget.

### How do I cache summaries to avoid paying twice for the same content?

Hash the source text (SHA-256) before every summarization call and check the summaries table for a matching hash. If a row exists and was created in the last 7 days, return it directly without calling the LLM. This is especially effective for URL-based summarization where many users submit the same popular articles.

### Is summarization GDPR-compliant if user content is sent to OpenAI?

It depends on what the text contains. Sending personal data to OpenAI requires a Data Processing Agreement (DPA) with OpenAI, which they provide for API customers in their privacy documentation. You must also disclose AI processing in your privacy policy. If users submit documents containing sensitive personal data (medical, financial), consider Anthropic claude-sonnet-4-5 or an on-premise model where data does not leave your infrastructure.

---

Source: https://www.rapidevelopers.com/app-features/ai-powered-text-summarization
© RapidDev — https://www.rapidevelopers.com/app-features/ai-powered-text-summarization