Building an AI blog post summary feature with Vercel's AI Gateway

After writing a 4,000 word post¹ about the future of the AI interface, I asked a friend for feedback. After sending it, I realized it was a long read and thought they would appreciate an easy way to summarize the post before digging in—so I decided to build a simple AI summary feature using Vercel's AI tools.

I had been itching to try Vercel’s AI SDK on a real use case, and this was a perfect opportunity. The initial implementation was so smooth that I shipped version 1 in under 30 minutes—including multiple interruptions from my kids. But when I showed it to a friend, their immediate response was, “why can't I choose which model generates the summary?"

That simple question led me down the rabbit hole of Vercel's AI Gateway, which is a truly incredible piece of developer infrastructure.

Here’s a breakdown of the build process:

Version 1: the 30-minute MVP

The beauty of Vercel's AI SDK is how it abstracts away the complexity of working with AI models. I followed their Next.js guide², grabbed a key from OpenAI, and fired off a test—which worked on the first try.

The rest of my time was spent on the user experience details, which primarily consisted of getting the summary inserted into the DOM in the right place (at the top of the body content).

The entire implementation was maybe 50 lines of code³. The AI SDK handled all the heavy lifting.

Also, if you're interested, below is the system prompt I used, which includes a long-running bullet point I had to tweak multiple times to get the link list formatted correctly in HTML. Also of note, the system prompt is a simple configuration in the AI SDK.

You are a helpful assistant that creates concise, engaging summaries of blog posts.

Your summaries should:

• Be 2-3 sentences long
• Capture the main argument or key insights
• Be written in a clear, accessible tone
• Avoid jargon and technical terms when possible
• Focus on the value proposition for the reader
• Add an HTML unordered list <ul> of the top five most relevant links from the footnotes to the summary, with the anchor text from the footnote as the link text. Format links as HTML: link text. Place each link as a separate list item in the unordered list.The links should be a short, several-word summary of the link and context using the mention in the body content and the footnote text. In a new paragraph after the summary, add "Relevant links from the footnotes:" above the list. Do not format this as markdown.

Version 2: implementing model selection with Vercel’s AI Gateway

After my friend Benji⁴ requested support for multiple models, I started by hard-coding one additional model from Anthropic. But then I realized the AI Gateway was designed for use cases exactly like multi-model selection.

When I asked Cursor to build a plan for implementing it, it did a really bad job⁵. I had to give it pretty explicit instructions based on what I'd read in the docs (the joys of vibe coding).

But once I realized where Cursor was tripping up, the implementation was dead simple. Actually, amazingly simple⁶.

Instead of managing keys from multiple providers, I had Cursor build a basic registry with model IDs. When a user chooses a model, the ID is passed as a string in the API call to the gateway.

Beyond being able to access any model out of the box, the really nice thing about the gateway is the observability. Having a dashboard with details about usage and cost is incredible—and would be a nightmare to manage across each individual platform. This was an exploratory hobbyist project, but having built a lot of product, I immediately sensed how useful this would be in production software.

Quick technical details

The final implementation uses:

• AI SDK⁷ for the core functionality
• AI Gateway⁸ for model routing and observability
• LobeHub Icons⁹ for beautiful model logos in the dropdown
• Tailwind CSS for the UI (with a subtle pulsing animation)

Footnotes

1. 4,000 word post about the future of the AI interface ↩

2. Vercel AI SDK Next.js guide ↩

3. You can see the pull request for version 1 of the blog post summary feature in my website's GitHub repo. ↩

4. Benji is the Head of GTM Systems at Vercel. ↩

5. You can see the full transcript from Cursor for the version 2 build here. ↩

6. You can see the pull request for version 2 of the blog post summary feature my website's GitHub repo. ↩

7. Vercel AI SDK - The AI Toolkit for TypeScript that makes it easy to integrate AI models into your applications. ↩

8. Vercel AI Gateway - A unified interface for accessing multiple AI models with built-in observability and cost tracking. ↩

9. LobeHub Icons - A comprehensive collection of AI/LLM model icons for React applications. ↩