Orange Agent UI for Vue

橘子智能体平台的 Vue 3 对话组件。支持连续会话、SSE 流式文本、图片/音频/视频附件、微信式语音消息，以及智能体返回语音的播放、暂停和重播。

组件只调用业务系统自己的 BFF。请勿把橘子智能体 API Key 放入前端代码。

安装

pnpm add orange-agent-ui-vue

或：

npm install orange-agent-ui-vue

使用

<script setup lang="ts">
import { OrangeAgentChat } from "orange-agent-ui-vue";
import "orange-agent-ui-vue/style.css";
</script>

<template>
  <OrangeAgentChat
    endpoint="/api/agent"
    title="淡水养殖技术顾问"
    external-user-id="current-user-10001"
    :response-audio="true"
  />
</template>

你的业务后端需要把 /api/agent 代理到橘子智能体平台，并在服务端注入 API Key。推荐配合 io.github.juziiv:orange-agent-sdk 使用。

Props

| 属性 | 类型 | 默认值 | 说明 | | --- | --- | --- | --- | | endpoint | string | /api/agent | 业务系统 BFF 地址 | | externalUserId | string | 必填 | 业务用户稳定标识 | | externalConversationId | string | 空 | 业务会话标识 | | title | string | 智能助手 | 对话标题 | | subtitle | string | 智能体在线 | 对话副标题 | | responseAudio | boolean | true | 请求智能体返回语音 | | requestHeaders | function | 空 | 为 BFF 请求动态增加业务鉴权头 | | accent | string | #f36b2b | 主题色 | | avatarUrl | string | /orange-agent-icon.png | 智能体头像地址 | | suggestions | string[] | 内置示例 | 欢迎页推荐问题 |

本地开发

pnpm install --frozen-lockfile
pnpm test
pnpm build
npm pack --dry-run

发布 npm

本仓库在发布 GitHub Release（标签格式 v0.4.0）时执行 npm 发布，也支持手动触发。首次发布前需要：

1. 创建启用发布权限的 npm granular access token；若账号启用了 2FA，token 需允许绕过发布 2FA。
2. 在 GitHub 仓库配置 Actions Secret：NPM_TOKEN。
3. 确认 package.json 版本与 Git 标签一致后创建 Release。

npm 已发布版本不可覆盖，修改后必须提升版本号。

License

MIT License