N8N Chat UI

Hey Product Hunt 👋 Ross（@ross_jenkins）和 Dani（@dani_martin1），N8N Chat UI 的创作者。

问题

n8n 在构建 AI 智能体方面非常出色，但其内置聊天组件比较基础。如果想让组件符合自己的品牌风格，你就得深入研究 HTML、CSS 和 JavaScript；而且 Webhook URL 会暴露在网页源代码中，任何人都能找到。

我们打造了什么

一款可视化构建工具，可将任何 n8n 工作流变成精致且符合品牌风格的聊天组件。你可以通过实时预览进行自定义，复制一段代码，即可嵌入网站。无需编写代码。

亲自试试构建器，无需注册：n8nchatui.com

主要功能

支持弹窗或页内组件，并可完全自定义主题：颜色、字体、头像、欢迎消息、自定义 CSS

支持流式回复、语音输入、文件上传、后续提示词，以及 Markdown/HTML 渲染

支持阿拉伯语、希伯来语和波斯语的 RTL 布局

托管组件：隐藏 Webhook、域名限制、地理围栏、速率限制和实时分析

MCP 服务器：可以让 Claude、Cursor 或 VS Code 为你创建并重新设计组件

提供适用于 WordPress、Webflow、Shopify 和 Wix 的官方插件，以及一个 n8n 社区节点

面向开发者：无需编写代码，但也不受限制

通过 sendMessage() 以编程方式发送消息：可以从“咨询此产品”按钮、表单提交、URL 参数触发聊天，也可以在访客停留在结账页面一段时间后自动发起聊天

通过事件回调（onWidgetOpen、beforeSubmit、onResponseReceived、onError……）将聊天接入你的分析系统或应用逻辑

在每条消息中将自定义元数据（用户 ID、套餐、当前页面）传递至 n8n 工作流

使用 updateTheme() 和 updatePrompts() 随时更改主题和初始提示词，无需刷新页面

通过会话密钥为每个页面或每位用户维护独立对话

适用于任何返回 JSON 的后端，不限于 n8n

面向代理机构

几分钟内为每位客户打造品牌化聊天组件，并通过克隆组件复用你最好的配置

帮助客户将更多网站访客转化为潜在客户和销售线索

在分析面板中向客户展示效果，并提供消息数量，可用于按消息量向客户收费

定价方式

仅有一个付费方案：终身许可证。一次付费，永久使用。你也可以免费试用，包含 100 个额度，无需绑定银行卡。

项目起源

N8N Chat UI 于 2025 年 4 月在 n8n 社区论坛上推出，旨在解决每个 n8n 构建者都会遇到的问题：你打造了一个出色的 AI 智能体并将其嵌入网站，最终得到的却只是一个千篇一律、几乎无法自定义品牌风格的聊天窗口，除非你自己编写代码。

项目很快受到关注。已有超过 2,700 人使用它构建聊天组件，而一路上推出的许多功能都源自社区的请求：会话管理、免费入门方式、流式回复、语音消息和文件上传。

我们为何收购它

2026 年 8 月，我们从原开发者手中收购了 N8N Chat UI，Ross 在 DigitalME 团队的 Nicholas 和 Daniel 也加入我们，共同继续开发这款产品。我们能看到已经有许多人依赖它，因为它解决了 n8n 自带聊天组件无法解决的问题。我们也能看到它还有很大的发展潜力：更多高级功能，以及一套现成的 n8n 示例库；我们正在构建这套示例库，并免费提供给社区。

我们的第一个重大进展，是将产品接入人们真正用于构建网站的主流平台：推出适用于 WordPress、Wix、Webflow 和 Shopify 的官方插件，以及一个 n8n 社区节点，无需再手动配置 Webhook 连接。

🎁 Product Hunt 优惠：终身许可证立减 90 美元（59 美元，而非 149 美元），另赠 2,500 个免费额度，供你试用托管组件

我们非常期待你的反馈：接下来应该开发哪些集成或功能？欢迎在下方留言。

感谢 @jonnotie 在 Product Hunt 上发现我们，也感谢 PH 社区！

有问题或反馈？请发送邮件至 hello@n8nchatui.com，或在 LinkedIn 上与我联系。

— Ross 与 Dani