Javascript SDK is a low level SDK that works with any browser-based application. If you are using React, you should also checkout our declarative React SDK.

​
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

A detailed overview of the SDK can be found in the SDK Reference.

​
Import our SDK

<script type="module">
  import { fetchAd } from 'https://server.megabrain.co/sdk/js';
  fetchAd()
</script>

You might need to make fetchAd available globally.

window.fetchAd = fetchAd

​
Assemble a list of messages

messages is the list of messages between assistant and user. They are used to determine which ads to show. Order of messages matters and it should always end with an assistant message.

const messages = [
  {
    id: "message-uuid", // Any string id. Must be unique
    createdAt: "2024-12-31T12:00:00.000Z" // ISO string or data object
    role: "user", // "user" | "assistant"
    content: "I am looking for a frying pan."
  },
  {
    id: "message-uuid2",
    createdAt: "2024-12-31T12:00:06.000Z",
    role: "assistant",
    content: "For a versatile frying pan, consider an all-clad stainless steel or non-stick hard-anodized aluminum pan, 10–12 inches in size, depending on your needs."
  }
]

If you are integrating Kontext to a human-to-human messaging app, just use role “assistant” for everyone else apart from the current user. This works well both in 1:1 and group chat setups.

​
Create your params object

This object is used to call the fetchAd function. Based on the params, it will determine what product and ad copy to show.

const fetchAdParams = {
  publisherToken: "example-token", // Given to you on onboarding call
  code: "example-code", // Given to you on onboarding call
  userId: "user-uuid", // A persistent user identifier - user uuid or email hash works great.
  conversationId: "conversation", // Id of the current conversation the user is having with the bot.
  logLevel: "debug", // "debug" | "info" | "log" | "warn" | "error" | "silent"
  messages: messages, // List of messages between assistant and user
  element: document.getElementById("ad-container") // Div where ad will be rendered
 }

​
3. Show your first ad

At this point, you are all set. You can now call the fetchAd function which also has a few optional callbacks that can be used for your analytics or rendering logic.

fetchAd(fetchAdParams, {
  onStart: () => {/* Called just before the ad server request */ },
  onComplete: (content, metadata) => {/* Called when ad is completely streamed */},
  onToken: (value: string) => {/* Called after each token is received */},
  onError: (error: any) => {/* Called when streaming encounters an error */},
  onAdClick: (impression: { id: string, content: string }) => {/* Called when ad is clicked (for your analytics) */},
  onAdView: (impression: { id: string, content: string }) => {/* Called when ad is viewed (for your analytics) */},
  onBid: (value: number | null) => Promise<boolean> {/* Called when an ad is available to fill your ad slot along with the bid value for the ad. Return true if you want to render the ad. */}
})
React SDKCustom Rendering Javascript SDK