npm package: @sphereone/kinetix-chatbot-sdk
Description: SphereOne's Chatbot SDK for Kinetix.Finance
Author: SphereOne
Latest version: 2.0.5

# 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:

```sh
npm install @sphereone/kinetix-chatbot-sdk
```

### Import React Component

#### React Apps

```typescript
// 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

```typescript
// 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

```typescript
<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.