SuperAPI AI 工具集

agent-ui-design

设计与创作

查看项目

更新于 10-15 21:42

技能介绍

用途:为 AI 应用设计聊天界面、智能体交互、流式输出与工具调用可视化,也可用于智能体仪表盘与沙箱执行环境的状态呈现。

主要能力与原则:组件需原生支持流式内容、工具调用与异步状态切换;强调透明性,智能体每一步都可见,不做静默后台工作;渐进式复杂度,默认只显示要点,工具参数、原始数据与日志按需展开;把流式输出当作刻意设计的体验元素;把工具错误、超时与异常结果视为正常状态并单独设计视觉。

关键规则:采用三栏聊天架构——左侧会话列表(可滚动、带搜索)、中间聊天面板(消息流加输入框)、右侧上下文面板(可选,用于结果、预览、表单)。消息按角色区分:用户消息右对齐、强调色、紧凑;助手消息左对齐、中性色、可展开工具结果;系统消息居中、弱化;工具调用带状态指示。助手消息支持 Markdown 渲染,代码块带语法高亮与复制按钮。流式渲染逐字或逐词显示并带光标,可用 AI SDK useChat 钩子或 SSE;生成期间自动滚动到底部并显示停止按钮,且不阻塞滚动。工具调用在消息流内展示:名称作为标签或徽章,输入参数可折叠,结果按类型格式化,状态从加载到成功或错误;错误需说明原因与可采取的操作,禁止直接输出原始 JSON。沙箱状态需可视化:已创建、活跃(绿点)、执行中(动画与进度)、已终止(结果摘要);文件树可交互并支持预览。

适用场景:AI 聊天应用、智能体仪表盘、表单与智能体混合界面、实时状态监控面板。

限制与反模式:避免无上下文面板、工具结果 JSON 堆砌、无反馈的静默执行、所有消息样式相同、无停止按钮的无限流式、用模态框展示工具结果、会话列表无搜索、工具错误无重试。移动端聊天面板全屏、侧栏改为抽屉;快捷键 Enter 发送、Shift+Enter 换行。具体实现示例与扩展规则见 references/implementation.md 与 references/patterns.md。