belt CLI 스킬 설치:
npx skills add belt-sh/cli
에이전트 컴포넌트
ui.inference.sh에서 제공하는 완전체 에이전트 컴포넌트입니다.
빠른 시작
# 에이전트 컴포넌트 설치
npx shadcn@latest add https://ui.inference.sh/r/agent.json
# 프록시 라우트를 위한 SDK 추가
npm install @inferencesh/sdk
설정
1. API 프록시 라우트 (Next.js)
// app/api/inference/proxy/route.ts
import { route } from '@inferencesh/sdk/proxy/nextjs';
export const { GET, POST, PUT } = route;
2. 환경 변수
# .env.local
INFERENCE_API_KEY=inf_...
3. 컴포넌트 사용
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.',
}}
/>
)
}
기능
| 기능 | 설명 |
|---|---|
| 런타임 포함 | 백엔드 로직 불필요 |
| 도구 생명주기 | 대기, 진행, 승인, 결과 |
| 인간-인-더-루프 | 내장된 승인 흐름 |
| 위젯 | 에이전트 응답 기반 선언적 JSON UI |
| 스트리밍 | 실시간 토큰 스트리밍 |
| 클라이언트 측 도구 | 브라우저에서 실행되는 도구 |
클라이언트 측 도구 예제
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 | 타입 | 설명 |
|---|---|---|
proxyUrl | string | API 프록시 엔드포인트 |
name | string | 에이전트 이름 (선택사항) |
config | AgentConfig | 에이전트 설정 |
allowFiles | boolean | 파일 업로드 허용 |
allowImages | boolean | 이미지 업로드 허용 |
관련 스킬
# 채팅 UI 구성 요소
npx skills add inference-sh/skills@chat-ui
# JSON 기반 선언적 위젯
npx skills add inference-sh/skills@widgets-ui
# 도구 생명주기 UI
npx skills add inference-sh/skills@tools-ui
문서
- 에이전트 개요 - AI 에이전트 구축
- 에이전트 SDK - 프로그래매틱 에이전트 제어
- 인간-인-더-루프 - 승인 흐름
- UI를 생성하는 에이전트 - 생성형 UI 구축
- 에이전트 UX 패턴 - 모범 사례
컴포넌트 문서: ui.inference.sh/blocks/agent