Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.kontext.so/llms.txt

Use this file to discover all available pages before exploring further.

The ad component (<InlineAd messageId="..." /> or its platform equivalent) is a lookup: it renders whatever ad the SDK has cached under the messageId you pass. The SDK pairs each returned ad with the latest assistant message in your conversation — automatically. When you call addMessage('assistant', { id: 'msg-42', ... }), that’s the id the next available ad is keyed under. So the rule for <InlineAd> is simply: pass the id of the assistant message the ad should appear next to. Timing is handled for you — whether the preload returns before or after the assistant message arrives, the ad shows up as soon as both are in place.

​
The flow

1

User sends a message

Your app calls session.addMessage({ role: 'user', ... }). The SDK fires a debounced POST /preload in the background while the assistant is still composing its reply.
2

Assistant replies — with its own stable id (say "msg-42")

Your app receives the assistant’s message and calls session.addMessage({ id: 'msg-42', role: 'assistant', ... }). The SDK links the preloaded ad to this id.
3

Mount the ad against the assistant id

Render <InlineAd messageId="msg-42" /> directly below the assistant turn in your UI. The SDK looks up the linked ad for messageId="msg-42" and renders it inside an iframe, written to continue the assistant’s tone.
The ad is bound to the assistant message id, not the user message id — even though the preload was triggered when the user message was added. This is how the ad ends up positioned directly under the assistant turn that gave it context.

​
The “latest assistant message” pattern

In the vast majority of chat UIs, the ad slot lives directly below the most recent assistant message. Render <InlineAd> against that message’s id and you’ve covered the common case. 
{messages.map((m) => (
  <div key={m.id}>
    <Message message={m} />
    {m.role === 'assistant' && m.id === latestAssistantId && (
      <InlineAd messageId={m.id} />
    )}
  </div>
))}

​
Common mistakes

  • Using the user message id. The user message is what triggers the preload, but the ad is linked to the assistant message that follows. Bind <InlineAd> to the assistant message id.
  • Recreating the component on every keystroke. Use a stable Vue/React key={messageId} so the component is not torn down and remounted while content streams in.

​
Where to next

Messages

What goes into addMessage and why stable ids matter.

Ad formats

Inline, interstitial, reward — what each format does and which fits your slot.

Ad lifecycle events

What the SDK emits when the ad finally renders.