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.

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

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

Basic Usage

"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 |