Install KBaseBot (Dark/Light) — Web & Next.js

Add the KBaseBot widget to any website or Next.js app. This covers signup, creating a chatbot, grabbing your API key, and installing via a script tag with simple customization props.

1) Sign up & create a chatbot

Go to signup
Create a new chatbot
Copy your API Key (looks like nk_live_xxx...).

2) Install on any website (vanilla)

Paste this right before </body> on your site:

HTML

<!-- KBaseBot embed -->
<script
  id="kbasebot-embed"
  src="https://cdn.kbai.dev/kbasebot.min.js?v=1.0.0"
  crossorigin="anonymous"
  data-api-key="YOUR_API_KEY"
  data-position="bottom-right"          <!-- bottom-right | bottom-left | top-right | top-left -->
  data-widget-color="#10b981"           <!-- launcher and user bubble color -->
  data-topbar-color="#111827"           <!-- chat header background -->
  data-title="KBase AI"
  data-init-open="false"
  data-theme="system"                    <!-- light | dark | system -->
></script>

<script>
  // Optional: init via JS and override any data-* attributes with props
  window.KBaseBot && window.KBaseBot.init({
    // apiKey: "YOUR_API_KEY", // can come from data-api-key above
    position: "bottom-right",
    widgetColor: "#10b981",
    topbarColor: "#111827",
    title: "KBase AI",
    initOpen: false,
    theme: "system",   // "light" | "dark" | "system"
    zIndex: 50
  });
</script>

The widget posts to https://api.kbai.dev/api/public/conversations/messages. Ensure your backend allows Origin requests for /api/public/** and accepts the x-api-key header.

3) Install in Next.js

In a Next.js page or layout (client side), load the CDN script with <Script /> and pass customization via data-* attributes:

Next.js (TSX)

import Script from "next/script";

export default function Page() {
  return (
    <>
      {/* Your page content... */}

      <Script
        id="kbasebot-embed"
        src="https://cdn.kbai.dev/kbasebot.min.js?v=1.0.0"
        strategy="afterInteractive"
        crossOrigin="anonymous"
        data-api-key="YOUR_API_KEY"
        data-position="bottom-right"
        data-widget-color="#10b981"
        data-topbar-color="#111827"
        data-title="KBase AI"
        data-init-open="false"
        data-theme="system"   // "light" | "dark" | "system"
      />

      {/* Optional: explicit init if you prefer props via JS */}
      <Script id="kbasebot-init" strategy="afterInteractive">
        { `
          window.KBaseBot && window.KBaseBot.init({
            // apiKey: "YOUR_API_KEY", // omit if using data-api-key
            position: "bottom-right",
            widgetColor: "#10b981",
            topbarColor: "#111827",
            title: "KBase AI",
            initOpen: false,
            theme: "system",
            zIndex: 50
          });
        ` }
      </Script>
    </>
  );
}

You can also place the <Script/> in app/layout.tsx to load the widget on every page.

4) Theme & customization

data-theme: light | dark | system (auto matches OS)
data-position: bottom-right | bottom-left | top-right | top-left
data-widget-color: hex (launcher + user bubbles)
data-topbar-color: hex (panel header)
data-title: header title text
data-init-open: true | false

JS init accepts the same keys as props:

window.KBaseBot.init({
  apiKey: "YOUR_API_KEY",
  position: "bottom-right",
  widgetColor: "#10b981",
  topbarColor: "#111827",
  title: "KBase AI",
  initOpen: false,
  theme: "system",   // "light" | "dark" | "system"
  zIndex: 50
});

5) Required server settings (quick)

Public endpoint /api/public/** should allow all origins (with credentials) and require x-api-key.
Other endpoints should be restricted to your allow-list (["http://localhost:3000","https://kbai.dev","https://cdn.kbai.dev"]).
In deploys, run prisma generate and either db push (preview) or migrate deploy (production with migrations).

6) Minimal "HowToInstall" export (as requested)

Next.js (TSX)

import Script from "next/script";
import Link from "next/link";

const HowToInstall = () => {
  return (
    <div>
      <h1>Install KBaseBot</h1>

      {/* Sign up flow with <Link /> */}
      <ol>
        <li>Go to <Link href="/signup">/signup</Link></li>
        <li>Create a new chatbot: <Link href="/chatbots/new">/chatbots/new</Link></li>
        <li>Copy your API Key (e.g. nk_live_xxx...)</li>
      </ol>

      {/* Normal websites */}
      <pre><code>{`<script id="kbasebot-embed"
  src="https://cdn.kbai.dev/kbasebot.min.js?v=1.0.0"
  crossorigin="anonymous"
  data-api-key="YOUR_API_KEY"
  data-position="bottom-right"
  data-widget-color="#10b981"
  data-topbar-color="#111827"
  data-title="KBase AI"
  data-init-open="false"
  data-theme="system"></script>`}</code></pre>

      {/* Next.js */}
      <Script
        id="kbasebot-embed"
        src="https://cdn.kbai.dev/kbasebot.min.js?v=1.0.0"
        strategy="afterInteractive"
        crossOrigin="anonymous"
        data-api-key="YOUR_API_KEY"
        data-position="bottom-right"
        data-widget-color="#10b981"
        data-topbar-color="#111827"
        data-title="KBase AI"
        data-init-open="false"
        data-theme="system"
      />
    </div>
  );
};

export default HowToInstall;