npm package: @psnext/kai
Description: Chat UI
Author: CoreAI
Latest version: 2.0.7

# kai

A React-based AI chat interface component that can be embedded into any host application. ALX provides an intelligent conversational interface with support for file attachments, voice input, and contextual Search capabilities.

## Installation

Add .npmrc in root directory.
Please reach out to AppFramework team for .npmrc.

```bash
pnpm install @psnext/kai
```

## Running this package locally

1. Clone the  repo.
2. Add .npmrc in root directory.
3. Run command `pnpm install`
4. Run `pnpm build`
5. In consumer repo, add dependency

```bash
"@psnext/kai": "file:relative_kai_repo_path”
```

## Basic Usage

```tsx
"use client";
import { useState } from "react";
import dynamic from "next/dynamic";
const Kai = dynamic(() => import("@psnext/kai"), { ssr: false });
import "@psnext/kai/styles.css";

function MyApp() {
  const [isChatOpen, setIsChatOpen] = useState(true);

  const toggleChatOpen = () => {
    setIsChatOpen(!isChatOpen);
  };

  const config = {
    display: {
      isAlxOpen: isChatOpen,
    },
    integrations: {
      conversation: {
        url: "your_conversation_endpoint",
      },
      chatHistory: {
        url: "your_chat_history_endpoint",
      },
      realtime: {
        url: "your_realtime_endpoint",
      },
      mcpConfig: {
        url: "your_mcp_config_endpoint",
      },
    },
    mainContainer: {
      header: {
        labels: {
          title: "ALX",
        },
        features: {
          enableChatMaximize: true,
        },
        callbacks: {
          onDisplayToggle: toggleChatOpen,
        },
      },
      chat: {
        labels: {
          userName: "",
          welcomeMessage: "Hello, How can I help you?",
        },
      },
      footer: {
        features: {
          enableRealtime: true,
          enableAttachments: true,
          documents: {
            enableDocuments: true,
            allowedDocuments: {
              accept: ".pdf,.doc,.docx",
            },
          },
        },
        callbacks: {
          onUserQuery: (requestId: string) =>
            console.log("requestId", requestId),
          onAgentResponse: (requestId: string, response: any) =>
            console.log("requestId", requestId, "response", response),
        },
      },
    },
  };

  return (
    <div className='cai-midnight'>
      <Kai config={config} />
    </div>
  );
}
```

## Configuration Options

### Display Property

| Property            | Type      | Description                                    | Optional/Required |
| ------------------- | --------- | ---------------------------------------------- | ----------------- |
| `display.isAlxOpen` | `boolean` | Controls whether the chat interface is visible | Required          |

Got it 👍 — your new config structure nests things differently (integrations + mainContainer split). Here’s the **updated config documentation tables** that match your latest structure:

---

## Configuration Options (Updated)

### Integrations

| Property                                 | Type       | Default                                                                     | Description                             | Optional/Required |
| ---------------------------------------- | ---------- | --------------------------------------------------------------------------- | --------------------------------------- | ----------------- |
| `integrations.host.url`                  | `string`   | –                                                                           | Host service endpoint                   | Optional          |
| `integrations.transcription.urls`        | `string[]` | –                                                                           | List of transcription service endpoints | Optional          |
| `integrations.conversation.url`          | `string`   | `https://dev.lionis.ai/api/v1/coreai-alx-service/chat/`                     | Conversation agent endpoint             | Optional          |
| `integrations.chatHistory.url`           | `string`   | `https://dev.lionis.ai/api/v1/coreai-alx-service/chat/conversations`        | Chat history endpoint                   | Optional          |
| `integrations.realtime.url`              | `string`   | `https://dev.lionis.ai/api/v1/realtime/sessions`                            | Real-time agent endpoint                | Optional          |
| `integrations.mcpConfig.url`             | `string`   | `https://dev.lionis.ai/api/v1/configservice/blocks/alx-mcp-config/manifest` | MCP configuration endpoint              | Optional          |
| `integrations.guardrailInstructions.url` | `string`   | –                                                                           | Guardrail instructions endpoint         | Optional          |

### Main Container

| Property                                      | Type     | Default | Description                                                     | Optional/Required |
| --------------------------------------------- | -------- | ------- | --------------------------------------------------------------- | ----------------- |
| `mainContainer.css.containerClass`            | `string` | –       | Custom CSS classes for main container                           | Optional          |
| `mainContainer.css.fullscreenTransitionClass` | `string` | –       | Custom CSS classes for animation when maximizing chat container | Optional          |

#### Header Configuration

| Property                                           | Type         | Default | Description                             | Optional/Required |
| -------------------------------------------------- | ------------ | ------- | --------------------------------------- | ----------------- |
| `mainContainer.header.css.headerClass`             | `string`     | –       | Custom CSS classes for header container | Optional          |
| `mainContainer.header.features.enableChatMaximize` | `boolean`    | `false` | Enable maximize feature for chat window | Optional          |
| `mainContainer.header.features.disableConversationHistory` | `boolean`    | `false` | Disable conversation history related ui | Optional          |
| `mainContainer.header.labels.title`                | `string`     | `ALX`   | Enable maximize feature for chat window | Optional          |
| `mainContainer.header.callbacks.onDisplayToggle`   | `() => void` | –       | Function to toggle chat visibility      | **Required**      |

