skills.rest
Aadi-110i
Aadi-110iCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

agent-ui

Implements a React agent component with streaming, tool approvals, and client-side tools.

Updated Jul 28, 2026
Search Tags:#react#streaming#nextjs#human-in-the-loop#copilot#chat interface#agent ui
One-click install
npx skills add https://github.com/Aadi-110i/PEP-PROJECT --skill agent-ui-aadi-110i
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: agent-ui
Source: https://github.com/Aadi-110i/PEP-PROJECT/tree/main/skills/agent-ui
Command: npx skills add https://github.com/Aadi-110i/PEP-PROJECT --skill agent-ui-aadi-110i

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @inferencesh/sdk.

What problem does it solve? Building an AI chat or copilot interface from scratch requires wiring together streaming, tool execution, approval flows, and UI state, which is repetitive and error-prone for React and Next.js developers. ## Core Features & Use Cases - Drop-in Agent Component: A single React component with runtime, streaming, tool lifecycle, and human-in-the-loop approvals built in, installed via the shadcn CLI. - Client-Side Tools: Tools that run in the browser, such as scanning the UI and filling form fields, letting the agent act directly on the page. - Use Case: Add a SaaS copilot to your Next.js app that answers user questions, streams responses in real time, requests approval before sensitive actions, and fills out forms on behalf of the user. ## Quick Start Install the agent component from ui.inference.sh with the shadcn CLI, add the inference proxy route and API key, then render the Agent component with your agent configuration.

Frequently Asked Questions about agent-ui

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add an AI agent chat component to a Next.js app?▼

Install the agent component with npx shadcn@latest add https://ui.inference.sh/r/agent.json, add the @inferencesh/sdk proxy route at app/api/inference/proxy/route.ts, set your INFERENCE_API_KEY, and render the Agent component with your agent configuration.

How do I add human-in-the-loop approvals to an AI agent UI?▼

The Agent component includes built-in approval flows covering the full tool lifecycle: pending, progress, approval, and results. No custom approval UI is needed; the component renders approval prompts automatically when tools require confirmation.

Can the agent component run tools in the browser?▼

Yes, client-side tools run directly in the browser. Use createScopedTools with a form ref to give the agent tools like scan_ui and fill_field, letting it inspect and fill forms on the page.

Does the agent component support file and image uploads?▼

Yes, the Agent component exposes allowFiles and allowImages boolean props. Set them to true to enable file and image uploads in the chat interface.

What backend do I need for the agent UI component?▼

No custom backend logic is required since the runtime is included. You only need a thin API proxy route using @inferencesh/sdk/proxy/nextjs and an INFERENCE_API_KEY environment variable.

Related Skills

Explore More Software Engineering Skills→
PlazaCCPlazaCC
2

new-shadcn-component

Install shadcn/ui components and scaffold typed wrappers in Next.js projects.

Official
Intermediate
TyrizxTyrizx

create-agent

Creates custom .agent.md agent definition files for specialized jobs.

Official
Basic
inference-shinference-sh
688

widgets-ui

Render declarative UI components from JSON schemas for React and Next.js.

Official
Intermediate
vercelvercel
246

json-render

Render AI SDK v6 UIMessage parts into React chat UI components.

Official
Intermediate