Deep Chat 是一个完全可定制的 AI 聊天组件，只需 一行代码 即可轻松注入到您的网站中。无论您是想创建一个基于 ChatGPT 等热门 API 的聊天机器人，还是连接到您自己的自定义服务，这个组件都能满足您的需求！请访问 deepchat.dev 查看所有可用功能、使用方法、示例等内容！

:rocket: 主要特性

• 可连接任意 API
• 支持头像和昵称
• 支持文件发送与接收
• 通过摄像头拍摄照片
• 通过麦克风录制音频
• 支持语音到语音的交流
• 支持语音转文本输入消息
• 支持文本转语音朗读回复消息
• 内置 MarkDown 和自定义元素支持，便于文本排版和代码渲染
• 提供介绍面板和动态弹窗，帮助向用户说明功能
• 直接从浏览器连接超过 20 种热门 AI API，如 OpenAI 或 Claude
• 支持语音到语音模型的交互
• 兼容主流 UI 框架和库
• 在浏览器端部署模型
• 聚焦模式，仅显示最新消息
• 所有内容均可自定义！

:tada: 最新更新

Deep Chat 2.4.0 版本为生态系统带来了大量新特性：

• 新增 scrollButton 和 hiddenMessages 组件，用于优化长对话场景下的用户体验！
• upwardsMode 可用于向上填充消息。
• directConnection 现在支持 Open WebUI。
• browserStorage 现在可以存储 inputText 和 scrollHeight 值，从而提升会话恢复体验。
• 更多详情请参阅 发布说明！

2.3.0 更新：

• directConnection 现在支持超过 20 种 AI API！
• htmlWrappers 现在可用于为所有消息统一自定义样式。
• 您现在可以为 remarkable 使用自定义插件，例如 Katex。
• 通过 displayLoadingBubble 中的 toggle 函数，可更改加载气泡的样式。
• 更多详情请参阅 发布说明！

2.2.2 更新：

• browserStorage 允许您在浏览器本地存储消息，无需担心后端消息集成问题。
• 按钮 tooltips。
• 将流式传输的消息放入自定义 htmlWrappers 中。
• 更多详情请参阅 发布说明！

2.2.0 更新：

• 支持 OpenAI Realtime API 进行语音到语音交流
• 聚焦模式 只显示最新的消息交互，带来现代化的 AI 聊天机器人体验
• 自定义按钮
• Response 现在可以包含多条消息
• 能够连接到 Readable Stream APIs
• 更多详情请参阅 发布说明！

:computer: 快速开始

npm install deep-chat

如果您使用的是 React，请安装以下包：

npm install deep-chat-react

然后在您的 HTML 中添加如下代码即可：

<deep-chat></deep-chat>

具体语法会根据您选择的框架有所不同（请参阅此处）。

:computer: 使用 AI 安装

您可以参考 llms.txt 文件，利用代码助手快速安装并配置 Deep Chat：

"请使用 https://github.com/OvidijusParsiunas/deep-chat/blob/main/llms.txt 将聊天组件添加到我的网站。"

:zap: 连接

连接服务非常简单，您只需使用 request 属性定义 API 的详细信息：

<deep-chat request='{"url":"https://service.com/chat"}'/>

请注意，该服务需要能够处理 Deep Chat 使用的请求和响应格式。请阅读文档中的 Connect 部分，并查看 服务器模板 示例。

此外，如果您不想修改目标服务，也可以使用 interceptor 属性来增强传递的对象，或者使用 handler 函数来控制请求逻辑。

:electric_plug: 直接连接

您可以通过 directConnection 属性直接从浏览器连接热门 AI API：

<deep-chat directConnection='{"openAI":true}'/>

<deep-chat directConnection='{"openAI":{"key": "optional-key-here"}}'/>

请注意，这种方法仅适用于本地开发、原型设计或演示场景，因为它会将 API 密钥暴露在浏览器中。正式上线时，请改用上述描述的 connect 属性，并配合 代理服务 使用。

:robot: 网页模型

无需服务器，无需连接，即可在您的浏览器中完全托管一个大语言模型。

只需添加 deep-chat-web-llm 模块，并定义 webModel 属性：

<deep-chat webModel="true" />

:camera: :microphone: 摄像头与麦克风

