npm package: @ryklen/ryklen-js
Description: AI-powered chatbot component by Ryklen.
Latest version: 1.0.37

# Ryklen Chatbot - `@ryklen/ryklen-js`

[![npm version](https://badge.fury.io/js/%40ryklen%2Fryklen-js.svg)](https://www.npmjs.com/package/@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:

```sh
npm install @ryklen/ryklen-js
```

Or with yarn:

```sh
yarn add @ryklen/ryklen-js
```

## 🚀 **Usage**

### 1️⃣ **React (JS/TS)**

```sh
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:

```sh
'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 <script> tag.

#### ✅ Always load the latest version:

```sh
<!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):

```sh
<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**

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

## License

MIT License © 2025 Ryklen.