Step 4

SDK Integration

Embed your trained bot on any website. Three integration options — pick the one that fits your stack.

Get your embed key

Go to your bot in Dashboard → Bots. Once your bot is trained and active, you'll see an embed key and integration snippets ready to copy.

The embed key identifies your bot. At runtime, the SDK calls the /api/models/resolve/{embed_key} endpoint which returns the correct model artifacts for the requested size tier — including the modelUrl and CDN file URLs.

Multiple sizes: If you trained Small, Medium, and Large models, the resolve API automatically falls back to the next smaller tier if a requested size isn't available. Request ?tier=large and it tries large → medium → small.

Option 1: Script tag (any website)

The simplest integration. Add a single script tag to your HTML — no build tools, no framework dependencies.

<script type="module">
import { mount } from 'https://cdn.jsdelivr.net/npm/kanha-ai/dist/widget.js';

mount('#chat', {
modelUrl: 'YOUR_MODEL_URL', // from /api/models/resolve/{embed_key}
modelSize: 'small', // matches the trained model size
systemPrompt: 'You are a helpful assistant for...',
botName: 'My Bot'
});
</script>

Or use the Web Component for zero-JavaScript setup:

<script type="module" src="https://cdn.jsdelivr.net/npm/kanha-ai/dist/widget.js"></script>

<kanha-bot
model-url="YOUR_MODEL_URL"
model-size="small"
system-prompt="You are a helpful assistant for..."
bot-name="My Bot"
></kanha-bot>

Option 2: npm + React

For React apps, install the SDK via npm for full TypeScript support and tree-shaking.

npm install kanha-ai

Drop-in widget — renders a floating chat button and panel:

import { KanhaBot } from 'kanha-ai';

function App() {
return (
<KanhaBot
modelUrl="YOUR_MODEL_URL"
modelSize="small"
systemPrompt="You are a helpful assistant for..."
botName="My Bot"
/>
);
}

Headless hook — build your own UI:

import { useKanhaChat } from 'kanha-ai';

function CustomChat() {
const { messages, send, loading, modelReady } = useKanhaChat({
modelUrl: 'YOUR_MODEL_URL',
modelSize: 'small',
systemPrompt: 'You are a helpful assistant...'
});

// Build your own chat UI using messages, send(), etc.
}

Configuration

All integration modes accept the same configuration options:

PropTypeDescription
modelUrlstringBase URL for model artifacts (returned by the resolve API)
systemPromptstring?Custom system prompt for the bot
botNamestring?Display name (default: "AI Assistant")
welcomeMessagestring?Message shown in empty chat state
suggestionsstring[]?Starter prompt suggestions
modelSize"small" | "medium" | "large"Selects the WASM library to match the trained model (default: "small")
temperaturenumber?Sampling temperature (default: 0.7)
theme{ primaryColor?, position? }Widget color and positioning

How it works at runtime

The SDK runs your trained model entirely in the browser using WebGPU. No server calls, no per-query costs, no latency from API round-trips.

  • 1.SDK checks for WebGPU support in the user's browser.
  • 2.Model weight shards are fetched from CDN and cached in the browser.
  • 3.Inference runs locally on the user's GPU via WebGPU/WASM.
  • 4.If WebGPU is unavailable, the SDK falls back to Groq cloud inference automatically.

Browser support: WebGPU is available in Chrome 113+, Edge 113+, and behind a flag in Firefox and Safari. On unsupported browsers, the Groq fallback ensures your bot still works.

That's it — your bot is live. Want to automate the pipeline with API keys?

Next: API Keys & v1 API