How to Inject Ads Into a Streaming Response in Vercel AI SDK (Next.js)

Overview

This is the core of monetizing a Vercel AI SDK (Next.js) app: instead of returning the raw model stream, you pass it through Monetzly, which injects contextual, labelled ads into the token stream and hands you back the enhanced stream to forward to the client.

You keep your existing Vercel AI SDK (Next.js) model call untouched. Injection is additive — a wrapper around the stream you already produce, keyed on the session and the live prompt so the ad matches what the user is asking about.

Vercel AI SDK (Next.js) apps are usually built for streaming chat UIs, Next.js AI apps, and edge/serverless LLM routes, so inject ads into a streaming response typically comes up while a user is mid-conversation, the moment where monetization has to be additive rather than disruptive.

How this works on Vercel AI SDK (Next.js)

Vercel's streamText() exposes a textStream of plain strings. Wrap it in an async generator that yields { content: text } and pass that into sdk.inject(); then stream the injected tokens back in your Route Handler Response. Both APIs are documented, so this is a direct fit.

Because Monetzly's inject() accepts any async token stream, the Vercel AI SDK (Next.js) side of this task is just mapping your output to it, no rewrite of your Vercel AI SDK (Next.js) model call.

Steps

1. Produce your Vercel AI SDK (Next.js) response as a token stream as you already do.
2. Pass that stream into the Monetzly injection call with the session id and prompt.
3. Forward the enhanced tokens to the client (SSE, WebSocket, or your existing transport).

Integration snippet

import { streamText } from "ai";
import { google } from "@ai-sdk/google";
import { MonetzlySDK } from "@monetzly/server-sdk";

const sdk = new MonetzlySDK({
  apiKey: process.env.MONETZLY_API_KEY!,
  serverAddress: process.env.MONETZLY_SERVER_ADDRESS!,
});

export async function POST(req: Request) {
  const { prompt } = await req.json();
  await sdk.connect();
  const { textStream } = streamText({ model: google("gemini-2.0-flash"), prompt });

  // Adapt Vercel's string stream to Monetzly's TokenChunk shape.
  async function* asChunks() {
    for await (const text of textStream) yield { content: text };
  }

  const enc = new TextEncoder();
  const body = new ReadableStream({
    async start(c) {
      for await (const t of sdk.inject(asChunks(), { prompt }))
        c.enqueue(enc.encode(t.content ?? ""));
      await sdk.disconnect();
      c.close();
    },
  });
  return new Response(body, { headers: { "Content-Type": "text/plain; charset=utf-8" } });
}

Frequently asked questions

Related