AI Chat Widget

一个基于 React + FastAPI + LangChain 的 AI 聊天组件，支持 RAG 知识库检索，一键集成 AI 聊天功能。

特性

• 🚀 开箱即用的 React 组件
• 💬 流式输出（WebSocket）
• 📚 RAG 知识库检索支持
• 🎨 支持明暗主题
• 📱 响应式设计
• 🔧 高度可配置

安装

npm install ai-chat-widget
# or
yarn add ai-chat-widget
# or
pnpm add ai-chat-widget

使用

import { ChatWidget, ChatConfig } from 'ai-chat-widget';
import 'ai-chat-widget/style.css';

function App() {
  const config: ChatConfig = {
    position: 'bottom-right',
    theme: 'light',
    primaryColor: '#3b82f6',
    welcomeMessage: '你好！有什么可以帮助你的吗？',
    placeholder: '输入消息...',
    enableStreaming: true,
    enableHistory: true,
  };

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

配置项

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | position | 'bottom-right' \| 'bottom-left' \| 'top-right' \| 'top-left' | 'bottom-right' | 挂件位置 | | theme | 'light' \| 'dark' \| 'auto' | 'light' | 主题 | | primaryColor | string | '#3b82f6' | 主题色 | | welcomeMessage | string | - | 欢迎消息 | | placeholder | string | '输入消息...' | 输入框占位符 | | enableStreaming | boolean | true | 启用流式输出 | | enableHistory | boolean | true | 启用历史记录 | | sessionId | string | - | 会话 ID | | userId | string | - | 用户 ID |

后端配置

需要配合后端 API 使用。后端项目基于 FastAPI + LangChain：

# 设置环境变量
export LLM_API_KEY=your-openai-api-key
export LLM_MODEL=gpt-3.5-turbo

# 启动后端
cd backend
python -m app.main

环境变量

| 变量名 | 说明 | |--------|------| | LLM_API_KEY | OpenAI API Key | | LLM_MODEL | 模型名称（默认 gpt-3.5-turbo） | | LLM_BASE_URL | API Base URL（可选） | | EMBEDDING_API_KEY | Embedding API Key | | EMBEDDING_MODEL | Embedding 模型 |

知识库

将文档放入 backend/app/knowledge/ 目录（支持 .txt, .md），后端启动时自动加载。

API 端点

• POST /api/v1/chat - 聊天接口
• POST /api/v1/search - 知识库搜索
• WS /ws/chat - WebSocket 流式聊天

开发

# 安装依赖
npm install

# 开发模式
npm run dev

# 构建
npm run build

License

MIT

作者

陈涛 - 南京信息职业技术学院