#### Chat Configuration

| Property                                                                        | Type                 | Default                            | Description                                                              | Optional/Required |
| ------------------------------------------------------------------------------- | -------------------- | ---------------------------------- | ------------------------------------------------------------------------ | ----------------- |
| `mainContainer.chat.css.chatWrapper.mainWrapperClass`                           | `string`             | –                                  | Custom CSS for the main chat wrapper when maximized                      | Optional          |
| `mainContainer.chat.css.chatWrapper.subWrapperClass`                            | `string`             | –                                  | Custom CSS for the sub chat wrapper when maximized                       | Optional          |
| `mainContainer.chat.css.welcomeMessage.welcomeContainerClass`                   | `string`             | –                                  | Custom CSS for the welcome message chat container                        | Optional          |
| `mainContainer.chat.css.welcomeMessage.chatStartMaximizedClass`                 | `string`             | –                                  | Custom CSS for the welcome message chat bubble when maximized            | Optional          |
| `mainContainer.chat.css.welcomeMessage.mainWelcomMesssageClass`                 | `string`             | –                                  | Custom CSS for the main welcome text message when maximized              | Optional          |
| `mainContainer.chat.css.welcomeMessage.subWelcomMesssageClass`                  | `string`             | –                                  | Custom CSS for the sub welcome text message when maximized               | Optional          |
| `mainContainer.chat.css.userMessage.chatInputSubContainerClass`                 | `string`             | –                                  | Custom CSS for the user input chat bubble sub container when maximized   | Optional          |
| `mainContainer.chat.css.systemMessage.default.messageOptionsContainerClass`     | `string`             | –                                  | Custom CSS for the message options (e.g. Copy button) 1                  | Optional          |
| `mainContainer.chat.css.systemMessage.maximized.chatResponseMainContainerClass` | `string`             | –                                  | Custom CSS for the AI response chat bubble main container when maximized | Optional          |
| `mainContainer.chat.css.systemMessage.maximized.chatResponseSubContainerClass`  | `string`             | –                                  | Custom CSS for the AI response chat bubble sub container when maximized  | Optional          |
| `mainContainer.chat.css.systemMessage.maximized.messageOptionsContainerClass`   | `string`             | –                                  | Custom CSS for the message options (e.g. Copy button) when maximized     | Optional          |
| `mainContainer.chat.features.enableResponseRegenerate`                          | `boolean`            | –                                  | Enable regenerate option for chat responses                              | Optional          |
| `mainContainer.chat.labels.userName`                                            | `string`             | –                                  | Display name for user                                                    | Optional          |
| `mainContainer.chat.labels.welcomeMessage`                                      | `string`             | `This is Kai. How can I help you?` | Custom welcome message displayed in chat                                 | Optional          |
| `mainContainer.chat.data.models`                                                | `TransformedModel[]` | –                                  | List of models passed to Kai                                             | Optional          |
| `mainContainer.chat.data.defaultModel`                                                | `string` | –                                  | Default model to be selected in dropdown                                             | Optional          |
| `mainContainer.chat.data.tokenDetails`                                                | `TransformedTokenDetails` | –                                  | Details related to token limit etc in different models                                             | Optional          |
| `mainContainer.chat.data.documentSizeLimit`                                                | `TransformedDocumentSizeLimit` | –                                  | Details related to document size limit based on models                                            | Optional          |

#### Footer Configuration

| Property                                                          | Type                                         | Default | Description                             | Optional/Required |
| ----------------------------------------------------------------- | -------------------------------------------- | ------- | --------------------------------------- | ----------------- |
| `mainContainer.footer.css.footerClass`                            | `string`                                     | –       | Custom CSS classes for footer container | Optional          |
| `mainContainer.footer.features.enableRealtime`                    | `boolean`                                    | `true`  | Enable real-time chat capabilities      | Optional          |
| `mainContainer.footer.features.enableModelSelection`              | `boolean`                                    | –       | Enable model selection capabilities     | Optional          |
| `mainContainer.footer.features.enableAttachments`                 | `boolean`                                    | `false` | Enable document attachment button       | Optional          |
| `mainContainer.footer.features.documents.enableDocuments`         | `boolean`                                    | `false` | Enable document type upload button      | Optional          |
| `mainContainer.footer.features.documents.allowedDocuments.accept` | `string`                                     | -       | Allowed document type                   | Optional          |
| `mainContainer.footer.callbacks.onUserQuery`                      | `(requestId: string) => void`                | –       | Callback when user submits a query      | Optional          |
| `mainContainer.footer.callbacks.onAgentResponse`                  | `(requestId: string, response: any) => void` | –       | Callback when agent responds            | Optional          |