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