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: '便利なAIアシスタント',
system_prompt: 'あなたは親切なアシスタントです。',
}}
/>
)
}
機能
| 機能 | 説明 |
|---|---|
| ランタイム同梱 | バックエンドロジックは不要 |
| ツールライフサイクル | 保留中、進行中、承認、結果 |
| Human-in-the-loop | 組み込みの承認フロー |
| ウィジェット | エージェントレスポンスからの宣言的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: 'scan_uiツールとfill_fieldツールを使ってフォームに入力できます。',
}}
/>
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 - プログラムによるエージェント制御
- Human-in-the-Loop - 承認フロー
- UIを生成するエージェント - 生成型UIの構築
- エージェントUXパターン - ベストプラクティス
コンポーネントドキュメント: ui.inference.sh/blocks/agent