How to connect Vercel AI SDK apps to Elo's ad network

Vercel AI SDK apps stream tokens straight from OpenAI, Anthropic, or a custom model into a chat UI — but that same streaming pipeline can carry a contextual ad payload alongside the assistant's reply. Instead of bolting a banner onto the page after the response finishes, you wire Elo's ad matcher into the stream itself, so the ad renders as a native part of the conversation, not an interruption.

Why this matters

Most teams shipping on Vercel AI SDK in 2026 have a working chatbot before they have a revenue line. Adding display ads the old way — a script tag, a DOM query, an injected div — breaks the moment your assistant streams a response token by token. The fix isn't a bigger ad script. It's an ad server built for streaming responses instead of static pages.

That's the gap Elo's SDK fills: it treats each chat turn as inventory, matches an ad to what the user is actually asking about, and streams the ad payload through the same Route Handler that already returns your model's tokens. No second API call, no separate render pass.

Before you start

• An Elo publisher account and API key. Create the app entry in your Elo dashboard before touching code — you'll need the key for environment variables in the next step.
• A working Vercel AI SDK app using useChat or streamText, on either the App Router or Pages Router, running on Node.js 18.17 or later (the minimum Vercel AI SDK itself requires).
• The gotcha that bites at step three, not step one: the ad matcher has to sit inside the stream, before streamText resolves. Bolt it on after the stream finishes and the ad card renders a beat late, after the assistant's reply already looks complete — which reads as an afterthought instead of part of the answer.

Set up your Elo publisher app

1. Sign in to your Elo dashboard and create a new app entry for the Vercel AI SDK project you're monetizing.
2. Generate an API key scoped to that app.
3. Add the key as an environment variable in both your local .env.local file and your Vercel project's environment variable settings, so it's available at build time and at runtime in every environment (development, preview, production).

Expected result: the app shows in your Elo dashboard with no traffic yet — that's normal until the first real request hits your matcher.

Wire the ad matcher into your streaming response

1. In the API route or Route Handler where you call streamText, wrap the model call so the conversation history is passed to Elo's matcher before the response streams back to the client, not after.
2. Pass the full message history into that matcher call, not just the latest user turn — contextual matching works off the whole conversation, and a single message out of context often produces a weaker match.
3. Return the combined stream — assistant tokens plus the ad payload — through the same Response object your Route Handler already sends to useChat on the frontend.

Expected result: your network tab shows one streamed response containing both text chunks and an ad payload chunk, instead of a second round trip to a separate ad endpoint.

Render the ad card in the chat UI

1. In the component that maps over messages from useChat, check each message object for an attached ad payload.
2. When one is present, render Elo's native ad card in place of, or directly below, the assistant's bubble. Never float it over the input box or the message list — that's the pattern that gets flagged as intrusive and the one Elo's format is built to avoid.
3. Pass through the click and impression handlers exposed by the SDK so impressions and clicks log against your publisher account correctly.

Expected result: ad cards appear inline, styled like a normal chat turn, and simply don't render on turns where no advertiser matched the topic.

Monetizing tool calls, not just chat replies

If your Vercel AI SDK app uses function calling — a booking assistant, a research tool, anything that returns structured tool results — the same matcher pattern applies after the tool result renders, not only after a plain text reply. Wire the ad check to run once the tool result is appended to the message list, using the same contextual signal (the tool name plus its result payload) instead of raw chat text. This is what turns a utility bot with almost no monetizable text turns into an app with inventory on every tool-assisted answer.

Running the integration on Vercel's Edge Runtime

If your Route Handler declares export const runtime = 'edge', check whether the SDK dependency you're calling needs Node-only APIs before you deploy. Some ad-matching logic depends on server-side libraries that don't run on Edge Runtime. If you hit build errors referencing missing Node globals, switch that specific route to export const runtime = 'nodejs' rather than trying to polyfill around it — the rest of your app can stay on Edge.

Troubleshooting

• Ad card never renders, anywhere. Check that the API key is set in the environment Vercel actually deployed to — preview deployments and production deployments read different environment variable scopes, and this is the single most common cause.
• Ad payload arrives after the assistant's message looks finished. The matcher call is wired after streamText resolves instead of inside the stream. Move it upstream per the step above.
• Duplicate impressions logged in development. React's Strict Mode double-invokes effects in dev, which double-fires impression handlers on mount. This does not happen in a production build — confirm before you assume it's an SDK bug.
• No ads show up on certain topics. The contextual matcher didn't find an advertiser match for that category. This is expected behavior on niche or off-topic conversations, not a broken integration.
• Edge runtime build failures. See the Edge Runtime note above — switch the affected route to the Node.js runtime.

Customize your workflow

Once the basic integration is live, test the SDK integration before sending real traffic to advertisers — verify ad cards render correctly across every message type your app produces, including tool calls and multi-turn threads, before impressions start counting against your account. From there, the same pattern extends to suggested-prompt UI, multi-agent flows, and any other surface in your Vercel AI SDK app where a user reads text generated by a model.

FAQ

One last thing

The part most teams get wrong isn't the streaming wiring — it's assuming every turn needs an ad to be worth monetizing. A chat app where half the turns render no ad, because no advertiser matched, is working correctly, not underperforming. Forcing a match on every turn is what makes conversational ads feel like display ads again, and that's the exact failure mode a Vercel AI SDK integration in 2026 is supposed to avoid.

Related guides

• Best ad SDKs for AI apps built on OpenAI, compared
• How to reduce ad latency in an AI chat app
• Best ad SDKs for AI chatbots, ranked by integration speed