@ryklen/ryklen-js NPM

Ryklen Chatbot - `@ryklen/ryklen-js`

🚀 Ryklen Chatbot is an AI-powered chatbot component that can be used in both React and non-React environments.

📦 Installation

For React & Next.js

Install via npm:

npm install @ryklen/ryklen-js

Or with yarn:

yarn add @ryklen/ryklen-js

🚀 Usage

1️⃣ React (JS/TS)

import "@ryklen/ryklen-js/style.css";
import { RyklenChat } from "@ryklen/ryklen-js";

function App() {
  const token = "some token";

  return (
    <RyklenChat
      getToken={async () => {
        return token;
      }}
      options={{ displayMode: "dialog", chatSessionKey: "testChatId" }}
    />
  );
}

export default App;

2️⃣ Next.js

Same as React, but add 'use client' at the top:

'use client';
import "@ryklen/ryklen-js/style.css";
import { RyklenChat } from "@ryklen/ryklen-js";

function ChatPage() {
  return <RyklenChat getToken={async () => "your-token"} />;
}

export default ChatPage;

3️⃣ Plain JavaScript (UMD)

No React required! Just use a tag.

✅ Always load the latest version:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Ryklen Chatbot</title>
    <link rel="stylesheet" href="https://unpkg.com/@ryklen/ryklen-js/dist/ryklen-js.css" />
    <script src="https://unpkg.com/@ryklen/ryklen-js/dist/ryklen-js.umd.js"></script>
  </head>
  <body>
    <script>
      window.addEventListener("load", async function () {
        await Ryklen.load({
          getToken: async () => {
            const token =
              "some token";

            return token;
          },
        });
      });
    </script>
  </body>
</html>

🔒 Lock to a specific version (e.g., 1.0.0):

<link rel="stylesheet" href="https://unpkg.com/@ryklen/ryklen-js@1.0.0/dist/ryklen-js.css" />
<script src="https://unpkg.com/@ryklen/ryklen-js@1.0.0/dist/ryklen-js.umd.js"></script>

⚙️ Configuration Options

The RyklenChat component accepts the following props:

Required Props

Prop	Type	Description
`organizationId`	`string`	The organization ID for all API requests. Required.
`getToken`	`() => Promise<string>`	A function that returns a fresh authentication token for API requests. (Optional)

Optional Props (inside `options` object)

Option	Type	Default	Description
`displayMode`	`"dialog"` or `"standalone"`	`"dialog"`	Defines how the chatbot is displayed: `"dialog"` (floating button) or `"standalone"` (always visible).
`chatSessionKey`	`string`	`"chatSessionId"`	Custom session key for chat persistence. If omitted, the default session key is used.
`requestInterceptor`	`(config: RequestInterceptorConfig) => Promise<RequestInterceptorConfig>`	`undefined`	Function to modify API requests before they are sent (e.g., add headers).

Example Usage

<RyklenChat
  getToken={async () => "your-token"}
  options={{
    displayMode: "dialog",
    chatSessionKey: "customChatId",
    requestInterceptor: async (config) => {
      config.headers = {
        ...config.headers,
        Authorization: `Bearer my-custom-token`,
      };
      return config;
    },
  }}
/>