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