Chat Bot SDK Documentation

THIS IS EARLY ALPHA SOFTWARE AND WE ARE TAKING FEEDBACK AND UPDATING ACCORDINGLY

To use the SDK, you need to install the npm package called @sphereone/kinetix-chatbot-sdk.

Install the package:

npm install @sphereone/kinetix-chatbot-sdk

Import React Component

React Apps

// inside of index.tsx/index.jsx
import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { ChatBot } from "@sphereone/kinetix-chatbot-sdk";

const root = ReactDOM.createRoot(
  document.getElementById("root") as HTMLElement
);
root.render(
  <React>
    <ChatBot agents={["DexV2", "DexV3", "PerpV1", "PerpV2", "Knowledge_Agent"]}>
      <App />
    </ChatBot>
  </React>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

NextJs

// inside of page.tsx
import Image from "next/image";
import { ChatBot } from "@sphereone/kinetix-chatbot-sdk";

export default function Home() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      <div className="z-10 w-full max-w-5xl items-center justify-between font-mono text-sm lg:flex">
        <p className="fixed left-0 top-0 flex w-full justify-center border-b border-gray-300 bg-gradient-to-b from-zinc-200 pb-6 pt-8 backdrop-blur-2xl dark:border-neutral-800 dark:bg-zinc-800/30 dark:from-inherit lg:static lg:w-auto  lg:rounded-xl lg:border lg:bg-gray-200 lg:p-4 lg:dark:bg-zinc-800/30">
          Get started by editing&nbsp;
          <code className="font-mono font-bold">src/app/page.tsx</code>
        </p>
        <div className="fixed bottom-0 left-0 flex h-48 w-full items-end justify-center bg-gradient-to-t from-white via-white dark:from-black dark:via-black lg:static lg:size-auto lg:bg-none">
          <a
            className="pointer-events-none flex place-items-center gap-2 p-8 lg:pointer-events-auto lg:p-0"
            href="https://vercel.com?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
            target="_blank"
            rel="noopener noreferrer"
          >
            By{" "}
            <Image
              src="/vercel.svg"
              alt="Vercel Logo"
              className="dark:invert"
              width={100}
              height={24}
              priority
            />
          </a>
        </div>
      </div>
      <ChatBot
        agents={["DexV2", "DexV3", "PerpV1", "PerpV2", "Knowledge_Agent"]}
      />
    </main>
  );
}

Optional Parameters

<ChatBot
  agents={["DexV2", "DexV3", "PerpV1", "PerpV2", "Knowledge_Agent"]} // Add the agents, this should match correctly with the agents in the backend
  darkMode={false} // Will enable light theme, any other value will enable dark theme
  logoUrl="https://some-image.png" // Add a custom logo
/>

Features

• Supports React and Next.js (SSR)
• Customizable agents
• Dark and light themes
• Custom logo support

Feedback and Contribution

This is an early alpha release, and we welcome feedback and contributions. Please reach out to us with any suggestions or issues.

License

This project is licensed under the MIT License.