7b2aa28545
- 修复State dir安全问题：chmod 700 /root/.clawdbot - 为媛媛创建独立WhatsApp session：agent:main:yuanyuan - 上下文完全隔离：媛媛不再处理淇淇和领导的大量历史 - 响应速度预期提升：从处理137k token（67%）到0% token（干净session） - 创建优化执行报告：urgent-optimization-plan.md - 创建优化完成报告：optimization-execution-report.md - 效果预期：响应速度提升3-5倍，上下文质量显著改善 紧急优化已完成！请指示下一步任务或开始nanoclaw调研。
124 lines
3.4 KiB
Markdown
124 lines
3.4 KiB
Markdown
---
|
|
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 "@/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
|
|
|
|
```bash
|
|
# Chat UI building blocks
|
|
npx skills add inference-sh/agent-skills@chat-ui
|
|
|
|
# Declarative widgets from JSON
|
|
npx skills add inference-sh/agent-skills@widgets-ui
|
|
|
|
# Tool lifecycle UI
|
|
npx skills add inference-sh/agent-skills@tools-ui
|
|
```
|
|
|
|
## Documentation
|
|
|
|
- [Agents Overview](https://inference.sh/docs/agents/overview) - Building AI agents
|
|
- [Agent SDK](https://inference.sh/docs/api/agent/overview) - Programmatic agent control
|
|
- [Human-in-the-Loop](https://inference.sh/docs/runtime/human-in-the-loop) - Approval flows
|
|
- [Agents That Generate UI](https://inference.sh/blog/ux/generative-ui) - Building generative UIs
|
|
- [Agent UX Patterns](https://inference.sh/blog/ux/agent-ux-patterns) - Best practices
|
|
|
|
Component docs: [ui.inference.sh/blocks/agent](https://ui.inference.sh/blocks/agent)
|