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

pnpm install @psnext/kai"

Basic Usage

import AlxApp from '@psnext/kai';

function MyApp() {
  const config = {
    isChatOpen: true,
    toggleAlxChatOpen: () => setIsChatOpen(!isChatOpen),
    maxCharacters: 2000,
    pathname: '/current-path'
  };

  return <AlxApp config={config} />;
}

Configuration Options

The AlxAppConfig interface provides the following customization options:

Required Properties

| Property | Type | Description | |----------|------|-------------| | isChatOpen | boolean | Controls whether the chat interface is visible | | toggleAlxChatOpen | () => void | Function to toggle chat visibility |

Optional Properties

| Property | Type | Default | Description | |----------|------|---------|-------------| | maxCharacters | number | 2000 | Maximum character limit for chat input | | pathname | string | "" | Current application path for context | | showVoiceChat | boolean | true | Enable/disable voice input features | | acceptedFileTypes | string | * | Comma-separated list of accepted file types | | placeholder | string | Ask me a question... | Custom placeholder text for chat input | | env | object | { hostUrl: "https://dev.lionis.ai", voiceUrl: "https://alx-realtime-aga.nishiajmera21.workers.dev/rtc-aga-connect", mcpServerUrls: ["https://dev.lionis.ai/api/v1/coreai-mcp-server-alx/sse"] } | Environment URLs for API endpoints | | tools | Tool[] | [] | Array of custom tools with name, description, and optional icon |