A specialized framework for building professional AI chat and copilot interfaces using modular React components and standardized message flows.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install orbcafe-agentui-chat
2. Manual Installation
Copy the skill folder to one of these locations
~/.openclaw/skills/ <project>/skills/ Priority: Workspace > Local > Bundled
3. Prompt Installation
Copy this prompt to OpenClaw to install it automatically.
Help me install orbcafe-agentui-chat using Clawhub. If Clawhub is not installed, install it first (npm i -g clawhub).
Prefer to download?
Get the raw skill files in a ZIP archive.
What is Orbcafe AgentUI Chat?
Orbcafe AgentUI Chat is a Component-first development skill designed to streamline the creation of sophisticated AI user interfaces. It provides a structured approach to implementing full-page chat systems, floating copilots, and interactive streaming replies. By utilizing a standardized set of components like AgentPanel and StdChat, developers can ensure consistent behavior across markdown rendering, card interactions, and complex UI states.
This skill focuses on solving common integration hurdles such as non-responsive send actions, broken streaming animations, and rigid layout containers. It leverages the Openclaw Skills methodology to bridge the gap between raw LLM outputs and interactive, high-fidelity UI components, ensuring that every chat interaction feels fluid and professional.
Orbcafe AgentUI Chat Use Cases
- Building full-page AI workstation interfaces with dedicated headers and message history.
- Implementing floating copilot overlays that support resizing, dragging, and context-aware interactions.
- Developing real-time streaming chat experiences with precise message status handling.
- Creating interactive UI cards within chat threads that trigger specific application logic via hooks.
- Standardizing chat UI across multiple internal tools using a unified component library.
How Orbcafe AgentUI Chat Works
- Verify module contracts to ensure a Component-first integration approach.
- Select the appropriate UI primitive (AgentPanel, StdChat, or CopilotChat) based on the layout requirements.
- Perform a minimal bootstrap installation of the core UI library and its dependencies.
- Implement the UI logic using predefined recipes to ensure valid code patterns and public API usage.
- Configure message state shapes, specifically managing isStreaming and isResponding flags.
- Apply guardrails to verify message delivery, card hooks, and shell boundaries for copilots.
Orbcafe AgentUI Chat Setup
To get started with this Openclaw Skills integration, install the required dependencies:
npm install orbcafe-ui @mui/material @mui/icons-material @mui/x-date-pickers @emotion/react @emotion/styled dayjs
For local development and testing within the repository:
npm run build
cd examples
npm install
npm run dev
Orbcafe AgentUI Chat Data Schema & Taxonomy
The skill follows a strict data contract to manage chat state and component behavior:
| Attribute | Description |
|---|---|
| messages | An array of ChatMessage objects containing text or card data. |
| isResponding | Boolean flag indicating the agent is currently generating a response. |
| isStreaming | Nested property within a message to trigger the typing/streaming flow. |
| AgentUICardHooks | Centralized event handler for all interactive card components. |
| Copilot Shell | State object managing dimensions (resize) and position (drag) for floating UI. |
Orbcafe AgentUI Chat Advanced Features
- Multi-layout support allowing seamless switching between full-page AgentPanel and floating CopilotChat.
- Integrated typing flow baselines that handle asynchronous completion via onMessageStreamingComplete hooks.
- Decoupled card interaction logic using AgentUICardHooks to prevent renderer coupling.
- Built-in troubleshooting protocols for fixing 'Ghost UI' issues where components render but lack functionality.
- Support for complex MUI-based styling and localization through integrated date pickers and icon sets.
SKILL.md
Loading
Related Openclaw Skills
Weather Longli - Daily Report & Dressing Guide
A zero-cost weather automation skill for Longli County that scrapes real-time data and provides daily dressing recommendations via OpenClaw.
Game Deals
An automated tracking skill for Openclaw Skills that identifies and notifies users of free game promotions on Steam and Epic Games.
SearchAPI Scholar Search
A professional-grade academic retrieval skill for discovering scholarly papers, verifying citations, and automating literature review workflows.
Translate Book
A sophisticated translation skill that uses parallel subagents and SHA-256 validation to convert books into multiple languages and formats.
Tavily Search Skill
A high-performance search engine integration specifically designed to provide AI agents with structured, LLM-ready web data and deep research capabilities.
Tavily Search
A high-performance web search skill that leverages the Tavily API to provide AI agents with real-time web results and concise summaries.
Featured*
