Fundamentals
Invisible AI
Conversational AI
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.
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.
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.
pnpm devhttp://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.
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.
Create `actions.ts`: Inside the app/(3-summarization)/summarization/ directory, create a new file named actions.ts.
Start with the basic setup:
typescript
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.
Let's connect the button in page.tsx to our new server action. The file already has basic state set up.
page.tsx:typescript
typescript
typescript
SummaryCard component, displaying it only when the summary state has data.typescript
Check your browser (ensure pnpm run dev is active). Click "Summarize".
The initial summary might work, but it could be verbose or unstructured.
.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:
.describe() to every field.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
generateObject and a schemaReal-world summarization often involves content that exceeds token limits.
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.
Mark this chapter as finished to continue
Mark this chapter as finished to continue