agent-ui
Original：🇺🇸 English
Translated
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
626installs
Source1nf-sh/skills
Added on
NPX Install
npx skill4agent add 1nf-sh/skills agent-uiTags
Translated version includes tags in frontmatterSKILL.md Content
View Translation Comparison →Agent Component
Batteries-included agent component from 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/sdkSetup
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 |
|---|---|---|
| string | API proxy endpoint |
| string | Agent name (optional) |
| AgentConfig | Agent configuration |
| boolean | Enable file uploads |
| boolean | Enable image uploads |
Related Skills
bash
# 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-uiDocumentation
- 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