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 local execution works

The SDK loads the trained model on the visitor's device. Once ready, questions are answered locally without a per-message inference request.

  • 1.The SDK checks whether a supported on-device runtime is available.
  • 2.Model files are fetched and cached on the device.
  • 3.The model is prepared for the available local runtime.
  • 4.The chat becomes available after the model is ready.

The current SDK requires a supported on-device runtime. It does not automatically switch to hosted inference when local execution is unavailable.

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

Next: API Keys & v1 API