Quickstart

​

1. Create an account

To get started, get in touch with us via Calendly or email. We will onboard you personally into the Kontext platform and help you get started.

During onboarding you will receive your publisherToken and a code that’s needed in the next steps.

​

2. Installation

​

Install the SDK

npm install @kontextso/sdk

​

Initialize AdsProvider

We will now need to set up AdsProvider. This component handles all data fetching logic and needs to have access to messages in chat so far. Essentially, you want to place it somewhere in the component tree where you already have messages available and also high enough so it contains all ad placements (places where ads are rendered).

It has several props:

• publisherToken - Your unique publisher token
• isLoading - Loading state of your application. Should be set to true if there is a network request in progress to get assistant response
• messages - List of messages between assistant and user
• userId - Unique ID of the user who will have the ads served, can be e.g. a hash
• conversationId - Unique 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.

You can see all of our ad formats here, we will be using an InlineAd 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} />
      </>
    )}
  </>
}