连接聊天服务
通过 connect 属性指定服务地址，将网页中的消息发送至自有服务；目标服务需处理 deep-chat 使用的请求与响应格式。
BAIZE AI RESOURCE
网站 AI 对话组件
Deep-chat
Deep-chat 是可嵌入网站的 AI 对话组件，适合需要为网页加入聊天功能的开发者。它可连接自有服务或 AI API，并提供文件、语音等交互能力，减少从零搭建聊天界面的工作。
资源介绍
Deep-chat 是面向网站的可定制 AI 对话组件，适合希望在网页中加入智能客服、AI 助手或自有聊天服务的开发者。安装组件后，可在页面中加入聊天窗口，再通过 connect 属性连接能够处理其请求与响应格式的服务。它也提供从浏览器直接连接部分 AI API 的方式，但这种方式会向浏览器暴露 API Key，仅适合本地开发、原型或演示；正式上线应改用服务端代理。除文字对话外，组件还支持文件收发、摄像头拍照、麦克风录音、语音输入与回复朗读，并可调整头像、名称及界面样式。
应用能力
对接 AI API
支持从浏览器直接连接 OpenAI、Claude 等 AI API，适合本地原型和演示；正式上线应使用代理服务保护 API Key。
文件与拍摄交互
支持收发文件，并可启用摄像头拍照和麦克风录音，让用户在聊天中提交文字以外的内容。
语音对话辅助
可开启语音转文字输入和文字转语音朗读，方便用户口述消息或听取回复。
自定义聊天界面
可配置头像、名称、介绍面板及界面样式，以适配网站的展示需求。
资源配置
应用版本
2.5.1
运行环境
APIWeb
安装方式
包管理器安装命令安装
依赖环境
浏览器
安装与使用
在网站项目中安装 deep-chat；React 项目可安装 deep-chat-react。
在页面中加入 ＜deep-chat＞＜/deep-chat＞，具体写法随所用页面框架调整。
通过 connect 属性填写聊天服务地址，并确保该服务支持组件的请求与响应格式。
按需启用文件、摄像头、麦克风或语音功能；正式上线连接 AI API 时，使用服务端代理而非在浏览器中暴露 API Key。
使用案例
网站智能客服入口
使用场景网站开发者已有自己的问答服务，需要让访客在网页上发起对话。
将 deep-chat 加入页面，并用 connect 指向现有服务，为访客提供网页聊天窗口。
AI 对话原型演示
使用场景开发者需要快速展示一个连接 OpenAI 的聊天界面。
在本地演示页面使用 directConnection 配置 OpenAI；准备正式上线时，改为通过服务端代理连接。
包含内容
deep-chat-source.zip
README-中文安装说明.md
LICENSE-MIT.txt
SHA256.txt
常见问题
Deep-chat 能连接自己的聊天服务吗？
可以。通过 connect 属性指定服务 URL；该服务需要处理 deep-chat 使用的请求与响应格式。
可以直接在浏览器中连接 OpenAI 吗？
可以使用 directConnection，但这种方式会向浏览器暴露 API Key，仅适合本地开发、原型或演示。正式上线应通过 connect 连接服务端代理。
React 项目应安装哪个包？
React 项目可安装 deep-chat-react；其他项目的基础安装包为 deep-chat。
相关资源
