About

Imported from inference-sh/skills (ui/agent-ui/SKILL.md) via skills.sh. Install upstream with npx skills add inference-sh/skills --skill agent-ui. Copyright stays with the author.

Install the belt CLI skill: npx skills add belt-sh/cli

Agent Component

Name: agent-ui
Author: inference-sh

Batteries-included agent component from ui.inference.sh.

Agent Component

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

Use it

Copy one of these into your project. Installing also returns the manifest and these snippets.

yaml

targets:
  - https://api.opensmartroute.ai/api/v1/registry/inference-sh-skills-agent-ui/manifest   # or paste the manifest below

Manifest

An Open Capability Manifest: the router reads it to know what this does, what it costs and when to pick it.

inference-sh-skills-agent-ui.ocm.jsonjson

{
  "ocm": "1",
  "id": "inference-sh-skills-agent-ui",
  "kind": "skill",
  "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",
  "publisher": "inference-sh",
  "version": "1.0.0",
  "capabilities": {
    "domains": [
      "general"
    ],
    "tags": [
      "skill-md",
      "skills-sh"
    ],
    "languages": [
      "en"
    ]
  },
  "quality_prior": 0.6,
  "examples": [
    "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"
  ],
  "primary": false,
  "metadata": {
    "source": {
      "provider": "skills.sh",
      "repository": "https://github.com/inference-sh/skills",
      "path": "ui/agent-ui/SKILL.md",
      "ref": "HEAD",
      "url": "https://www.skills.sh/inference-sh/skills/agent-ui",
      "key": "inference-sh/skills/ui/agent-ui/SKILL.md"
    }
  },
  "instructions": "> **Install the belt CLI skill:** `npx skills add belt-sh/cli`\n\n# Agent Component\n\nBatteries-included agent component from [ui.inference.sh](https://ui.inference.sh).\n\n![Agent Component](https://cloud.inference.sh/app/files/u/4mg21r6ta37mpaz6ktzwtt8krr/01kgvftp7hb8wby7z66fvs9asd.jpeg)\n\n## Quick Start\n\n```bash\n# Install the agent component\nnpx shadcn@latest add https://ui.inference.sh/r/agent.json\n\n# Add the SDK for the proxy route\nnpm install @inferencesh/sdk\n```\n\n## Setup\n\n### 1. API Proxy Route (Next.js)\n\n```typescript\n// app/api/inference/proxy/route.ts\nimport { route } from '@inferencesh/s",
  "cost": {
    "context_tokens": 772
  }
}

Fetch it by URL: GET /api/v1/registry/inference-sh-skills-agent-ui/manifest?version=1.0.0

Reviews

Star ratings from people who tried it. One review per account; edit yours any time.

No reviews yet. Install it, try it, and be the first to rate it.