Native Ads in a Vue / Nuxt Chat App

The SDK ships a Vue composable. You do not need React, and you do not need to wait for an “enterprise onboarding.”

useIdlenAd from @idlen/chat-sdk/vue fetches a contextual ad after the user message and gives you HTML or markdown to put under the assistant reply. Same 70% rev share and sub-50ms serve as the rest of the network.

Next.js / AI SDK path: 10-minute Next guide. Copy-paste tabs: SDK.

Install

npm install @idlen/chat-sdk

Publisher key from Ads Manager → idl_pk_…. In Nuxt, expose only the publishable key as NUXT_PUBLIC_IDLEN_PK.

Vue 3 component

<script setup>
import { useIdlenAd } from "@idlen/chat-sdk/vue";

const props = defineProps(["message", "sessionId"]);
const { ad, fetchAd, trackClick } = useIdlenAd({
  apiKey: "idl_pk_your_key_here",
});

watch(
  () => props.message,
  (msg) => {
    fetchAd({
      rawText: msg,
      sessionId: props.sessionId,
      format: "chat_sponsored_recommendation",
    });
  },
);
</script>

<template>
  <div>
    <p>{{ message }}</p>
    <a v-if="ad" :href="ad.ctaUrl" @click="trackClick">
      <div v-html="ad.renderHTML()" />
    </a>
  </div>
</template>

The ad is a sibling of the message, not a rewrite of the model. v-html is the SDK’s own render — do not concatenate it into the LLM string.

Nuxt 4

Same composable. Call it from a client component (<script setup> in a .vue that you only mount in the browser), or gate fetchAd with import.meta.client.

// composables are auto-imported in Nuxt if you wrap this, or import explicitly
import { useIdlenAd } from "@idlen/chat-sdk/vue";

const config = useRuntimeConfig();
const { ad, fetchAd, trackClick } = useIdlenAd({
  apiKey: config.public.idlenPublisherKey,
});

idlenPublisherKey is already on the public runtime config of the marketing site as a pattern — in your app, map NUXT_PUBLIC_IDLEN_PK the same way.

If the chat lives in a Server API route (server/api/chat.post.ts), fetch the ad there with @idlen/chat-sdk/server and pass the payload to the client. Do not block the model on the ad.

import { IdlenChatAds } from "@idlen/chat-sdk/server";

const ads = new IdlenChatAds({
  apiKey: process.env.IDLEN_PUBLISHER_KEY,
});

const ad = await ads.getAd({
  rawText: assistantText,
  sessionId,
  format: "chat_sponsored_recommendation",
});

Formats and frequency

Start with chat_sponsored_recommendation every few turns. CTA card if you have a visual. Suggestion / inline if you want quieter inventory. Catalog: formats.

Money

Same grid as other publisher docs: roughly $20–$42 CPM, 70% to you, monthly wire, €50 minimum. Revenue page and calculator.

If the UI is Vue, this is the whole integration. Create the publisher account.