liteagent-chatkit
v2.0.0
Published
可嵌入企业官网的智能问答组件 SDK
Downloads
222
Maintainers
litevarReadme
LiteAgent ChatKit
English · 中文
A beautiful and embeddable chat UI component SDK for integrating AI assistants into your website.
Features
- 🌐 Multi-Platform Support: Works seamlessly in browsers, supports UMD and ES Module formats
- 💬 Rich Interactions: Supports text, images, markdown rendering, and streaming responses
- 🔌 Easy Integration: Plug and play in vanilla JavaScript, React, Vue, and other frameworks
- 🛠️ TypeScript Support: Fully typed API with comprehensive type declarations
Installation
Install the package using npm:
npm install liteagent-chatkitOr using yarn:
yarn add liteagent-chatkitUsage
Quick Start with HTML (UMD)
<!DOCTYPE html>
<html>
<head>
<link href="https://unpkg.com/liteagent-chatkit/dist/chatkit.css" rel="stylesheet">
</head>
<body>
<div id="chat-container"></div>
<script src="https://unpkg.com/liteagent-chatkit/dist/index.umd.js"></script>
<script>
const chat = new LiteAgentChatKit.LiteAgentChatKit({
container: '#chat-container',
agentList: [{
name: 'your-agent-name',
baseUrl: 'https://your-api-endpoint.com',
secretKey: 'your-secret-key'
}]
});
</script>
</body>
</html>ES Module Import
import { LiteAgentChatKit } from 'liteagent-chatkit';
import 'liteagent-chatkit/dist/chatkit.css';
const chat = new LiteAgentChatKit({
container: '#chat-container',
agentList: [{
name: 'your-agent-name',
baseUrl: 'https://your-api-endpoint.com',
secretKey: 'your-secret-key'
}]
});React Integration
import { useEffect, useRef } from 'react';
import { LiteAgentChatKit } from 'liteagent-chatkit';
import 'liteagent-chatkit/dist/chatkit.css';
function ChatComponent() {
const containerRef = useRef(null);
const chatRef = useRef(null);
useEffect(() => {
if (containerRef.current && !chatRef.current) {
chatRef.current = new LiteAgentChatKit({
container: containerRef.current,
agentList: [{
name: 'your-agent-name',
baseUrl: 'https://your-api-endpoint.com/v1',
secretKey: 'your-secret-key'
}],
});
}
return () => {
if (chatRef.current) {
chatRef.current.destroy();
}
};
}, []);
return <div ref={containerRef} />;
}Configuration
Basic Configuration
const chat = new LiteAgentChatKit({
// Required: Container selector (string) or DOM element
container: '#chat-container',
// Required: Agent configuration list
agentList: [{
name: 'your-agent-name', // Agent display name
baseUrl: 'https://api.example.com', // API endpoint URL
secretKey: 'your-secret-key' // API authentication key
}],
// Optional: Theme customization
theme: {
bgColor: '#ffffff' // Background color
},
// Optional: Header configuration
header: {
title: 'AI Assistant', // Header title text
logoUrl: 'https://example.com/logo.png' // Logo image URL
},
// Optional: Event callbacks
events: {
onClose: () => { // Triggered when close button clicked
console.log('Chat closed');
}
}
});Package Structure
dist/
├── index.umd.js # UMD format
├── index.esm.js # ES Module format
├── chatkit.css # Styles
├── index.d.ts # TypeScript declarations
└── ... # Other type declaration filesBrowser Compatibility
- Chrome ≥ 90
- Firefox ≥ 88
- Safari ≥ 14
- Edge ≥ 90
License
MIT