Agent Skills
› NeverSight/learn-skills.dev
› agent-ui
agent-ui
GitHub提供开箱即用的React/Next.js AI代理组件，内置运行时、流式传输、人机协作审批及客户端工具。适用于快速构建AI聊天界面、SaaS Copilot及智能助手UI，支持表单填充与动态Widget生成。
Trigger Scenarios
agent component
agent ui
chat agent
shadcn agent
react agent
agentic ui
ai assistant ui
copilot ui
inference ui
human in the loop
Install
npx skills add NeverSight/learn-skills.dev --skill agent-ui -g -y
SKILL.md
Frontmatter
{
"name": "agent-ui",
"description": "Batteries-included agent component for React\/Next.js from ui.inference.sh.\nOne component with runtime, tools, streaming, approvals, and widgets built in.\nCapabilities: drop-in agent, human-in-the-loop, client-side tools, form filling.\nUse for: building AI chat interfaces, agentic UIs, SaaS copilots, assistants.\nTriggers: agent component, agent ui, chat agent, shadcn agent, react agent,\nagentic ui, ai assistant ui, copilot ui, inference ui, human in the loop"
}
Agent Component
Batteries-included agent component from ui.inference.sh.
Quick Start
# Install the agent component
npx shadcn@latest add https://ui.inference.sh/r/agent.json
# Add the SDK for the proxy route
npm install @inferencesh/sdk
Setup
1. API Proxy Route (Next.js)
// app/api/inference/proxy/route.ts
import { route } from '@inferencesh/sdk/proxy/nextjs';
export const { GET, POST, PUT } = route;
2. Environment Variable
# .env.local
INFERENCE_API_KEY=inf_...
3. Use the Component
import { Agent } from "@/registry/blocks/agent/agent"
export default function Page() {
return (
<Agent
proxyUrl="/api/inference/proxy"
agentConfig={{
core_app: { ref: 'openrouter/claude-haiku-45@0fkg6xwb' },
description: 'a helpful ai assistant',
system_prompt: 'you are helpful.',
}}
/>
)
}
Features
| Feature | Description |
|---|---|
| Runtime included | No backend logic needed |
| Tool lifecycle | Pending, progress, approval, results |
| Human-in-the-loop | Built-in approval flows |
| Widgets | Declarative JSON UI from agent responses |
| Streaming | Real-time token streaming |
| Client-side tools | Tools that run in the browser |
Client-Side Tools Example
import { Agent } from "@/registry/blocks/agent/agent"
import { createScopedTools } from "./blocks/agent/lib/client-tools"
const formRef = useRef<HTMLFormElement>(null)
const scopedTools = createScopedTools(formRef)
<Agent
proxyUrl="/api/inference/proxy"
config={{
core_app: { ref: 'openrouter/claude-haiku-45@0fkg6xwb' },
tools: scopedTools,
system_prompt: 'You can fill forms using scan_ui and fill_field tools.',
}}
/>
Props
| Prop | Type | Description |
|---|---|---|
proxyUrl |
string | API proxy endpoint |
name |
string | Agent name (optional) |
config |
AgentConfig | Agent configuration |
allowFiles |
boolean | Enable file uploads |
allowImages |
boolean | Enable image uploads |
Related Skills
# Chat UI building blocks
npx skills add inferencesh/skills@chat-ui
# Declarative widgets from JSON
npx skills add inferencesh/skills@widgets-ui
# Tool lifecycle UI
npx skills add inferencesh/skills@tools-ui
Documentation
- Agents Overview - Building AI agents
- Agent SDK - Programmatic agent control
- Human-in-the-Loop - Approval flows
- Agents That Generate UI - Building generative UIs
- Agent UX Patterns - Best practices
Component docs: ui.inference.sh/blocks/agent
Version History
- e0220ca Current 2026-07-05 20:46
Dependencies
-
suggested
inferencesh/skills@chat-ui -
suggested
inferencesh/skills@widgets-ui -
suggested
inferencesh/skills@tools-ui
