Monetize a Next.js / Vercel AI SDK Chat in 10 Minutes

You already stream tokens with the Vercel AI SDK. Monetization should not mean a second backend or a sales call.

@idlen/chat-sdk/ai-sdk wraps the model you already use. Ads are chosen from conversation context and appended beside the reply. Latency stays under 50ms. The model text is not rewritten.

This is the Next / App Router path. For Vue, see native ads in a Vue / Nuxt chat. LangChain stays in its own guide. Full tabs live on the SDK page.

What you get

Plan numbers, not a contract. Use the publisher calculator if you have MAU.

Minute 0–2: key

1. Create a publisher account (self-serve).
2. Copy the publishable key (idl_pk_…).
3. Put it in .env.local as IDLEN_PUBLISHER_KEY. Never ship the secret server key to the browser.

Minute 2–4: install

npm install @idlen/chat-sdk

Minute 4–7: wrap the model

In your existing streamText route (Route Handler or Server Action):

import { streamText, wrapLanguageModel } from "ai";
import { openai } from "@ai-sdk/openai";
import { idlenAdsMiddleware } from "@idlen/chat-sdk/ai-sdk";

const model = wrapLanguageModel({
  model: openai("gpt-4o"),
  middleware: idlenAdsMiddleware({
    apiKey: process.env.IDLEN_PUBLISHER_KEY!,
    format: "chat_sponsored_recommendation",
    frequency: 3,
    position: "append",
  }),
});

export async function POST(req: Request) {
  const { messages } = await req.json();

  const result = await streamText({
    model,
    messages,
  });

  return result.toUIMessageStreamResponse();
}

frequency: 3 = one ad every three assistant turns. Start there. More often trains users to ignore you.

Formats you can pass (same four as the rest of the SDK): sponsored recommendation, CTA card, contextual suggestion, inline mention. Specs: formats.

Minute 7–10: render beside the stream

Do not inject the ad into the model string. Keep a slot under the last assistant bubble — a card, a recommendation row, the HTML the SDK returns.

If you already use useIdlenAd on the client instead of middleware, the React pattern on the SDK page is:

import { useIdlenAd } from "@idlen/chat-sdk/react";

const { ad, fetchAd, trackClick } = useIdlenAd({
  apiKey: process.env.NEXT_PUBLIC_IDLEN_PK!,
});

Call fetchAd with { rawText, sessionId } after the user message. Same key family, same dashboard.

What not to do

• Do not wait for “enough traffic.” There is no minimum.
• Do not put ads inside the assistant answer. Users and models both punish that.
• Do not block the stream on the ad. Serve the tokens; the ad is extra.

After it is live

Dashboard: impressions, CTR, revenue by format, next payout. Details on revenue.

If you also have a Vue surface, reuse the same publisher key — Vue / Nuxt guide.

Ten minutes is a wrap + a slot under the bubble. Create the publisher account and paste the key.