SDK integration

Go to your bot in Dashboard → Bots. Once your bot is trained and active, the dashboard provides one install snippet for its selected active model. The snippet contains a concrete model URL and the matching Small, Medium, or Large size. Other active models have Playground links for testing.

The current SDK loads exactly the modelUrl and modelSize configured in the integration. It does not select a size based on device RAM or automatically switch models. If you train multiple sizes, you can test them in the Playground, but public installation currently follows the single generated snippet.

The unreleased SDK source supports built-in presets for modelSize "minicpm5-1b" and "minicpm5-2b", which load shared grounded checkpoints with no modelUrl or modelLib. Your own trained bot should always use the modelUrl and modelLib from its integration details.

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@0.1.10/dist/widget.js';

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

Or use the Web Component when you want a setup with no custom JavaScript.

<script type="module" src="https://cdn.jsdelivr.net/npm/kanha-ai@0.1.10/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"
  welcome-message="Ask me anything"
  suggestions='["Pricing", "Support"]'
  primary-color="#0d9488"
  position="bottom-right"
></kanha-bot>

The CDN URL is pinned to version 0.1.10. Browsers cache the unversioned file aggressively, so an unpinned URL can keep serving an old widget build long after a fix ships. Copy the snippet again after each SDK release to move up.

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

npm install kanha-ai

The 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"
    />
  );
}

The headless hook lets you build your own UI.

import { useKanhaChat } from 'kanha-ai';

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

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

Shared runtime options

The mount function, React widget, and useKanhaChat hook accept these camelCase runtime options. Web Component mappings are listed separately below.

Widget UI props for mount and React

The mount function and KanhaBot accept these UI props in addition to the runtime options. The headless useKanhaChat hook does not render a widget and does not use them.

Web Component attributes

The <kanha-bot> element reads these HTML attributes. Color and position map to fields inside the JavaScript theme object; there is no theme attribute.

Retrieval callbacks cannot be encoded as HTML attributes. Assign the element’s onRetrieveContext JavaScript property when using a custom retrieval function.

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

1. 01The SDK checks the browser's local runtime.
2. 02Model files are fetched and cached on the device.
3. 03The model is prepared for the available local runtime.
4. 04The chat becomes available after the model is ready.