@saber2pr/ai-assistant

Quickly customize your GPT UI.

Demo see: https://saber2pr.top/ai-assistant/

Installation

npm install @saber2pr/ai-assistant
# or
yarn add @saber2pr/ai-assistant

Quick Start

Import and initialize in your project:

import { initAIAssistant } from '@saber2pr/ai-assistant';

initAIAssistant({
  welcomeMessage: 'Hello! I am your AI assistant. How can I help you today?',
  suggestions: ['How to use this UI?', 'Tell me about assistant-ui'],
  locale: 'en-US',
  theme: () => document.body.getAttribute('data-theme') === 'dark' ? 'dark' : 'light'
});

API Reference

initAIAssistant(config?: AIAssistantConfig, container?: HTMLElement)

Initializes and mounts the AI assistant. This assistant runs entirely in the browser using web-llm, meaning no backend server is required.

• config: Configuration object (optional)
• container: The DOM container to mount to, defaults to document.body

AIAssistantConfig

| Parameter | Type | Default | Description | | ------------------ | ------------------------------------------------ | --------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | containerId | string | 'ai-assistant-root' | The ID of the container element where the assistant will be mounted. | | emptyMessage | string | - | The message displayed when the thread list is empty. | | initialPosition | { x: number; y: number } | Bottom-right | The initial coordinates of the floating button. | | locale | 'zh-CN' \| 'en-US' | 'zh-CN' | The language locale for the UI. | | maxContextLength | number | 2500 | Maximum total characters in the context. Messages will be truncated from the oldest if exceeded. Set to 0 to disable. | | maxMessages | number | 20 | Maximum number of messages to keep in context. Older messages will be truncated. Set to 0 to disable. | | maxTokens | number | 3200 | Maximum estimated tokens in the context. This prevents exceeding the model's context window. For 4096 context window models, safe value is ~3200 (leaves ~900 tokens buffer). Set to 0 to disable. | | onBeforeChat | Function | - | A hook to intercept and modify messages before they are sent to the AI. | | placeholder | string | - | The placeholder text for the message input box. | | suggestions | string[] | - | A list of suggested questions to show when the chat is empty. | | theme | 'light' \| 'dark' \| (() => 'light' \| 'dark') | 'light' | The theme for the UI. Supports a function for dynamic updates when the drawer opens. | | welcomeMessage | string | - | The welcome message displayed at the top of the chat. |

Local Development

Start the service:

yarn install

yarn dev