使用 Deep Chat 通过网络摄像头拍摄照片，并用麦克风录制音频。您可以通过 camera 和 microphone 属性来启用此功能：

<deep-chat camera="true" microphone="true" ...其他属性 />

:microphone: :sound: 语音

https://github.com/OvidijusParsiunas/deep-chat/assets/18709577/e103a42e-b3a7-4449-b9db-73fed6d7876e

利用语音转文本功能，通过语音输入文本，并让系统通过文本转语音功能将回复朗读给您听。您可以通过 speechToText 和 textToSpeech 属性来启用此功能。

<deep-chat speechToText="true" textToSpeech="true" ...其他属性 />

:beginner: 示例

查看针对您所选 UI 框架/库 的实时 CodePen 示例：

React	Vue 2	Vue 3	Svelte	SvelteKit	Angular	Solid	Next	Nuxt	VanillaJS

借助以下 服务器模板，搭建您自己的服务器从未如此简单。从创建您自己的服务到为 OpenAI 等其他 API 设置代理，所有内容都配有清晰的示例说明，让您在几秒钟内即可快速上手：

Express	Nest	Flask	Spring	Go	SvelteKit	Next

所有示例都已准备好部署到诸如 Vercel 之类的托管平台上。

:tv: 教程

演示视频可在 YouTube 上找到：

:joystick: 演示平台

在官方的 Playground 中，无需编写任何代码即可创建、配置和使用 Deep Chat 组件！

:tada: 更新 - 现在可以使用新的 展开视图将组件拉伸至全屏尺寸：

:heart: 贡献

开源是由社区为社区构建的。欢迎对本项目做出任何贡献！
此外，如果您有任何改进建议、进一步推进该项目的想法，或发现了 bug，请随时创建一个新的问题单，我们将尽快予以处理！

Deep Chat 快速上手指南

Deep Chat 是一个完全可定制的 AI 聊天组件，只需一行代码即可嵌入您的网站。它支持连接 ChatGPT、Claude 等主流 API，也支持自定义后端服务或直接在浏览器端运行模型。

环境准备

• 系统要求：支持现代浏览器的操作系统（Windows, macOS, Linux）。
• 前置依赖：
  • Node.js (推荐 v16+) 和 npm/yarn/pnpm。
  • 任意前端框架（React, Vue, Svelte, Angular 等）或纯原生 JavaScript 项目。
• 网络提示：由于部分 AI 服务（如 OpenAI）在国内访问受限，建议在生产环境中通过国内服务器进行代理转发，或使用支持国内访问的模型接口。

安装步骤

根据您的项目类型选择以下一种安装方式：

1. 标准项目 (Vanilla JS / 通用)

npm install deep-chat

2. React 项目

npm install deep-chat-react

提示：如果 npm 下载缓慢，可使用淘宝镜像源加速：

npm install deep-chat --registry=https://registry.npmmirror.com

基本使用

1. 引入组件

在您的 HTML 或组件文件中添加标签。具体语法取决于您使用的框架（详见官方框架示例），通用 HTML 写法如下：

<deep-chat></deep-chat>

2. 连接 AI 服务

方案 A：直连主流 API (仅限本地开发/演示)

直接在浏览器中连接 OpenAI 等服务。注意：此方式会暴露 API Key，严禁用于生产环境。

<deep-chat directConnection='{"openAI": {"key": "YOUR_API_KEY"}}'/>

方案 B：连接自定义后端 (推荐生产环境)

通过 request 属性指定您的后端接口地址。后端需处理 Deep Chat 定义的请求/响应格式。

<deep-chat request='{"url":"https://your-service.com/chat"}'/>

方案 C：浏览器端运行模型 (无服务器)

无需后端，直接在浏览器加载并运行 LLM 模型（需引入 deep-chat-web-llm 模块）。

<deep-chat webModel="true" />

3. 启用高级功能 (可选)

您可以通过添加属性快速启用摄像头、麦克风及语音交互功能：

<deep-chat 
  camera="true" 
  microphone="true" 
  speechToText="true" 
  textToSpeech="true" 
  request='{"url":"https://your-service.com/chat"}'
/>

更多详细配置（如头像设置、Markdown 渲染、流式输出等）请访问 deepchat.dev 查看完整文档。