2025-07-02发表2025-07-01更新极限科技9 分钟读完 (大约1390个字)0次访问

Coco-AI 支持嵌入，让你的网站拥有 AI 搜索力

在之前的实践中，我们已经成功地把 Hexo、Hugo 等静态博客和 Coco-AI 检索系统打通了：只要完成向量化索引，就可以通过客户端问答界面实现基于内容的智能检索。

这一层已经很好用了，但总觉得少了点什么——

比如用户还得专门打开一个“AI 客户端”，有点割裂。那能不能像搜索框一样，直接把问答体验嵌进网页里，做到随时可问，实时返回，就像 ChatGPT 驻扎在你自己的网站里？

答案是可以的。从 Coco-AI v0.3 开始，我们终于可以像调用前端组件一样，将搜索框直接嵌入到网页中，而且配置极简，几乎零门槛。

🧱 零配置启动：Coco 搜索框长这样

实际上，哪怕你完全不改配置，直接使用默认参数，就能跑出一个干净、简洁的 AI 搜索框：

它默认采用悬浮式设计，右下角一个小 logo，点击之后弹出一个输入框，你可以直接输入问题，系统自动返回答案。

对于很多不熟前端的朋友来说，这个“即插即用”的特性真的太香了。

🚀 一步到位：HTML 页面嵌入组件

当然，如果你有自己的网页结构，也可以通过标准的 ES Module 写法，把组件嵌入到指定位置。

下面是一个最小 HTML 示例：

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <title>搜索组件嵌入示例</title>
    <style>
      body {
        font-family: sans-serif;
        padding: 2rem;
      }
      #searchbox {
        margin-top: 20px;
        border: 1px solid #ccc;
        padding: 16px;
        border-radius: 8px;
      }
    </style>
  </head>
  <body>
    <h1>欢迎使用 Cloudsmithy 搜索组件</h1>
    <p>下面是通过 ES Module 引入的搜索框：</p>

    <div id="searchbox"></div>

    <script type="module">
      import { searchbox } from "http://localhost:9000/integration/cvmhvjl92jog2dokvsd0/widget";
      searchbox({
        container: "#searchbox",
      });
    </script>
  </body>
</html>

✅ 总结一句话：
只要在页面里加一个 div，然后调用 searchbox()，AI 搜索就能跑起来。

🧪 实测效果：Live Server 本地运行

为了确认效果，我用 VS Code 的 Live Server 插件本地打开这个 HTML 文件，页面加载后就能看到组件成功加载，完全不需要编译打包或插件支持：

搜索框组件会自动初始化，可以立即输入问题，体验自然语言问答。

🌀 从 Hexo 编译失败，到想到油猴

本来我打算把这个搜索框组件嵌到 Hexo 博客中，想法很简单：直接在页面模板里引入这个模块。

结果 Hexo 的构建流程不太配合：

没法直接在页面里用 import；
改动主题文件构建后会被覆盖；
找不到原始 HTML，很多逻辑是动态拼装的；

这让我意识到：有时候，静态博客并不是一个容易动手脚的地方。

于是我换了个思路：干脆用油猴脚本直接“外挂”到页面里。

🐵 为什么选 Tampermonkey？

✅ 优点：

无需改动原站源码；
能在任意网页上注入组件，连别人家的站也行；
适合自己内测、小范围使用。

⚠️ 缺点：

需要用户安装 Tampermonkey 插件；
某些网站的 CSP 策略可能会阻止模块加载。

🧩 油猴脚本完整代码

这是我用的实际代码，只做了最基本的挂载和模块加载操作：

// ==UserScript==
// @name         Searchbox Embedder
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  在任意网页中注入 searchbox 小部件
// @author       You
// @match        *://*/*
// @grant        none
// @run-at       document-end
// ==/UserScript==

(function () {
  "use strict";

  // 创建搜索框容器
  const searchboxDiv = document.createElement("div");
  searchboxDiv.id = "searchbox";
  document.body.appendChild(searchboxDiv);

  // 插入模块化脚本
  const script = document.createElement("script");
  script.type = "module";
  script.textContent = `
    import { searchbox } from "http://localhost:9000/integration/cvmhvjl92jog2dokvsd0/widget";
    searchbox({ container: "#searchbox" });
  `;
  document.body.appendChild(script);
})();

📸 最终效果：Coco 搜索框上线！

下面这个截图就是油猴脚本挂载组件后的样子，运行脚本后，你会在网页右下角看到一个熟悉的 Coco logo，点击它，就能唤出对话框：

你可以输入问题，比如“这篇博客在哪提到 RAG？”系统会自动返回你想要的内容。对于博客站长来说，这种方式几乎等同于给读者配了个“专属智能客服”。

🎯 总结一下，推荐给谁？

不管你是：

做个人博客的开发者；
运营公司知识库或文档站；
想给现有网页加点 AI “魔法”；

Coco-AI 的嵌入式搜索组件，都是一个轻量又实用的方案。

你可以选择两种方式：

嵌入方式	适用场景	优点	限制
HTML 原生嵌入	可控部署的网站、博客模板	不依赖任何插件、原生体验	需要动源码、构建系统支持模块化
Tampermonkey 插件	自测网页、不可修改站点	快速部署、无需改网页	需要浏览器插件、不适合普通用户

Coco-AI 支持嵌入，让你的网站拥有 AI 搜索力

https://xu-hardy.github.io/coco-ai-支持嵌入，让你的网站拥有-ai-搜索力/

作者

Xu

发布于

2025-07-02

更新于

2025-07-01

许可协议

#Coco-AI

支付宝

微信

Coco-AI 支持嵌入，让你的网站拥有 AI 搜索力

🧱 零配置启动：Coco 搜索框长这样

🚀 一步到位：HTML 页面嵌入组件

🧪 实测效果：Live Server 本地运行

🌀 从 Hexo 编译失败，到想到油猴

🐵 为什么选 Tampermonkey？

✅ 优点：

⚠️ 缺点：

🧩 油猴脚本完整代码

📸 最终效果：Coco 搜索框上线！

🎯 总结一下，推荐给谁？

作者

发布于

更新于

许可协议

喜欢这篇文章？打赏一下作者吧

评论

目录

链接

分类

follow.it

最新文章

归档

标签

订阅更新