How to Test Ad Injection Locally in Vercel AI SDK (Next.js)

Overview

You can develop ad injection for a Vercel AI SDK (Next.js) app locally before going to production. Point the SDK at a local ad-server address and turn SSL off; everything else — the injection call, session context, fallback — behaves the same as production.

This lets you verify that your Vercel AI SDK (Next.js) stream flows through injection and reaches the client correctly without needing production credentials wired up.

Vercel AI SDK (Next.js) apps are usually built for streaming chat UIs, Next.js AI apps, and edge/serverless LLM routes, so test ad injection locally 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. Set the server address to your local host (e.g. localhost:8080) and disable SSL.
2. Run your Vercel AI SDK (Next.js) app and send a test prompt through the injection path.
3. Confirm tokens stream to the client, then switch to your production host and SSL for release.

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