Quick Start - Thrads API Documentation

For Human

Get your staging publisher ID

Add the SDK script tag

Load the SDK script synchronously.

HTML
Next.js App Router
Next.js Pages Router
React (Vite)

Edit index.html:

<head>
  <script src="https://sdk.thrad.ai/sdk.js?token=YOUR_PUBLISHER_ID"></script>
</head>

Available in Next.js v13+. Edit app/layout.tsx:

import Script from 'next/script'

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html>
      <head>
        <Script
          src="https://sdk.thrad.ai/sdk.js?token=YOUR_PUBLISHER_ID"
          strategy="beforeInteractive"
        />
      </head>
      <body>{children}</body>
    </html>
  )
}

Available in Next.js v13 and earlier. Edit pages/_document.tsx:

import { Html, Head, Main, NextScript } from 'next/document'

export default function Document() {
  return (
    <Html>
      <Head>
        <script src="https://sdk.thrad.ai/sdk.js?token=YOUR_PUBLISHER_ID" />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}

Edit index.html:

<head>
  <script src="https://sdk.thrad.ai/sdk.js?token=YOUR_PUBLISHER_ID"></script>
</head>

Add a contextual ad under the AI response

Contextual ads fire after your AI responds, matched to the conversation content. Call thrad.render() once you have the AI’s response.

HTML
React / Next.js

<div data-thrad-type="contextual" data-thrad-format="message"></div>

<script>
  async function onAIResponse(userMessage, aiResponse) {
    await thrad.render({ query: userMessage, response: aiResponse })
  }
</script>

import { useRef } from 'react'

declare const thrad: { render: (opts: { query: string; response: string }) => Promise<void> }

export default function ChatResponse() {
  async function onAIResponse(userMessage: string, aiResponse: string) {
    await thrad.render({ query: userMessage, response: aiResponse })
  }

  return (
    <div>
      {/* Contextual ad — place near the AI response area */}
      <div data-thrad-type="contextual" data-thrad-format="message" />
    </div>
  )
}

For Agent

Get your staging publisher ID

Paste this prompt into your coding agent

Copy into Cursor, GitHub Copilot, Claude Code, or any LLM-powered editor.

Integrates the Thrads SDK with framework-aware instructions

Open in Cursor

What’s next

Integration cases

All placement patterns — opener only, contextual, SPA routing, multiple slots

Themes & identity

Customize colors, dark mode, and pass user identity for better ad matching

Introduction SDK Customization

Get Started

SDK

API

​For Human

​For Agent

​What’s next

Integration cases

Themes & identity

For Human

For Agent

What’s next