@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