agent-ui

belt CLI スキルをインストールする： npx skills add belt-sh/cli

エージェントコンポーネント

ui.inference.sh の機能が揃ったエージェントコンポーネントです。

クイックスタート

# 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

セットアップ

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.',
      }}
    />
  )
}

機能

機能	説明
ランタイムを内蔵	バックエンドロジックは不要です
ツールのライフサイクル	保留中、進行状況、承認、結果
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: 'You can fill forms using scan_ui and fill_field tools.',
  }}
/>

Props

Prop	型	説明
proxyUrl	string	API プロキシのエンドポイント
name	string	エージェント名（任意）
config	AgentConfig	エージェントの設定
allowFiles	boolean	ファイルのアップロードを有効化
allowImages	boolean	画像のアップロードを有効化

関連スキル

# Chat UI building blocks
npx skills add inference-sh/skills@chat-ui

# Declarative widgets from JSON
npx skills add inference-sh/skills@widgets-ui

# Tool lifecycle UI
npx skills add inference-sh/skills@tools-ui

ドキュメント

• エージェントの概要 - AI エージェントの構築
• エージェント SDK - プログラムによるエージェントの制御
• Human-in-the-Loop - 承認フロー
• UI を生成するエージェント - 生成 UI の構築
• エージェント UX のパターン - ベストプラクティス

コンポーネントのドキュメント：ui.inference.sh/blocks/agent