首页 › 龙虾技能列表 › orbcafe-agentui-chat — 构建 ORBCAFE 聊天与协驾体验

orbcafe-agentui-chat — 构建 ORBCAFE 聊天与协驾体验

v1.0.0

使用 AgentPanel、StdChat、CopilotChat、聊天消息输入流和 AgentUICardHooks 构建 ORBCAFE 聊天和协驾体验，适用于全页聊天、浮动协驾、流式回复、Markdown/卡片渲染等场景，特别是当聊天 UI 显示但发送、流式、卡片操作、拖拽或缩放行为无效时。

0· 172·0 当前·0 累计
by @shenruiyang (SHENRUIYANG)·MIT-0
下载技能包
License
MIT-0
最后更新
2026/3/15
安全扫描
VirusTotal
无害
查看报告
OpenClaw
安全
high confidence
本技能为 orbcafe-ui 的指令式 UI 集成指南；其请求的操作和依赖与其声明的目的相符，没有发现不当或隐蔽的内容。
评估建议
本技能为构建 ORBCAFE 聊天 UI 的作者指南，似乎逻辑清晰。运行 npm 步骤前，请验证 orbcafe-ui 包源和版本（确保来自可信任的注册表或您的组织），审查引用示例代码（examples/app/*）在本地，且在开发或沙盒环境中安装。另外，请注意本技能引用了未包含在此处的 module-contracts.md 文件——如果需要确切的模块合同，请获取该文件。如果您担心第三方包，请考虑在运行 npm install 之前对包内容进行审计或使用供应链扫描。...
详细分析 ▾
✓ 用途与能力
The name/description (build ORBCAFE chat/copilot UI) matches the instructions: selecting components, producing minimal code, and running example builds. The npm packages listed (@mui/*, orbcafe-ui, dayjs) are appropriate for a React UI integration guide.
ℹ 指令范围
SKILL.md stays within UI integration scope (component selection, state shapes, guardrails, verification steps). It does instruct running npm install and example dev servers (expected for a UI recipe). One minor inconsistency: step 1 refers to 'skills/orbcafe-ui-component-usage/references/module-contracts.md' which is not present in the provided manifest — the skill expects an external/reference file not included here.
✓ 安装机制
This is instruction-only (no install spec), so the skill itself doesn't auto-download or execute code. The instructions tell the user to run npm install against well-known packages — a normal, low-risk developer action for this use case. No obscure URLs or archive extraction are involved.
✓ 凭证需求
No environment variables, credentials, or config paths are requested. The guidance and example files do not reference secrets or unrelated system resources.
✓ 持久化与权限
The skill is not always-enabled and does not request persistent or elevated platform privileges. It's an on-demand, user-invoked instructional skill that does not modify other skills or system settings.
安全有层次，运行前请审查代码。

License

MIT-0

可自由使用、修改和再分发，无需署名。

运行时依赖

无特殊依赖

版本

latestv1.0.02026/3/15

技能范围更新，专注于使用官方示例模式的 AgentUI 聊天和协驾功能。- 专门用于构建 ORBCAFE 聊天和协驾 UI，使用 AgentPanel、StdChat、CopilotChat 等组件和相关钩子。- 删除旧的通用集成和路由引用，添加新的、专注的指南和配方用于聊天体验。- 输出合同重新定义：要求显式模式、指导组件选择、最小代码、状态形状、验证步骤和聊天交互故障排除。- 流式处理、卡片操作和协驾行为的示例和工作流程已澄清，强调可观察的过程和调试步骤。- 安装基线和示例引用更新，以便于入门和验证。

● 无害

安装命令 点击复制

官方npx clawhub@latest install orbcafe-agentui-chat
镜像加速npx clawhub@latest install orbcafe-agentui-chat --registry https://cn.clawhub-mirror.com

技能文档

工作流

  • 先对照 skills/orbcafe-ui-component-usage/references/module-contracts.md，确认这是 Component-first 模块。
  • 用 references/component-selection.md 选择 AgentPanel / StdChat / CopilotChat。
  • 执行安装与最小接入。
  • 用 references/recipes.md 输出最小可运行代码。
  • 用 references/guardrails.md 检查消息状态、流式处理、卡片钩子和协驾外壳边界。
  • 输出验收步骤与“没效果”排障。

安装和引导 (必选)

npm install orbcafe-ui @mui/material @mui/icons-material @mui/x-date-pickers @emotion/react @emotion/styled dayjs
本仓库联调： 
npm run build
cd examples
npm install
npm run dev
参考实现：
  • examples/app/chat/ChatExampleClient.tsx
  • examples/app/copilot/CopilotExampleClient.tsx
  • src/components/AgentUI/README.md

输出合同

  • Mode: Component-first。
  • 聊天决策: 选择 AgentPanel / StdChat / CopilotChat 并说明依据。
  • 最小代码: 一个可直接粘贴的最小片段，只允许从 orbcafe-ui 导入公共 API。
  • 状态形状: messages、isResponding 以及协驾外壳状态的最小结构。
  • 验证: 至少 3 条可执行验收步骤，覆盖发送、流式处理、卡片操作；如果是协驾，还要覆盖打开/关闭和拖拽/缩放。
  • 故障排除: 至少 3 条“UI 看得到但没有效果”的排查项。

基于示例的体验摘要

  • StdChat 是标准聊天布局层，负责消息区和输入区，不负责标题、浮窗、拖拽和缩放。
  • AgentPanel 是 StdChat 的带头部封装，适合工作台或整页聊天。
  • CopilotChat 只负责协驾面板内容层；浮动按钮、定位、吸附、拖拽和 resize 必须在页面壳层实现。
  • 助手输入流的稳定基线是：追加助手消息以 isStreaming: true，然后在 onMessageStreamingComplete 中改回 false。
  • 卡片交互统一走 AgentUICardHooks.onCardEvent，不要直接耦合内部 renderer。
数据来源：ClawHub ↗ · 中文优化：龙虾技能库
OpenClaw 技能定制 / 插件定制 / 私有工作流定制

免费技能或插件可能存在安全风险，如需更匹配、更安全的方案，建议联系付费定制

了解定制服务