https://github.com/opencsgs/agent_ui_sdk

https://github.com/opencsgs/agent_ui_sdk

Last synced: about 2 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/opencsgs/agent_ui_sdk
• Owner: OpenCSGs
• Created: 2026-02-05T07:46:19.000Z (3 months ago)
• Default Branch: main
• Last Pushed: 2026-02-05T09:40:52.000Z (3 months ago)
• Last Synced: 2026-02-05T21:11:21.540Z (3 months ago)
• Language: JavaScript
• Size: 14.6 KB
• Stars: 0
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
Agentichub 的 agent 支持提供定制化的 UI，用户可以基于原生的 js，css，html 和 agent 服务提供的两个 API 进行对接

### 后端依赖

- /api/chat：支持流式文本输出

- /upload：返回图片 URL

为了尽可能减轻用户对接的复杂度，我们把和后端 API 的交互，以及流式信息的处理做了抽象化处理，分别放到了

- ./sdk.js

- ./renderer.js

其中 sdk 封装了两个后端接口，renderer 则处理了流式数据的渲染

对于用户而言，只要你的 HTML 提供了必要的 data-ah-ref 对应的元素并正确引入脚本，核心交互就能工作，剩下的样式定制化就由用户自己完成

### 必要元素

- messages：data-ah-ref="messages"（聊天消息容器）

- input：data-ah-ref="input"（文本输入框）

- send：data-ah-ref="send"（发送按钮）

可选元素（有则启用相应功能）

- clear：data-ah-ref="clear"（清空对话按钮）

- scroll：data-ah-ref="scroll"（回到底部按钮）

- status：data-ah-ref="status"（状态文本）

- chips：data-ah-ref="chips"（快速发言区域）

- upload：data-ah-ref="upload"（上传按钮）

- file：data-ah-ref="file"（隐藏文件 input）

以上每个查询都带有 id 回退，所以你也可以保留原来的 id 命名，不影响使用。

### 脚本引入顺序

- 依次引入：

  - ./sdk.js

  - ./renderer.js

  - ./app.js

 

特别注意⚠️：在提交代码的时候，需要把文件的相对路径更新为绝对路径，比如

- 依次引入：

  - /ui/sdk.js

  - /ui/renderer.js

  - /ui/app.js