SDK嵌入Agent

很多时候，你可能希望将Agent直接接入自己的Web项目，比如：在官网直接嵌入客服Agent。

这时候你可以通过调用JS SDK 的方式直接简单集成。

如何使用

在 Agent - Agent 编辑 - Agent Go Tab，选择 SDK 集成，有详细使用说明

安装SDK

方式一：通过包管理器安装

此方式的SDK会在打包时会自动根据你的项目Tree Sharking，从而包体积会更小，Vite、Webpack5等新项目推荐用

bash

npm install @bty/chat-sdk # npm
yarn add @bty/chat-sdk    # yarn
pnpm add @bty/chat-sdk    # pnpm

方式二：通过CDN方式安装

此方式集成简单，兼容性好，一般用于老项目接入

html

<!--将下面的CDN地址贴入网站的HTML Header中-->
<link rel="stylesheet" href="https://web-bty-sdk.oss-cn-hangzhou.aliyuncs.com/sdk/0.1.32/chat-sdk.css">
<script src="https://web-bty-sdk.oss-cn-hangzhou.aliyuncs.com/sdk/0.1.32/chat-sdk.js"></script>

使用SDK

javascript

// 如果你是通过包管理器方式安装的SDK，你只需要按照下面的方式导入Chat模块使用即可
import { Chat as BetterYeahChat } from "@bty/chat-sdk"

// 如果是通过CDN方式安装的，你则需要像下面这样，从windows对象获取Chat模块
const BetterYeahChat = window.BetterYeah.Chat

初始化 SDK

SDK在使用过程中，初始化后才能使用，一般情况下只需要初始化一次

javascript

import { Chat as BetterYeahChat } from "@bty/chat-sdk"

BetterYeahChat.init({
  root: "root",
  agentId: "e2740ac6-5187-4ada-be10-14ef1a722145",
  accessKey: "NjU1NDhmN2M5ZmIyOGY0MWExOWZiMzJmLDEwMTgsMTcwNDg3MDI3MzU5MQ==",
  workspaceId: "65548f7c9fb28f41a19fb32f",
  user: {
    name: "小Y", // 用户的标识，会在BetterYeah AI Agent日志中显示，也可以用来标识Agent和用户的关联关系
  },
  features: {
    conversationList: true, // 显示会话列表
    uploadFile: true // 支持上传文件
  }
})

参数说明：

字段名	类型	说明
root	string	DOM ID，SDK会将聊天窗口渲染到这个DOM对应的容器内，你必须确保该DOM在SDK init执行阶段已经存在，比如在Vue中，你要确保在onMounted的钩子中执行init函数
agentId	string	文档上方所显示的AgentID，SDK会初始化该ID对应的Agent
accessKey	string	见文档上方，该Key是SDK访问的鉴权标识，请谨慎保存
workspaceId	string	见文档上方，Agent所在的工作空间的ID
user.name	string	「SDK使用者」的身份标识，会在BetterYeah AI Agent日志中显示，也可以用来标识Agent和「SDK使用者」的关联关系
features	object	可选参数，用于配置SDK的一些特性，目前支持的特性有：「上传文件」、「会话列表」、「语音输入」
features.conversationList	boolean	是否支持「会话列表」，默认值false
features.voice	boolean	是否支持「语音输入」，默认值false
features.uploadFile	boolean	是否支持「上传文件」，默认值false
features.toolsLogger	boolean	是否支持「查看技能日志」，默认值false

创建会话ID

执行下面的代码会生成一个新的会话ID，注意该方法是一个异步函数

javascript

const conversationId = await BetterYeahChat.api.Conversation.create('会话标题') // 会话标题会显示在会话窗口的顶部

会话Id是一次会话的唯一标识，如果你想下次进入之后还保留之前的聊天窗口，你应该持久化保存生成好的会话ID

如果你想每个用户对应不同的聊天窗口，你应该给不同的用户生成不同的会话ID，并且维护好该用户和生成的会话ID的关联关系

渲染会话

执行下面的函数会在「第一步」配置的dom容器内渲染出BetterYeah AI Agent的聊天页面

javascript

BetterYeahChat.mount({
  conversationId: '', //  「第二步」获取到的会话ID
})

SDK嵌入Agent ​

如何使用 ​

安装SDK ​

初始化 SDK ​

创建会话ID ​

渲染会话 ​

SDK嵌入Agent

如何使用

安装SDK

初始化 SDK

创建会话ID

渲染会话