为Astro博客添加AI博客助手

Published: at 02:31 AM
AI摘要-可乐GPT
AI摘要生成中...

一直眼馋HEO大佬的AI助手，今天看字节的扣子每天100的免费额度加上支持知识库，就搞了一个，虽然功能上并不完美，但是效果还是有的。
字节对于智能体构造和知识库使用以及部署到网站都有很详细的教学，可以参考一下官方文档：扣子官方文档。部署到网站看这个就可以，就是发布应用为 Chat SDK。

折腾过程

创建组件

创建一个名为CozeSDK.astro的组件，代码如下：

---

---
<script is:inline>
    const loadCozeSDK = () => {
      return new Promise((resolve) => {
        // 移除已存在的脚本
        const existingScript = document.querySelector('script[src*="coze.cn"]');
        if (existingScript) {
          existingScript.remove();
        }
        // 加载新脚本
        const script = document.createElement('script');
        script.src = `https://lf-cdn.coze.cn/obj/unpkg/flow-platform/chat-app-sdk/1.1.0-beta.0/libs/cn/index.js?cacheBust=${Math.random()}`;
        script.onload = resolve;
        document.body.appendChild(script);
      });
    };
    const initializeCoze = async () => {
      await loadCozeSDK();
      console.log('window.CozeWebSDK:', window.CozeWebSDK); // 检查全局变量
      if (window.CozeWebSDK) {
        new CozeWebSDK.WebChatClient({
          config: {
            bot_id: '745*****4704147',//你创建的机器人id
          },
//........配置部分略，看官方文档
          componentProps: {
            title: '博客专家',
          },
        },
        });
      } else {
        console.error('CozeWebSDK 脚本加载后仍不可用。');
      }
    };
    // 监听页面切换事件
    document.addEventListener('astro:page-load', initializeCoze);
    // 监听页面内容交换事件
    document.addEventListener('astro:after-swap', initializeCoze);
  </script>

引用组件

在Layout.astro中引用组件：

import Coze from "@components/CozeSDK.astro";

然后再在<body>标签内，<slot />标签下插入组件：

<Coze />

大功告成！！

总结

我的机器人叫博客专家，它可以介绍我的情况，帮你理解文章，向你推荐文章，虽然有些不太聪明，但是作为摆设的用处似乎更大些~

评论