Automatic Summarization

You've classified unstructured data with generateObject which is very useful. Now you'll tackle information overload. Long threads, dense articles, and feedback need summarization - a "TL;DR" feature to empower your users and reduce the noise of day-to-day work. You will build a summarization feature with generateObject to condense comments.

Too Much Text, Too Little Time

We've all been there. You come back to a Slack channel or email thread with dozens of messages. Reading everything takes time you don't have, but you need the gist. Manual summarization is slow and prone to missing key details.

This is a perfect job for AI.

We can feed an entire conversation to the LLM and ask it to pull out the most essential information.

Setup: The Comment Thread App

Project Setup

Continuing with the same codebase from AI SDK Dev Setup. For this section, you'll find the classification example files in the app/(2-classification)/ directory.

Navigate to the app/(3-summarization)/summarization/ directory in your project.

1. Run the Dev Server: If it's not already running, start it: pnpm dev
2. Open the Page: Navigate to http://localhost:3000/summarization in your browser.

You'll see a simple page displaying a list of comments (loaded from messages.json). Our task is to make the "Summarize" button functional.

Step 1: Building the Summarization Action

We'll use a Next.js Server Action to handle the AI call.

What are Server Actions?

Next.js Server Actions let you run secure server-side code directly from your React components without manually creating API routes. They're perfect for AI features because they keep your API keys and sensitive logic on the server while providing a seamless developer experience for calling backend functions from the frontend. Learn more about Server Actions.

1. Create `actions.ts`: Inside the app/(3-summarization)/summarization/ directory, create a new file named actions.ts.

2. Start with the basic setup:

typescript

3. Now implement the schema and generateObject call:

typescript

generateObject is versatile. You can use it with a Zod schema anytime you need structured JSON output from an LLM, whether for classification, summarization details, or data extraction.

Step 2: Wiring Up the Frontend

Let's connect the button in page.tsx to our new server action. The file already has basic state set up.

1. Add the necessary imports at the top of page.tsx:

typescript

2. Add state for the summary (after the existing loading state):

typescript

3. Replace the button's onClick handler with the actual implementation and add a loading state:

typescript

1. Conditionally Render the Summary: Add the SummaryCard component, displaying it only when the summary state has data.

typescript

Step 3: Run and Observe (Initial Summary)

Check your browser (ensure pnpm run dev is active). Click "Summarize".

The initial summary might work, but it could be verbose or unstructured.

Step 4: Refining with .describe()

Let's improve the summary using Zod's .describe() method in actions.ts to give the AI more precise instructions.

Update the schema in actions.ts:

typescript

Key changes to the schema code:

• Added .describe() to every field.
• Provided specific guidance on length and content focus (e.g., "Include names").

Performance Note

Summarizing very long conversations can take time and might hit model context limits or timeouts. For production apps with extensive text, consider techniques like chunking the input or using models with larger context windows.

Save actions.ts, refresh the browser page, and click "Summarize" again. The output should now be much cleaner and follow your instructions more closely, especially the takeaways with assigned names!

💡 Constraining Summary Output

Want more control over summary length and format? Try asking an AI assistant:

text

Key Takeaways

• Summarization is a core Invisible AI task for handling information overload
• The AI SDK makes it easy to summarize using generateObject and a schema
• Structured extraction and summarization are powerful together

Further Reading: Handling Large Inputs for Summarization

Real-world summarization often involves content that exceeds token limits.

• MapReduce for LLM Summarization — Breaking down large documents into manageable chunks
• Recursive Summarization Techniques — OpenAI's guide to summarizing large content
• Token Window Management — Best practices for working within token limits

Next up: Precise Data with Structured Extraction

You've classified and summarized so now you're ready to get even more precise by extracting specific details from text using generateObject and refined Zod schemas.

This type of invisible AI starts to make mundane form entry a thing of the past.

In the next lesson, you'll tackle structured extraction for appointments, handling challenges like relative dates with just a few tweaks.