Agent Skills
› NeverSight/learn-skills.dev
› agent-ui
agent-ui
GitHub适用于React/Next.js的电池级Agent组件，内置运行时、工具生命周期、流式传输及人机协作审批功能。用于快速构建AI聊天界面、智能助手及SaaS Copilot，支持客户端工具和声明式UI生成。
触发场景
agent component
agent ui
chat agent
shadcn agent
react agent
agentic ui
ai assistant ui
copilot ui
inference ui
human in the loop
安装
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. One component with runtime, tools, streaming, approvals, and widgets built in. Capabilities: drop-in agent, human-in-the-loop, client-side tools, form filling. Use for: building AI chat interfaces, agentic UIs, SaaS copilots, assistants. Triggers: agent component, agent ui, chat agent, shadcn agent, react agent, agentic ui, ai assistant ui, copilot ui, inference ui, human in the loop"
}
Install the belt CLI skill:
npx skills add belt-sh/cli
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 inference-sh/skills@chat-ui
# Declarative widgets from JSON
npx skills add inference-sh/skills@widgets-ui
# Tool lifecycle UI
npx skills add inference-sh/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
版本历史
- c3c0a1e 当前 2026-07-23 06:48
依赖关系
-
suggested
belt-sh/cli -
suggested
inference-sh/skills@chat-ui -
suggested
inference-sh/skills@widgets-ui -
suggested
inference-sh/skills@tools-ui
