Agent UI

一个基于 react 和 TypeScript 并兼容于各种前端框架的 Agent UI 组件库，提供聊天界 面、浮动按钮等组件。

安装

npm install @agent-client/dashscope

使用方法

导入组件

import { AgentClient } from "@agent-client/dashscope"

vue

<script setup>
import { AgentClient } from "@agent-client/dashscope"
import { ref, onMounted } from "vue"

const floatButtonRef = ref(null)

const agent = AgentClient.createAgentClient({
  // 授权码
  token: "sk-65bc5w13d442402ba807e0b76f031454",
  // 智能体代码
  agentCode: "88a2a0788e464e16b5da7ed3f00de421",
  // 悬浮按钮标签名
  tagName: "float-button",
  // 挂载事件
  onMount: (element, shadowRoot) => {
    // 自定义视觉部分
    const root = document.getElementById(agent.id)
    const children = document.createElement("div")
    children.innerHTML = "custom button"
    root.appendChild(children)
  },
})
onMounted(() => {
  floatButtonRef.value?.addEventListener("on-visible-change", (e) => {
    console.log(e.detail)
  })
})
// 消息列表
const messages = agent.getMessages()
</script>

<template>
  <float-button
    ref="floatButtonRef"
    :agent-id="agent.id"
    left="100"
    top="100"
    class-name="float-button-deep"
    class="float-button"
  />
</template>

<style scoped>
:deep(.float-button-deep) {
  background-color: #000;
}
.float-button {
  color: #fff;
}
</style>

配置 Agent

import { AgentClient } from "@agent-client/dashscope"

// 创建 AgentClient 实例
const agent = AgentClient.createAgentClient({
  token: "your-token",
  agentCode: "your-agent-code",
  tagName: "float-button",
  onMount: () => void
})

运行 Agent

// 运行agent，输入提示词,输出消息
const { response, abort } = await agent.run({
  prompt: "你好",
})
const message = await response

// 从消息中解构出文本内容、角色、消息id等信息
const { content, role, messageId } = message

API

interface AgentClient {
  run(runProps: {
    prompt: string
  }): {
    response: Promise<Message>;
    abort: () => void
  }
  getMessages(): Message[]
  static createAgentClient(props: {
    token: string;
    agentCode: string;
    tagName: string;
    onMount: () => void
  }): AgentClient
}
interface Message {
  content: string;
  role: "assistant" | "user";
  messageId: string;
}
<float-button
  /** @param {string} agent-id - agent实例id */
  :agent-id="agent.id"
  /** @param {number} left - 标签初始left值 */
  left="100"
  /** @param {number} top - 标签初始top值 */
  top="100"
  /** @param {string} class-name - 内部容器class */
  class-name="float-button-wrapper"
  /** @param {string} class - root class */
  class="float-button"
/>

开发

# 安装依赖
npm install

# 开发模式
npm run dev

# 构建库
npm run build:lib

# 发布到 npm
npm publish

许可证

MIT