ACP Chat组件配置中心 ​

🔗 在线体验 ​

项目访问地址 ​

• ACP Chat组件配置中心： http://118.89.134.12:8024/#/chat-config
• ACP智能体平台： https://agent.unidt.com/

📋 项目简介 ​

ACP Chat组件配置中心是依托于 ACP智能体平台 的可视化配置工具，支持实时预览和代码导出功能。通过直观的界面操作，可以快速配置Chat组件的应用标识、助手选择等属性，并支持实时预览配置效果，大大提升了Chat组件集成的开发效率。

搭建平台：所有智能体应用请在 ACP智能体平台 上进行搭建和管理。

核心能力：Chat组件可在配置中心进行可视化配置和管理，支持导出为Vue3组件或完整项目。

🚀 核心功能 ​

1. 应用标识管理 ​

• 智能验证：自动验证AppCode的有效性
• 状态显示：清晰显示验证状态和环境信息
• 环境标识：区分正式环境和测试环境

2. 快速选择助手 ​

• 多场景助手：支持测试通用聊天、社保支出助手、金融小助手等
• 快速切换：一键切换不同助手配置
• 信息展示：显示助手ID、名称和功能描述

3. 实时配置预览 ​

• PC端预览：实时展示聊天界面效果
• 自动更新：配置修改后预览自动更新
• 完整展示：包含消息历史、交互功能等完整界面

4. 代码导出 ​

• Vue3组件导出：可集成至现有前端项目
• 完整项目导出：前端可独立运行部署
• 即插即用：导出代码可直接使用

🛠️ 使用方法 ​

第一步：选择智能体助手 ​

在左侧配置面板选择需要的聊天助手，系统会自动验证应用标识

第二步：查看预览效果 ​

右侧预览区域会实时显示配置效果，可以查看聊天界面的完整展示

第三步：导出代码 ​

点击"导出代码"按钮，选择导出类型：

• 导出Vue3组件：适用于集成到现有前端项目
• 导出Vue3完整项目：适用于独立运行和部署

💡 应用场景 ​

• 智能客服：快速集成智能客服功能到业务系统
• 业务助手：为特定业务场景配置专用助手
• 数据分析：集成数据分析对话功能
• 知识问答：快速搭建知识问答系统

🌟 优势特点 ​

1. 可视化配置：通过直观界面配置，无需编写代码
2. 实时预览：配置修改后立即看到效果
3. 灵活导出：支持组件和完整项目两种导出方式
4. 快速集成：导出代码可直接使用，开箱即用

📦 组件功能 ​

Chat组件支持以下完整功能：

• 🗨️ 实时对话交互：流畅的对话体验
• 📁 文件上传与处理：支持多种文件格式上传
• 🎤 语音输入识别：语音转文字输入
• 📊 图表数据展示：自动生成和展示数据图表
• ⚡ 流式消息处理：实时流式响应
• 🎨 打字机效果显示：优雅的消息展示效果
• 📱 响应式设计适配：适配不同设备尺寸

🛠️ 技术栈 ​

Chat组件基于以下技术栈构建：

• Vue 3：现代化的前端框架
• Element Plus：企业级UI组件库
• ECharts：强大的图表库
• TypeScript：类型安全的开发体验
• UnoCSS：原子化CSS框架

🚀 快速开始 ​

1. 访问 ACP智能体平台 进行智能体搭建
2. 使用 ACP Chat组件配置中心 进行组件配置
3. 在左侧选择需要的智能体助手
4. 查看右侧实时预览效果
5. 点击"导出代码"获取集成代码或完整项目

💬 技术支持 ​

如有任何问题或建议，欢迎联系我们：

• 技术支持：前端共享中心-张文鑫
• 反馈建议：wenxin.zhang@unidt.com

通过 ACP Chat组件配置中心，依托ACP智能体平台，让Chat组件集成开发变得更加简单高效！