本文为您介绍如何通过 JS SDK 接入 DataAgent。
DataAgent 支持以 JS SDK 提供对开发者友好的接入方式。事件监听和方法调用在 iframe 集成方式下不支持,这些特性需要通过 SDK 使用。
直接在 HTML 中引入 SDK
<html> <head> <script src="https://unpkg.byted-static.com/aeolus/sdk/2.15.0/lib/components/index.umd.prod.js"></script> </head> <body></body> </html>
嵌入 DataAgent 的示例代码如下:
import React from 'react' import ReactDOM from 'react-dom' class BIComponent extends React.Component { render() { return ( <!-- 使用aeolus-agent前 需要在html模板中引入sdk --> <aeolus-agent urlPrefix="https:// ${domain}/bi/datawind-open" // 私有化 嵌入 jwtToken="***" // 非必须,token鉴权时从后端获取并传入 // 非必须,如需控制功能开关才传入, 详见 <FEATURE_CONFIG> feature={JSON.stringify({ copilot: { /** 是否开启智能体配置 **/ enableConfigAgent: false, }, })} searchParams=" " /> ) } } ReactDOM.render(<BIComponent />, document.querySelector('body'))
<script setup> // 实际业务逻辑、 获取appId/ dashboardId </script> <template> <!-- 使用aeolus-agent前 需要在html模板中引入sdk --> <aeolus-agent urlPrefix="https:// ${domain}/bi/datawind-open" // 私有化 嵌入 jwtToken="***" // 非必须,token鉴权时从后端获取并传入 // 非必须,如需控制功能开关才传入, 详见 <FEATURE_CONFIG> feature={JSON.stringify({ copilot: { /** 是否开启智能体配置 **/ enableConfigAgent: false, }, })} searchParams=" " /> </template>
由于 SDK 组件基于 web component,在不同框架(React / Vue)中均可引入使用。
参数 | 是否必配 | 描述 | 默认值 |
|---|---|---|---|
urlPrefix | 是 | 应用访问地址,私有化环境需配置为实际部署的环境域名地址 | 无 |
jwtToken | 是 | 自定义权限 token,用户 jwtToken,获取方式见调用方式。 | 无 |
lang | 否 | 多语言配置,可选 | 'zh_CN' |
searchParams | 否 | 额外的 url 参数。 | 无 |
通过feature 特性相关配置即可控制集成后的展示内容。
例如:需要隐藏侧边栏时,可配置为: https://${domain}/bi/datawind-open/pages/agent/detail?agentId=**&appId=4**&feature={"dataAgent":{"enableSidebar":false}}
当前支持的全量Feature 特性配置参数如下。
{ "copilot":{ /** 是否展示侧边栏右下角智能体配置 **/ "enableConfigAgent": false, /** 智能体是否支持下载功能 */ "enableAgentDownload": true, /** 智能体是否支持展示代码 */ "enableAgentShowCode": true, /** 是否展示飞书一键拉群,嵌出时默认为:false */ "showOncall": false, /** 首页是否展示用户名,嵌出时默认为:false,即默认不展示用户名 */ "enableAgentHomePageUsernameVisible": false }, "downloadConf":{ /** 下载是否支持飞书,嵌出时默认为:false */ "showFeishuExport": false }, "dataAgent":{ /** 隐藏深度研究模式 */ "forceDisabledDeepResearch": false, /** 侧边栏顶部的产品名称 */ "customProductName": "Data Agent", /** 隐藏智能体左上角DataAgent标识 */ "enableProductName": true, /** 隐藏通用智能体 */ "enableGeneralAgent": true, // 是否展示左侧导航,默认展示 "enableSidebar": true, // 初始化会话问题的类型,默认为智能问数,服务于网页嵌入第三方场景。 "initSessionType": "normal",// 'normal' | 'deep_research' // 初始化会话问题,默认没有初始化问题,服务于网页嵌入第三方场景。 "initSessionQuestion": "", // 是否显示顶部导航栏的智能体设置 "enableNavigationSettings": true, // 是否显示顶部导航栏的智能体历史对话 "enableNavigationHistory": true, // 是否显示顶部导航栏的智能体新建对话 "enableNavigationNew": true, } }
aeolus-agent 提供单个智能体消费页面嵌入。
参数 | 是否必配 | 描述 |
|---|---|---|
agentId | 否 | 智能体 id,如果需要强制选中某个智能体可以传入智能体 id。智能体id的获取方式请参见agentId |
feature | 否 | 详见上文的feature 特性配置参数。 |
aeolus-agent-security 提供单个智能体消费页面嵌入。与aeolus-agent不同的是,使用 aeolus-agent-security 不会在页面的 GET 请求的 queryString中携带 jwtToken。
需要配置上述通用参数,同时配置下方的智能体常安全入方式相关参数。
参数 | 是否必配 | 描述 | 默认值 |
|---|---|---|---|
agentId | 否 | 智能体id,如果需要强制选中某个智能体可以传入智能体 id,智能体id的获取方式请参见agentId。 | 无 |
feature | 否 | 特性配置,详见feature 特性配置参数。 | '{}' |
securityUrlPrefix | 是 | 中间页访问地址前缀,即配置为私有化domain: 实际部署的环境域名地址 | 无 |
<aeolus-agent-security urlPrefix="https://${domain}bi/datawind-open" securityUrlPrefix="https://${domain}/bi/datawind" searchParams=" " jwtToken="{jwtToken}" ></aeolus-agent-security>