扣子（Coze）：构建智能助手并嵌入个人网站的新选择

首发地址（欢迎大家访问）：扣子（Coze）：构建智能助手并嵌入个人网站的新选择

1. 前言

之前写了一篇关于使用 MaxKB 搭建个人知识库并集成到个人网站的博客；

整个技术路线我觉得还是很好的，但是也伴随着很多问题，例如：

硬件资源：自己部署一个 RAG 的应用，跑起来和用起来的区别还是很大的，要达到一个较好的效果，还是得有好的硬件支撑；
知识库维护：这和多方面有关，比如文档切片及向量化的方式和算法影响、知识库的更新等，同时也受硬件的制约；
可拓展性弱：现在的 MaxKB 似乎是支持 Workflow 的，但是仅仅这样，很多需求还是有困难的，功能比较弱；

所以，综合这些原因，我放弃了在个人网站中使用 MaxKB，但是我并不否认它是一个很好的产品；只是对于我想集成一个智能助手到个人网站的这个需求而言，他并不是最好的选择；

当然有更好的选择，看标题就知道了，所以本文着重探索一下扣子的用法。

2. 什么是扣子（Coze）¹

国内地址：https://www.coze.cn

外网地址：https://www.coze.com

扣子是新一代 AI 应用开发平台。无论你是否有编程基础，都可以在扣子上快速搭建基于大模型的各类智能体，并将智能体发布到各个社交平台、通讯软件或部署到网站等其他渠道。

功能与优势

灵活的工作流设计

扣子的工作流功能可以用来处理逻辑复杂，且有较高稳定性要求的任务流。扣子提供了大量灵活可组合的节点包括大语言模型 LLM、自定义代码、判断逻辑等，无论你是否有编程基础，都可以通过拖拉拽的方式快速搭建一个工作流，例如：

创建一个搜集电影评论的工作流，快速查看一部最新电影的评论与评分。
创建一个撰写行业研究报告的工作流，让智能体写一份 20 页的报告。

无限拓展的能力集

扣子集成了丰富的插件工具，极大地拓展智能体的能力边界。

官方插件：扣子官方发布了多款能力丰富的插件，包括资讯阅读、旅游出行、效率办公、图片理解等 API 及多模态模型。你可以直接将这些插件添加到智能体中，丰富智能体能力。例如使用新闻插件，打造一个可以播报最新时事新闻的 AI 新闻播音员。
自定义插件：扣子平台也支持创建自定义插件。你可以将已有的 API 能力通过参数配置的方式快速创建一个插件让智能体调用。自定义插件也可以发布到商店，供其他用户使用。

丰富的数据源

扣子提供了简单易用的知识库功能来管理和存储数据，支持智能体与你自己的数据进行交互。无论是内容量巨大的本地文件还是某个网站的实时信息，都可以上传到知识库中。这样，智能体就可以使用知识库中的内容回答问题了。

内容格式：知识库支持添加文本格式、表格格式、照片格式的数据。
内容上传：知识库支持 TXT 等本地文件、在线网页数据、Notion 页面及数据库、API JSON 等多种数据源，你也可以直接在知识库内添加自定义数据。

持久化的记忆能力

扣子提供了方便 AI 交互的数据库记忆能力，可持久记住用户对话的重要参数或内容。

例如，创建一个数据库来记录阅读笔记，包括书名、阅读进度和个人注释。有了数据库，智能体就可以通过查询数据库中的数据来提供更准确的答案。

简单理解一下

扣子是 AI 应用开发平台或者说是大模型智能应用开发平台；

它里面集成了很多工具，可以自定义不同场景的智能应用，可视化的配置方式，可以不懂编程，也能制作智能应用；

然后这里我不提 Agent 和 Bot，这些概念我希望有一篇文章专门来记录一下，因为我看了很多文章，感觉大家对这两个概念的理解都有所不一样；

这两个概念并不是新的概念，就是我个人还没有梳理的特别清晰，所以就先不说了；

收费

最开始接触这玩意的时候，是不收费的，现在开始各种收费了；

详细的收费方案参考官网吧；

3. 用扣子创建一个智能体

这里我也就简单记录一下，扣子创建智能体里面要琢磨的东西也很多；

在coze里面新建一个智能体；

创建好了之后就需要去编排这个智能体，具体编排是有很多知识点的，我这里先不赘述了，后面有机会再写一篇记录一下；

4. 嵌入第三方网站

这里以嵌入 halo 2.x 为例；

发布智能体

点击发布之后，选择web sdk；

复制安装代码，注入到网站之中；

细心的你一定发现了代码需要嵌入到 <body> 标签里面；

而我们的 halo 是不支持直接嵌入 head 标签的，所以就得折腾一下

写一个js，把代码嵌进去，同时把我们写的 js 嵌入到 head 标签里面；

<script>
	document.addEventListener('DOMContentLoaded', function() {
		// Create the first script element for the external JavaScript source
		const externalScript = document.createElement('script');
		externalScript.src = 'https://lf-cdn.coze.cn/obj/unpkg/flow-platform/chat-app-sdk/1.0.0-beta.2/libs/cn/index.js';
		externalScript.type = 'text/javascript';

		// Append the external script to the body, and then load the Coze WebChatClient
		externalScript.onload = function() {
			// Create the second script element for initializing the WebChatClient
			const initScript = document.createElement('script');
			initScript.type = 'text/javascript';
			initScript.textContent = `
				new CozeWebSDK.WebChatClient({
					config: {
						bot_id: '743......06220',
					},
					componentProps: {
						title: 'Coze',
					},
				});
			`;

			// Append the initialization script to the body
			document.body.appendChild(initScript);
		};

		// Append the external script to the body to start the loading process
		document.body.appendChild(externalScript);
	});
</script>

这个代码片段的主要功能是加载一个外部JavaScript库并初始化一个聊天客户端。以下是代码的分步解释：
等待页面加载完成：
document.addEventListener('DOMContentLoaded', function() { ... });
使用 DOMContentLoaded 事件确保整个页面的DOM结构已完全加载后再运行脚本。这保证脚本不会因为页面还没加载完而报错。
创建第一个脚本元素，加载外部JavaScript库：
const externalScript = document.createElement('script');
externalScript.src = 'https://lf-cdn.coze.cn/obj/unpkg/flow-platform/chat-app-sdk/1.0.0-beta.2/libs/cn/index.js';
externalScript.type = 'text/javascript';
代码通过 document.createElement('script') 创建一个 <script> 元素，并将其 src 属性设为指定的外部JavaScript库URL。这是一个外部资源，通常包含聊天应用SDK的核心代码。
当外部脚本加载完成后，初始化 coze：
externalScript.onload = function() {
    const initScript = document.createElement('script');
    initScript.type = 'text/javascript';
    initScript.textContent = `
        new CozeWebSDK.WebChatClient({
            config: {
                bot_id: '743......06220',
            },
            componentProps: {
                title: 'Coze',
            },
        });
    `;
    document.body.appendChild(initScript);
};
onload 事件会在外部脚本成功加载并执行后触发。然后，它会创建另一个脚本元素 initScript，该脚本直接写在 textContent 中，目的是初始化 CozeWebSDK.WebChatClient。

bot_id 是一个标识，指定了聊天机器人。
componentProps 包含一些自定义参数，比如聊天窗口的 title 设置为 “Coze”。
将外部脚本添加到文档中，开始加载流程：
document.body.appendChild(externalScript);
将第一个脚本元素（即外部SDK）添加到 <body> 中，开始下载和执行它。