Quick Start

Get KiBee running in your product in under 5 minutes. This guide works with any web application — React, Next.js, Vue, Angular, or plain HTML.

1. Get Your API Key

Sign in to the Admin Console and go to Settings → API Keys. Create a new key and copy it.

2. Install the SDK

Option A: npm (React, Next.js, Vue)

Terminal
npm install @kibee/sdk @kibee/renderer-three
App entry point
import { KiBeeClient } from "@kibee/sdk";
import { ThreeBeeRenderer } from "@kibee/renderer-three";
import "@kibee/renderer-three/styles.css";

const kibee = new KiBeeClient({
  renderer: new ThreeBeeRenderer({
    dockPosition: "bottom-right",
    dockSize: 60,
  }),
  apiBaseUrl: "https://api.kibee.ai",
});

kibee.init();

Option B: Script tag (plain HTML)

HTML
<script src="https://cdn.kibee.ai/sdk/latest/kibee.min.js"></script>
<script>
  KiBee.init({
    apiKey: "YOUR_API_KEY",
    apiUrl: "https://api.kibee.ai",
  });
</script>

3. Add Target Attributes

Add data-kibee-id attributes to the elements you want the bee to guide users to. These can be inputs, buttons, links, or any interactive element.

Your HTML
<input data-kibee-id="email-field" type="email" placeholder="Email" />
<button data-kibee-id="submit-btn">Submit</button>

4. Register Targets

Tell KiBee about the elements you tagged:

JavaScript
kibee.identifyPage("signup");

kibee.registerTargets([
  {
    id: "email-field",
    label: "Email input",
    target: { kibeeId: "email-field" },
  },
  {
    id: "submit-btn",
    label: "Submit button",
    target: { kibeeId: "submit-btn" },
  },
]);

5. Create a Flow

Define a flow — a sequence of steps that guide the user. Use the Admin Console or the API:

Flow definition (JSON)
{
  "id": "signup-flow",
  "title": "Complete signup",
  "pageId": "signup",
  "goal": "Guide user through the signup form",
  "steps": [
    {
      "type": "fly_to",
      "target": { "kibeeId": "email-field" },
      "message": "Start by entering your email address."
    },
    {
      "type": "wait_for_input",
      "target": { "kibeeId": "email-field" }
    },
    {
      "type": "fly_to",
      "target": { "kibeeId": "submit-btn" },
      "message": "Click submit to create your account."
    },
    {
      "type": "wait_for_click",
      "target": { "kibeeId": "submit-btn" }
    },
    {
      "type": "celebrate",
      "message": "Account created!"
    }
  ]
}

6. Run It

Trigger the flow programmatically or let KiBee match it via intent:

JavaScript
// Run directly
kibee.runFlow("signup-flow");

// Or let KiBee match user intent
const match = await kibee.ask("how do I sign up?");
// → matches to signup-flow with 0.85 confidence
That's it! The bee will fly to each target, display the message, and wait for the user to complete the action before moving to the next step. If the user stalls for 18 seconds, KiBee automatically re-enters the flow at the exact step they were stuck on.

Next Steps