嵌入式聊天组件

AnythingLLM 的嵌入式聊天组件允许您将强大的 AI 对话功能直接集成到您的网站或应用程序中，为用户提供无缝的智能助手体验。

主要特性

无缝集成

• 简单嵌入：通过简单的代码片段即可集成
• 响应式设计：自动适应不同屏幕尺寸
• 自定义样式：完全可定制的外观和感觉

功能完整

• 完整对话：支持完整的 AI 对话功能
• 文档检索：可以访问您的知识库
• 多模态支持：支持文本、图片等多种输入

集成方式

JavaScript 嵌入

<!-- 基础嵌入代码 -->
<div id="anythingllm-chat"></div>
<script src="https://your-instance.com/embed.js"></script>
<script>
  AnythingLLMChat.init({
    baseUrl: 'https://your-instance.com',
    workspaceSlug: 'your-workspace',
    apiKey: 'your-api-key'
  });
</script>

iframe 嵌入

<!-- iframe 方式嵌入 -->
<iframe 
  src="https://your-instance.com/embed/your-workspace"
  width="400" 
  height="600"
  frameborder="0">
</iframe>

React 组件

import { AnythingLLMChat } from '@anythingllm/embed-react';

function App() {
  return (
    <AnythingLLMChat
      baseUrl="https://your-instance.com"
      workspaceSlug="your-workspace"
      apiKey="your-api-key"
    />
  );
}

配置选项

基础配置

• baseUrl：AnythingLLM 实例的 URL
• workspaceSlug：要连接的工作区标识
• apiKey：API 访问密钥

外观定制

AnythingLLMChat.init({
  // 基础配置
  baseUrl: 'https://your-instance.com',
  workspaceSlug: 'your-workspace',
  
  // 外观定制
  theme: 'light', // 'light' | 'dark' | 'auto'
  primaryColor: '#3b82f6',
  fontFamily: 'Inter, sans-serif',
  borderRadius: '8px',
  
  // 尺寸设置
  width: '400px',
  height: '600px',
  position: 'bottom-right', // 'bottom-right' | 'bottom-left' | 'inline'
  
  // 功能开关
  showHeader: true,
  showFooter: true,
  allowFileUpload: true,
  enableVoiceInput: false
});

高级选项

AnythingLLMChat.init({
  // 消息定制
  welcomeMessage: '您好！我是您的 AI 助手，有什么可以帮助您的吗？',
  placeholder: '输入您的问题...',
  
  // 行为设置
  autoOpen: false,
  persistSession: true,
  maxMessages: 100,
  
  // 回调函数
  onMessage: (message) => {
    console.log('新消息:', message);
  },
  onError: (error) => {
    console.error('错误:', error);
  }
});

使用场景

客户支持

• 24/7 支持：提供全天候客户服务
• 常见问题：自动回答常见问题
• 人工转接：必要时转接人工客服

产品文档

• 智能搜索：在产品文档中智能搜索
• 使用指导：提供产品使用指导
• 故障排除：协助用户解决问题

教育培训

• 学习助手：作为学习伙伴提供帮助
• 知识问答：回答学习相关问题
• 进度跟踪：跟踪学习进度

电商网站

• 产品推荐：基于用户需求推荐产品
• 购买咨询：提供购买建议
• 订单查询：协助查询订单状态

安全考虑

API 密钥管理

• 服务端代理：通过服务端代理 API 调用
• 权限限制：限制 API 密钥的访问权限
• 定期轮换：定期更换 API 密钥

数据保护

• HTTPS 传输：确保所有通信都通过 HTTPS
• 数据加密：敏感数据进行加密处理
• 隐私合规：遵守相关隐私法规

性能优化

加载优化

• 懒加载：按需加载聊天组件
• CDN 加速：使用 CDN 加速资源加载
• 缓存策略：合理设置缓存策略

用户体验

• 加载状态：显示加载状态指示器
• 错误处理：优雅处理错误情况
• 离线支持：提供基础的离线功能

故障排除

常见问题

• 无法加载：检查 URL 和网络连接
• 认证失败：验证 API 密钥是否正确
• 样式异常：检查 CSS 冲突

调试技巧

1. 开启调试模式：在配置中启用 debug 选项
2. 查看控制台：检查浏览器控制台的错误信息
3. 网络监控：监控网络请求的状态

最佳实践

设计原则

1. 用户友好：确保界面直观易用
2. 响应迅速：优化响应时间
3. 一致性：保持与网站整体风格一致
4. 可访问性：确保所有用户都能使用

部署建议

• 测试环境：在生产环境前充分测试
• 监控告警：设置监控和告警机制
• 备份方案：准备备用方案
• 用户反馈：收集用户反馈持续改进

---

了解更多关于 AnythingLLM 的其他功能，请查看我们的功能概览页面。