SDKs

React SDK

React apps integrate through the JavaScript SDK — a dedicated React wrapper is planned.

A dedicated React package isn't available yet. Use the JavaScript SDK — the script-tag SDK works in any React app.

Add the script from the JavaScript SDK guide (in your index.html or loaded from a useEffect), then request an ad once window.koah is available and hand it an element from a ref. Fire the request once per conversation turn by keying a ref guard to the turn's id — a streaming answer changes on every token, so an unguarded effect would re-issue requestAd for the same slot on each update (duplicate requests, noisy reporting), while a guard that never resets would skip every turn after the first. See Request Cancellation for the canonical pattern.

import { useEffect, useRef } from 'react'

function KoahSlot({ turnId, question, answer }) {
  const ref = useRef(null)
  const requestedTurn = useRef(null)
  useEffect(() => {
    if (requestedTurn.current === turnId || !window.koah || !ref.current) return
    requestedTurn.current = turnId
    window.koah.requestAd({
      target: ref.current,
      context: { type: 'conversation', question, answer },
    })
  }, [turnId, question, answer])
  return <div ref={ref} />
}