Agent Ui

What This Skill Does

The Agent Ui skill by okaris provides a comprehensive, 'batteries-included' React component for integrating AI agents directly into your Next.js applications. Built on the inference.sh infrastructure, this skill abstracts away the complexities of managing AI agent lifecycles, tool execution, and UI state. It serves as a drop-in solution for developers looking to implement full-featured chat interfaces, agentic workflows, and SaaS copilots with minimal boilerplate. The skill natively supports real-time token streaming, human-in-the-loop approval workflows, and client-side tool execution, allowing your agent to interact with browser-based forms and DOM elements directly.

Installation

To integrate this into your project, use the OpenClaw CLI: clawhub install openclaw/skills/skills/okaris/agent-ui. Additionally, since this skill leverages the inference.sh SDK, ensure you have installed the required dependencies by running npm install @inferencesh/sdk. Finally, set up your required environment variable INFERENCE_API_KEY in your .env.local file to authenticate your requests against the inference.sh proxy.

Use Cases

• SaaS Copilots: Add interactive assistance to dashboard views, allowing users to query data or fill complex forms via natural language.
• Agentic UIs: Build interfaces where the AI acts as an autonomous agent, capable of performing browser-based tasks like field entry or element scanning.
• Human-in-the-Loop Workflows: Implement secure AI workflows that require user approval before triggering sensitive actions or modifying data.
• Rapid Prototyping: Quickly stand up a fully functional, stateful AI chat interface without writing custom Redux or Context state management.

Example Prompts

1. "Fill out the contact form on this page with the user information I just provided and submit it."
2. "Can you scan the current page and tell me which form fields are missing validation?"
3. "Summarize the current document and provide a widget that allows me to export it as a CSV."

Tips & Limitations

• Performance: As this relies on client-side tools, heavy processing should remain on the backend where possible to keep the main browser thread performant.
• Tool Scope: Use the createScopedTools utility to restrict the agent's interaction to specific DOM elements, preventing unauthorized form manipulation.
• Streaming: Ensure your proxy route supports streaming responses to avoid latency issues in the UI.
• Security: Always review the tools assigned to an agent to prevent unintended execution of client-side operations.