0.0.2 • Published 6 months ago
testing-alpha-custom-vite2 v0.0.2
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
<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.