Link Preview Enricher
Fetch URL meta, rewrite titles with AI, render ImageResponse cards, and optionally store PNGs in Vercel Blob.
Run this experiment yourself
Demos are not embedded on this site. Deploy a standalone copy on Vercel or run the experiment app locally.
Local development
cd apps/experiments/link-preview-enricher pnpm install pnpm dev
Then open http://localhost:3010.
This is an experimental demo. Use it as a starting point for your own projects.
Link Preview Enricher fetches page HTML (size/timeout capped), extracts OG/title meta, rewrites titles with generateObject, and renders ImageResponse cards. When BLOB_READ_WRITE_TOKEN is set it stores PNG uploads. Missing AI keys return 503.
Features
- Meta fetch – og:title / description / title tag.
- AI title rewrite – short social-card titles.
- ImageResponse OG –
/api/ogpreview cards. - Optional Blob – store generated PNGs.
Server Reference
POST /api/preview
{ "urls": ["https://example.com"] }GET /api/og?title=...&description=...
Returns an ImageResponse PNG.
| Status | Cause |
|---|---|
503 | No AI provider |
400 | No valid http(s) URLs |
Implementation Details
Fetch + extract
Capped HTML download; regex meta helpers in logic.ts.
Rewrite + card
generateObject title; ImageResponse; optional Blob put.
Use Cases
- Learn fetch + OG + Blob composition.
- Prototype link unfurling.
Limitations
- HTML-only meta (no full browser render).
- Max 5 URLs per request.
Use in your project
Copy handlers from apps/experiments/link-preview-enricher/.
Deployment
Local Development
cd apps/experiments/link-preview-enricher
pnpm install
pnpm devConfiguration
| Variable | Required | Purpose |
|---|---|---|
AI_GATEWAY_API_KEY | Yes (or OPENAI_API_KEY) | Title rewrite |
BLOB_READ_WRITE_TOKEN | No | Store PNGs |
Vercel / Next.js Features Used
- AI SDK
generateObject next/ogImageResponse- Vercel Blob
- Route Handlers