Ad-supported Next.js AI Chatbot

See the code for integrating ads into the Next.js AI chatbot template

​
1. Installation

To get started, you will need to set up a publisher account to get a publisherToken and code

npm install @kontextso/sdk

​
2. Initialize AdsProvider

Next, we need to set up the AdsProvider. This component handles all data fetching logic and requires access to the chat messages. You should place it somewhere in your component tree where you already have messages available and high enough in the hierarchy to contain all ad placements (locations where ads will be rendered).

PropDescription
publisherTokenYour unique publisher token
isLoadingLoading state of your application. Should be set to true if there is a network request in progress to get assistant response
messagesList of messages between assistant and user
userIdany unique string that should stay the same during user lifetime. This is required for retargetting ads within your platform or rewarded ads.
conversationIdUnique ID of the conversation
'use client' // AdsProvider needs to be a client component if you use Next

import * as React from 'react'
import { AdsProvider } from '@kontextso/sdk';

interface Message {
  messageId: string
  role: 'user' | 'assistant'
  content: string
}

function App() {
  // Message fetching/storing logic. Probably more complex
  // in your app.
  const [messages, setMessages] = useState<Message[]>([])

  // Is there a network request for new message in progress?
  // This may mean that user has just sent a message or
  // there is a token stream still in progress.
  const [isLoading, setIsLoading] = useState(false)

  // ...

  return (
    <AdsProvider
      publisherToken='<publisher-token>'
      isLoading={isLoading}
      messages={messages}
      userId='<user-id>'
      conversationId='<conversation-id>'
    >
      <TheRestOfYourApplication />
    </AdsProvider>
  )
}

​
3. Show your first ad

An ad slot is the element or place in your interface where an ad will be displayed. During onboarding, you will receive a code that you need to use for each ad slot or ad format you want to display.

We will be using an InlineAd format in this example. Copy the markup <InlineAd /> and place it in your application where it should be rendered. Don’t forget to assign messageId as a unique identifier. For example, if you have a MessageList component, you can show an ad after each message like this (every message will have a unique ad displayed because of messageId).

function MessageList(messages: Messages) {
  return <>
    {messages.map((m, i) => (
      <>
        <Message key={i} message={m} />
        <InlineAd code="<your-code>" messageId={m.id} />
      </>
    )}
  </>
}

​
4. Going further

<InlineAd />, being the most versatile format, already offers advanced functionality such as rendering images and videos. If you want to style your ads, check out our Inline ad guide.