A complete, drop-in React component for building sophisticated AI agent interfaces with human-in-the-loop capabilities.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install agent-ui
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 agent-ui 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 Agent UI Component?
This skill provides a comprehensive UI solution for developers looking to integrate AI agents into React and Next.js applications. By leveraging Openclaw Skills, developers can quickly deploy a component that handles complex agentic workflows, including real-time streaming, tool approvals, and declarative JSON widgets without needing to build custom backend logic. The Agent UI component acts as a high-level abstraction over the inference runtime, allowing you to focus on the user experience rather than the underlying agent protocol. It is specifically designed to work with Openclaw Skills to streamline the development of SaaS copilots and AI assistants.
Agent UI Component Use Cases
- Building AI chat interfaces for SaaS applications.
- Implementing human-in-the-loop approval flows for agent actions.
- Creating agentic UIs that can interact with client-side DOM elements.
- Developing AI assistants capable of rendering declarative widgets from JSON responses.
- Rapidly prototyping Copilots within the Openclaw Skills ecosystem.
How Agent UI Component Works
- Initialize the component using the shadcn CLI integration.
- Set up an API proxy route in your Next.js application to securely communicate with the inference SDK.
- Configure the agent with a model reference (e.g., Claude) and a system prompt.
- Render the Agent component in your application, passing the proxy URL and configuration props.
- The component automatically manages the tool lifecycle, streaming tokens, and UI state transitions.
- Users interact with the agent, which can trigger client-side tools or request manual approvals for sensitive tasks.
Agent UI Component Setup
First, add the component via shadcn:
npx shadcn@latest add https://ui.inference.sh/r/agent.json
Install the necessary SDK for the proxy:
npm install @inferencesh/sdk
Configure your .env.local:
INFERENCE_API_KEY=inf_...
Add your Next.js API route to handle requests:
// app/api/inference/proxy/route.ts
import { route } from '@inferencesh/sdk/proxy/nextjs';
export const { GET, POST, PUT } = route;
Agent UI Component Data Schema & Taxonomy
The component manages data through a configuration object and environment variables.
| Key | Type | Description |
|---|---|---|
| proxyUrl | string | The endpoint for the API proxy route. |
| agentConfig | object | Contains core_app reference, description, and system prompt. |
| tools | object | Scoped tools for client-side interaction. |
| allowFiles | boolean | Toggle for file upload capabilities. |
| allowImages | boolean | Toggle for image processing. |
Agent UI Component Advanced Features
- Declarative Widgets: Render dynamic UI components directly from agent-generated JSON.
- Client-Side Scoping: Use createScopedTools to allow the agent to interact with specific React refs or DOM elements.
- Human-In-The-Loop: Built-in UI states for tool approvals (pending, progress, and results).
- Multi-Skill Integration: Seamlessly works with other Openclaw Skills like chat-ui and widgets-ui to expand interface capabilities.
- Custom Proxies: Flexible routing for enterprise-grade security, auditing, and logging of agent interactions.
SKILL.md
Loading
Related Openclaw Skills
App Dev Delegation Skill
A specialized skill designed to delegate mobile application development tasks and feature requests to an enterprise-grade asynchronous backend.
Spritz Fiat Rails
Enable AI agents to convert cryptocurrency into fiat currency and transfer it directly to traditional bank accounts via the Spritz API.
Desktop Mouse Control
A specialized Linux utility for programmatic mouse control via the host gateway using a ydotool wrapper.
Bankr
Bankr is an AI-powered crypto trading agent and LLM gateway that allows users to manage DeFi operations and access multiple AI models using natural language.
AI Automation Workflows
A comprehensive framework for building, scheduling, and monitoring automated AI pipelines using the inference.sh CLI.
AI Avatar & Talking Head Videos
A powerful tool for generating audio-driven AI avatars and lipsync videos using professional-grade models via the inference.sh CLI.
METADATA
Featured*
