agent-uilisted
Install: claude install-skill aiskillstore/marketplace
# 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 "@/registry/blocks/agent/agent"
import { createScopedTools } from "./blocks/agent/lib/client-tools"
const formRef = useRef<