Monétiser un chat Next.js / Vercel AI SDK en 10 minutes

Vous streamez déjà avec le Vercel AI SDK. La monétisation ne devrait pas vouloir dire un second backend ni un call sales.

@idlen/chat-sdk/ai-sdk wrappe le modèle que vous avez. Les ads viennent du contexte de conversation et s’ajoutent à côté de la réponse. Latence < 50 ms. Le texte du modèle n’est pas réécrit.

Chemin Vue : ads natives dans un chat Vue / Nuxt. LangChain : son guide. Onglets complets : page SDK.

Ce que vous touchez

Ordres de grandeur. Calculez avec le calculateur éditeurs.

Minutes 0–2 : la clé

1. Créez un compte publisher.
2. Copiez la clé publishable (idl_pk_…).
3. .env.local → IDLEN_PUBLISHER_KEY. Jamais la clé secrète côté navigateur.

Minutes 2–4 : install

npm install @idlen/chat-sdk

Minutes 4–7 : wrapper le modèle

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 = une ad toutes les trois réponses assistant. Plus souvent, les gens apprennent à ignorer.

Formats : recommandation, carte CTA, suggestion, mention inline. Specs.

Minutes 7–10 : rendre à côté du stream

Pas dans la string du modèle. Un slot sous la dernière bulle assistant.

Côté client, useIdlenAd (SDK) :

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

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

fetchAd({ rawText, sessionId }) après le message user.

À ne pas faire

• Attendre d’avoir « assez de trafic ».
• Coller l’ad dans la réponse.
• Bloquer le stream sur l’appel ad.

Ensuite : revenus. Surface Vue : guide Vue / Nuxt.

Dix minutes = un wrap + un slot. Créer le compte publisher.