agent-ui

--- 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" --- # Agent Component Batteries-included agent component from [ui.inference.sh](https://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/sdk ``` ## Setup ### 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 "@/ [... prompt truncated for preview ...]