agent-ui
"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
소스 정보
- 저장소
- mediar-ai/skillhubz
- 최근 소스 활동
- 2026년 3월 1일 22:36
- 감지된 SKILL.md 언어
- 영어
- 스타
- 7
- 포크
- 4
설치 방법
기본적으로 소스를 먼저 확인하는 Prompt가 선택됩니다. 직접 명령으로 전환하거나 로컬 사본을 다운로드할 수도 있습니다.
소스 파일 검토
설치 여부를 결정하기 전에 SKILL.md와 SkillsMP에 표시된 보조 파일을 읽어 보세요.
SKILL.md 표시 중
SKILL.md
소스 지침 · 읽기 전용 미리보기- 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
# Agent Component
Batteries-included agent component from [ui.inference.sh](https://ui.inference.sh).
## Quick Start
```bash
# 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)
```typescript
// app/api/inference/proxy/route.ts
import { route } from '@inferencesh/sdk/proxy/nextjs';
export const { GET, POST, PUT } = route;
```
### 2. Environment Variable
```bash
# .env.local
INFERENCE_API_KEY=inf_...
```
### 3. Use the Component
```tsx
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
```tsx
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
```bash
# 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](https://inference.sh/docs/agents/overview) - Building AI agents
- [Agent SDK](https://inference.sh/docs/api/agent/overview) - Programmatic agent control
- [Human-in-the-Loop](https://inference.sh/docs/runtime/human-in-the-loop) - Approval flows
- [Agents That Generate UI](https://inference.sh/blog/ux/generative-ui) - Building generative UIs
- [Agent UX Patterns](https://inference.sh/blog/ux/agent-ux-patterns) - Best practices
Component docs: [ui.inference.sh/blocks/agent](https://ui.inference.sh/blocks/agent)
GitHub에서 보기