Repolode
提交项目
OvidijusParsiunas

OvidijusParsiunas/deep-chat

可嵌入任意网站、一行代码即可接入的可定制 AI 聊天界面组件。

在 GitHub 查看官网
Star
3,743
Fork
459
未关闭 Issue
44
最近提交
14天前

这是什么？

Deep Chat 是一个前端聊天组件，可在网页中加入 AI 对话界面。通过 npm 安装后可直接作为 HTML 元素使用，也提供 React、Vue、Svelte、Angular、Solid 等框架的封装。

组件既可以把请求发送到你自己的服务端，也可以从浏览器直接连接 20 多种 AI 接口，例如 OpenAI 和 Claude。直连方式会将 API Key 暴露在浏览器中，适合原型和演示；正式上线时，项目建议通过代理服务转发请求，并提供了 Express、NestJS、Flask、Spring、Go、SvelteKit 和 Next.js 的服务端模板。

除文本外，组件还支持收发文件、摄像头拍照、麦克风录音、语音转文字、文字转语音，以及基于 OpenAI Realtime API 的语音对语音通信。浏览器端的 web model 选项可以在本地运行 LLM，无需服务器。消息支持 Markdown 渲染，样式、头像、按钮和弹窗均可自定义。

核心功能

  • 01通过 npm 安装，可用于 React、Vue、Svelte 等主流框架
  • 02可对接自定义接口，也可直接连接 20 多家 AI 服务商
  • 03支持文件上传、摄像头拍照和麦克风录音
  • 04支持语音转文字输入与文字转语音输出
  • 05支持 Markdown 渲染，消息样式可自定义
  • 06支持在浏览器端运行模型，无需服务器

适用场景

  • 为企业官网添加 AI 客服聊天机器人
  • 基于 LLM API 快速搭建聊天界面原型
  • 在浏览器中构建支持语音交互的助手
  • 用浏览器内本地模型运行演示聊天机器人

快速上手

  1. 1

    通过 npm 安装包

    npm install deep-chat
  2. 2

    如果使用 React，请改为安装 React 包

    npm install deep-chat-react
  3. 3

    将组件添加到你的页面标记中

    <deep-chat></deep-chat>

使用前须知

  • 直接连接会将 API 密钥暴露在浏览器中，仅适用于原型或演示。
  • 连接自定义后端时，服务需要符合 Deep Chat 的请求和响应格式。

收录于专题

AI 视频与音频工具AI 聊天机器人与聊天客户端静态网站生成器与文档工具

标签

#chatbot#ui-component#llm#openai#web-components#markdown#speech-to-text#frontend-chat#ai#ai-chatbot

常见问题

deep-chat 是什么？
可嵌入任意网站、一行代码即可接入的可定制 AI 聊天界面组件。 Deep Chat 是一个前端聊天组件，可在网页中加入 AI 对话界面。通过 npm 安装后可直接作为 HTML 元素使用，也提供 React、Vue、Svelte、Angular、Solid 等框架的封装。
deep-chat 可以免费使用吗？用的什么许可证？
deep-chat 以 MIT 许可证开源。用于商业产品前，请先确认许可证条款。
deep-chat 还在维护吗？
活跃维护中。deep-chat 最近一次提交是在 2026年10月24日。
deep-chat 适合用来做什么？
为企业官网添加 AI 客服聊天机器人 基于 LLM API 快速搭建聊天界面原型 在浏览器中构建支持语音交互的助手 用浏览器内本地模型运行演示聊天机器人
deep-chat 怎么安装和运行？
通过 npm 安装包: npm install deep-chat 如果使用 React，请改为安装 React 包: npm install deep-chat-react 将组件添加到你的页面标记中: <deep-chat></deep-chat>
在哪里获取 deep-chat？
源代码和安装说明在 GitHub 上：https://github.com/OvidijusParsiunas/deep-chat

概要由 AI 根据项目 README 生成；GitHub 数据每日更新。

相关项目