宝遥智能体 Vue2 插件 (baoyog-agent-vue2)

可嵌入任意 Vue2 系统的智能体对话组件，支持 SSE 流式通信、工具调用展示、Markdown 渲染。组件使用原生 HTML、内置 SVG 图标和隔离样式，不依赖 Element UI、Ant Design Vue 或其他第三方 UI 框架。

安装

npm install baoyog-agent-vue2

只有 vue 是 peerDependency。Vue 2.6、Vue 2.7 项目均可使用。

使用

方式一：全局注册

// main.js
import Vue from 'vue'
import BaoyogAgent from 'baoyog-agent-vue2'
import 'baoyog-agent-vue2/dist/style.css'

Vue.use(BaoyogAgent, {
  baseUrl: 'https://ai.example.com/web/api',
  devBaseUrl: 'http://127.0.0.1:13060/web/api',
  chatKey: '从智能体发布配置中获取',
  agentId: '2079080349952217090',
  agentCode: 'form_agent_001',
})

<!-- 任意组件 -->
<template>
  <AgentChat
    agent-code="form_agent_001"
    biz-type="采购合同"
    :context-params="{ token: shortLivedBusinessToken }"
    @form-patch="applyPatch"
    @submit-request="confirmSubmit"
  />
</template>

方式二：按需引入

<script>
import { AgentChat } from 'baoyog-agent-vue2'
import 'baoyog-agent-vue2/dist/style.css'

export default {
  components: { AgentChat },
}
</script>

<template>
  <AgentChat
    :api-base-url="apiUrl"
    :agent-code="code"
    :token="token"
    :biz-type="bizType"
  />
</template>

方式三：CDN

<link rel="stylesheet" href="https://unpkg.com/baoyog-agent-vue2/dist/style.css">
<script src="https://unpkg.com/[email protected]"></script>
<script src="https://unpkg.com/baoyog-agent-vue2"></script>
<script>
  // 自动注册 AgentChat 组件
  new Vue({ el: '#app' })
</script>

Props

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | baseUrl | String | - | 生产环境后端 API 地址（包含 /web/api） | | devBaseUrl | String | - | 本地后端 API 地址（包含 /web/api） | | chatKey | String | 必填 | 静默换取平台运行 Token | | agentId | String | 必填 | 创建持久会话所需的智能体数据库 ID | | agentCode | String | 必填 | 智能体编码 | | bizType | String | '' | 业务类型，自动生成初始消息 | | contextParams | Object | {} | 请求级业务上下文，仅建议传短期凭证 | | title | String | 'AI 助手' | 面板标题 | | placeholder | String | '输入消息，Enter 发送...' | 输入框提示 | | emptyHint | String | '有什么可以帮你？' | 空状态提示 | | defaultCollapsed | Boolean | true | 是否默认折叠为悬浮按钮 |

本地开发

cd baoyog-ai-vue2-plugin
npm install
npm run dev      # 启动 demo（端口 3201）
npm run build    # 构建到 dist/

form-patch 只表示回填建议，submit-request 只表示用户表达了提交意图。插件不会直接调用业务提交接口，宿主页面必须展示确认并再次执行本地校验。

通信协议

通过 POST /api/runtime/agui/run/{agentCode} 发起 SSE 流式请求，响应遵循 AgentScope SSE 事件协议：

• TEXT_MESSAGE_START / TEXT_MESSAGE_CONTENT — AI 回复文本
• TOOL_CALL_START / TOOL_CALL_ARGS / TOOL_CALL_RESULT — 工具调用
• RUN_FINISHED — 执行完成
• RUN_ERROR — 执行失败

目录结构

baoyog-ai-vue2-plugin/
├── src/
│   ├── index.js        # 插件入口，install + 导出
│   ├── AgentChat.vue   # 主组件
│   └── utils.js        # Markdown 渲染 + SSE 处理
├── demo/               # 本地调试
├── package.json
└── vite.config.js