This article describes how to integrate DataAgent using the JS SDK.

DataAgent provides a developer-friendly integration method through the JS SDK. Event listening and method invocation are not supported in the iframe integration mode; these features must be used via the SDK.

Installation #

Directly import the SDK in HTML

<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>

Usage #

The following is sample code for embedding DataAgent:

React framework #

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/data-agent/analytics-agent-open" // 私有化 嵌入
      jwtToken="***" // 非必须，token鉴权时从后端获取并传入
      // 非必须，如需控制功能开关才传入, 详见 <FEATURE_CONFIG>
      feature={{
          copilot: {
            /**  是否开启智能体配置  **/
            enableConfigAgent: false
          }
        }}
      searchParams=" "
    />
    )
  }
}

ReactDOM.render(<BIComponent />, document.querySelector('body'))

Vue framework #

<script setup>
// Actual business logic, obtain appId/ dashboardId
</script>

<template>
   <!-- Before using aeolus-agent, you need to import the SDK in the HTML template -->
   <aeolus-agent
      urlPrefix="https:// ${domain}/bi/datawind/data-agent/analytics-agent-open" // 私有化 嵌入
      jwtToken="***" // 非必须，token鉴权时从后端获取并传入
      // 非必须，如需控制功能开关才传入, 详见 <FEATURE_CONFIG>
      :feature="{
          copilot: {
            /**  是否开启智能体配置  **/
            enableConfigAgent: false
          }
        }"
      searchParams=" "
    />
 </template>

Since the SDK component is based on web components, it can be used in different frameworks (React / Vue).

Common parameters #

General parameters #

Feature configuration parameters #

The display content after integration can be controlled through feature-related configuration.
For example, to hide the sidebar, configure as follows: https://${domain}/ bi/datawind/data-agent/analytics-agent-open/pages/agent/detail?agentId=**&appId=4**&feature={"dataAgent":{"enableSidebar":false}}
The currently supported full set of feature configuration parameters is as follows.

{
   "copilot":{
       /** Whether to display the agent configuration in the lower right corner of the sidebar **/
       "enableConfigAgent": false,
       /** Whether the agent supports the download feature */
       "enableAgentDownload": true,
       /** Whether the agent supports displaying code */
       "enableAgentShowCode": true,
       /** Whether to display one-click Lark group creation; defaults to false when embedded */
       "showOncall": false,
       /** Whether to display the username on the homepage; defaults to false when embedded, that is, the username is not displayed by default */
       "enableAgentHomePageUsernameVisible": false
   },
   "downloadConf":{
       /** Whether download supports Lark; defaults to false when embedded */
       "showFeishuExport": false
   },
   "dataAgent":{
      /** Hide deep research mode */
     "forceDisabledDeepResearch": false,
     /** Product name at the top of the sidebar  */
     "customProductName": "Data Agent",
     /** Hide the DataAgent logo in the upper left corner of the agent */
     "enableProductName": true, 
     /** Hide the general agent */
     "enableGeneralAgent": true,
     // Whether to display the left navigation; displayed by default
     "enableSidebar": true,
     // Initialize the session inquiry type. The default is intelligent Q&A, serving web-embedded third-party scenarios.
     "initSessionType":  "normal",// 'normal' | 'deep_research'
     // Initialize the session inquiry. By default, there is no initialized inquiry, serving web-embedded third-party scenarios.
     "initSessionQuestion": "",
     // Whether to display the agent settings in the top navigation bar
     "enableNavigationSettings": true,
     // Whether to display the agent conversation history in the top navigation bar
     "enableNavigationHistory": true, 
     // Whether to display the agent new conversation in the top navigation bar
     "enableNavigationNew": true, 
    }
}

Agent: Standard embedding method #

aeolus-agent provides embedding for a single agent consumption page.

Parameters #

Agent: Secure embedding method #

aeolus-agent-security provides embedding for a single agent consumption page. The difference from aeolus-agent is that when using aeolus-agent-security, the GET request's queryString on the page does not carry jwtToken.

Parameters #

Configure the above common parameters, and also configure the agent secure embedding related parameters below.

Example #

<aeolus-agent-security
    urlPrefix="https://${domain}bi/datawind/data-agent/analytics-agent-open"
    securityUrlPrefix="https://${domain}/bi/datawind"
    searchParams=" "
    jwtToken="{jwtToken}"
  ></aeolus-agent-security>