---
id: sm-agent-ui
name: "agent-ui"
url: https://skills.yangsir.net/skill/sm-agent-ui
author: inferen-sh
domain: ai-frontend-engineering
tags: ["ai-agent-ui", "user-interface", "frontend-development", "interaction-design", "dashboarding"]
install_count: 13900
rating: 4.50 (556 reviews)
github: https://github.com/inferen-sh/skills
---

# agent-ui

> 专注于前端Agent用户界面开发，通过API为Agent提供可视化交互能力，提升用户操作体验。

**Stats**: 13,900 installs · 4.5/5 (556 reviews)

## Before / After 对比

### 代理应用界面开发效率

| Metric | Before | After | Change |
|---|---|---|---|
| - | - | - | - |
| - | - | - | - |

## Readme

# agent-ui

# Agent Component

Batteries-included agent component from [ui.inference.sh](https://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](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)
Weekly Installs8.5KRepository[inferen-sh/skills](https://github.com/inferen-sh/skills)GitHub Stars159First Seen6 days agoSecurity Audits[Gen Agent Trust HubPass](/inferen-sh/skills/agent-ui/security/agent-trust-hub)[SocketPass](/inferen-sh/skills/agent-ui/security/socket)[SnykPass](/inferen-sh/skills/agent-ui/security/snyk)Installed onclaude-code6.9Kgemini-cli6.0Kcodex6.0Kamp6.0Kgithub-copilot6.0Kkimi-cli6.0K

---
*Source: https://skills.yangsir.net/skill/sm-agent-ui*
*Markdown mirror: https://skills.yangsir.net/api/skill/sm-agent-ui/markdown*