Agent Skills Finder
I

agent-ui

作成者 inferen-sh

agent-ui は、ui.inference.sh が提供する React/Next.js 向けの「全部入り」Agent コンポーネントです。あらかじめ構築済みのチャット／エージェント UI と、SDK フレンドリーなプロキシルートがセットになっており、フロントエンドやストリーミング処理を一から実装することなく、AI アシスタントや SaaS コパイロット、エージェント型 UI を組み込めます。

スター0
お気に入り0
コメント0
カテゴリーFrontend Development
インストールコマンド
npx skills add https://github.com/inferen-sh/skills --skill agent-ui
ReactNextjsFrontendSdkAPITemplateAgent SDKDeveloper Audience
概要

概要

agent-ui とは？

agent-ui は、ui.inference.sh が提供する React と Next.js 向けの「全部入り」Agent コンポーネントです。AI チャットインターフェースをゼロから実装する代わりに、@inferencesh/sdk を利用したシンプルな API プロキシルート付きの、完成済み Agent UI をインストールしてそのまま使えます。

このコンポーネントには、モダンな AI アシスタントに必要な要素がひとまとめになっています。

  • すぐに差し込めるチャット／エージェントインターフェース
  • プロキシルート経由で推論バックエンドと接続するランタイム配線
  • ストリーミングレスポンスのサポート
  • ツール呼び出し、承認フロー、より高度なエージェントフロー（ui.inference.sh の基盤機構を利用）に対応できる拡張性

Next.js アプリ内に AI アシスタントや SaaS コパイロット、エージェント型 UI を組み込みたい場合、agent-ui は最小限のボイラープレートでプロダクションに近いスタート地点を提供します。

agent-ui は誰に向いている？

agent-ui は次のような人を想定しています。

  • コンポーネントを一から設計せずに、React / Next.js アプリに磨かれたエージェント／チャット UI を入れたい フロントエンド開発者
  • 既存のダッシュボードや SaaS、社内ツールに AI コパイロットやアシスタント機能を組み込みたい プロダクトチーム
  • クライアント側のリクエスト処理を書くより、プロキシルートと環境変数の設定で済ませたい API 志向のエンジニア

以下に当てはまると、よりスムーズに使えます。

  • Next.js（App Router）や類似の React スタックを使っている
  • 環境変数 や API キーの扱いに慣れている
  • TypeScript/React のコードベースでルートやコンポーネントを設定できる

agent-ui が解決する課題

agent-ui を使うことで、AI 機能を実装する際によくあるつまずきポイントを避けられます。

  • カスタムチャット UI が不要 – メッセージリストや入力ボックス、ローディング状態などを一から作る必要がありません。
  • 場当たり的な fetch 実装が不要 – プロキシルートは @inferencesh/sdk が扱うため、ストリーミングやエラー処理のロジックを毎回書き直さずに済みます。
  • 設定がシンプル – UI 全体に設定値を手作業で流し込む代わりに、agentConfig オブジェクト（model ref、description、system prompt など）を一つ渡すだけで済みます。

これにより、「API キーはある」状態から「動作するエージェント UI がある」状態までを、素早く進めたい場面で強力な選択肢になります。

agent-ui がフィットするケース / しないケース

agent-ui が特に適しているのは次のようなケースです。

  • Next.js アプリ（とくに app/ ディレクトリ構成）を構築している
  • shadcn 系エコシステムで作られた、モダンな見た目の プリビルドエージェント UI を使いたい
  • inference proxy ルートと環境変数の設定に抵抗がない

逆に、次のような場合は最適とは言えないかもしれません。

  • フロントエンドスタックとして React/Next.js を使っていない
  • 典型的なエージェント UI から大きく外れた、完全カスタムデザインのチャット UI が必要
  • 環境内で INFERENCE_API_KEY を扱ったり公開したりできない

使い方

1. エージェントワークスペースへのスキルインストール

Agent Skills 対応ワークスペースに agent-ui スキルを追加するには、skills CLI からインストールします。

npx skills add https://github.com/inferen-sh/skills --skill agent-ui

これにより、inferen-sh/skills リポジトリから agent-ui スキルのメタデータが取得されます。インストール後、ui/agent-ui フォルダ内の SKILL.md を開き、上流の手順を確認してください。

2. Next.js プロジェクトへの agent-ui コンポーネントインストール

実際に UI を表示したい Next.js アプリ側で、スキルから案内されている shadcn スタイルのコマンドを使って ui.inference.sh の Agent コンポーネントをインストールします。

# Agent コンポーネントのインストール
npx shadcn@latest add https://ui.inference.sh/r/agent.json

# プロキシルート用 SDK の追加
npm install @inferencesh/sdk

この操作で行われることは 2 つです。

  • ui.inference.sh から Agent UI ブロック（React コンポーネントと関連 UI 配線）が取り込まれる
  • Next.js アプリ内で推論プロキシルートを作るために使う @inferencesh/sdk がインストールされる

これらのコマンドは、既存の Next.js（App Router）プロジェクトならどこでも実行できます。事前に Node.js と npm（または別のパッケージマネージャ）および動作する開発環境が整っていることを確認してください。

3. Next.js で API プロキシルートを設定

agent-ui は、ブラウザから推論サービスを直接呼び出すのではなく、バックエンドのプロキシルート経由で通信することを前提としています。スキルのドキュメントには、@inferencesh/sdk を使った最小限の Next.js ルート例が記載されています。

// app/api/inference/proxy/route.ts
import { route } from '@inferencesh/sdk/proxy/nextjs';
export const { GET, POST, PUT } = route;

実装時のポイント:

  • このファイルを Next.js App Router プロジェクトの app/api/inference/proxy/route.ts に配置します。
  • @inferencesh/sdk/proxy/nextjs の route ヘルパーが HTTP ハンドラ（GET, POST, PUT）を公開してくれるので、自前のルーティングロジックは不要です。
  • このエンドポイントが、後で Agent コンポーネントに渡す proxyUrl になります。

別のディレクトリ構成を使う場合は、パスの整合性を保ちつつ、proxyUrl 側の指定も合わせて更新してください。

4. INFERENCE_API_KEY 環境変数の設定

次に、ローカル環境に推論用 API キーを設定します。スキルの手順では、INFERENCE_API_KEY 環境変数を利用する前提になっています。

# .env.local
INFERENCE_API_KEY=inf_...

手順:

  1. Next.js プロジェクトルートにある .env.local を作成または開きます。
  2. inf_... の部分を、実際の API キーに置き換えます。
  3. .env.local の変更が反映されるよう、開発サーバーを再起動します。

このキーは必ず秘密として扱い、.env.local をバージョン管理にコミットしないよう注意してください。

5. ページで Agent コンポーネントをレンダリング

コンポーネントとプロキシルートの準備ができたら、任意の Next.js ページ内で Agent UI をレンダリングできます。スキルには、シンプルなサンプルコードが含まれています。

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

押さえておきたいポイント:

  • proxyUrl: 作成した API プロキシルート（例では /api/inference/proxy）を指します。Agent UI はこの URL 経由でメッセージの送受信を行います。
  • agentConfig: バックエンド側のエージェントを構成するオブジェクトで、主に次のような項目を含みます。
    • core_app.ref: バックエンドで利用するモデルやアプリのリファレンス
    • description: アシスタントの役割を示す人間向けの説明
    • system_prompt: 振る舞いを規定する短いシステムプロンプト

このページファイルは app/agent/page.tsx などに複製・応用したり、既存の任意のルートに組み込んだりできます。

6. agent-ui のカスタマイズと拡張

スキルの SKILL.md では、ui.inference.sh を通じて提供されるツール、承認フロー、ウィジェットなどの機能にも触れています。これらを活用するには、段階的に次のような形で拡張していくとよいでしょう。

  • agentConfig の model ref、description、system_prompt を調整して、利用するモデルや役割、トーンを変える
  • インストールされた Agent ブロック（@/registry/blocks/agent/agent）のファイルを確認し、UI の構成やサポートされている props を把握する
  • サポートダッシュボード、オンボーディング用コパイロット、社内オペレーション支援など、具体的なアプリフローに合わせて Agent UI を組み込む

agent-ui は React コンポーネントとして提供されているため、レイアウト、モーダル、タブなどでラップしたり、既存のナビゲーションや認証フローと組み合わせて利用することができます。

7. インストール後に確認しておきたいファイル

skills 対応ワークスペースに agent-ui スキルをインストールした後、まず確認すべき主なファイルは次のとおりです。

  • ui/agent-ui/SKILL.md – 上流のクイックスタートと設定の詳細

この内容をもとに、実際の Next.js プロジェクトに手順を写経しつつ、自分のモデルやバックエンド構成に合わせて調整していくとスムーズです。

FAQ

agent-ui は Next.js 必須ですか？ plain React でも使えますか？

スキルのセットアップ手順とプロキシルートのサンプルは、app/api ルート規約と @inferencesh/sdk/proxy/nextjs を前提とした Next.js 向けに書かれています。UI 自体は React ベースですが、このスキルで公式に説明・サポートされているパスは、App Router スタイルの API ルートを持つ Next.js です。

plain React や別フレームワークで利用する場合は、自分で同等のプロキシ挙動を実装し、例をアプリ構成に合わせて読み替える必要があります。その統合パスについては、このスキル内ではドキュメント化されていません。

agent-ui と、独自実装のチャット UI とは何が違いますか？

agent-ui を使う場合:

  • ui.inference.sh 製のプリビルド Agent コンポーネント をインストールする
  • 1 つのプロキシルート と 環境変数 を設定して、推論バックエンドと接続する

一方で、次のような作業は不要になります。

  • チャットメッセージリストや入力エリア、ストリーミング状態などの UI を設計・実装する
  • メッセージ送受信用の fetch 呼び出しを一から書く

モデルのリファレンスや説明文、system prompt の変更は agentConfig を通じて行えるため、UI の内部には手を入れずにエージェントの挙動だけを柔軟に調整できます。

この構成における @inferencesh/sdk の役割は？

@inferencesh/sdk は サーバーサイドのプロキシルート を担います。

import { route } from '@inferencesh/sdk/proxy/nextjs';
export const { GET, POST, PUT } = route;

このヘルパーを利用することで、次のようなメリットがあります。

  • Agent UI が通信する単一のエンドポイント（例では /api/inference/proxy）を定義できる
  • プロトコルの詳細や HTTP メソッド（GET, POST, PUT）の扱いを SDK に任せられ、自前の実装が不要になる

これにより、UI 側を触らずに推論連携のロジックだけを保守・変更しやすくなります。

エージェントのモデルや挙動を変えるにはどうすればいいですか？

Agent コンポーネントに渡す agentConfig を更新します。例えば:

<Agent
  proxyUrl="/api/inference/proxy"
  agentConfig={{
    core_app: { ref: 'openrouter/claude-haiku-45@0fkg6xwb' },
    description: 'a helpful ai assistant',
    system_prompt: 'you are helpful.',
  }}
/>

挙動を変えたい場合は、次のような調整が可能です。

  • core_app.ref を別の対応モデルやアプリに差し替える
  • description を「customer support copilot」など、アシスタントの役割に合わせた文言に変える
  • system_prompt を洗練させて、トーンやタスク範囲を調整する

利用可能な値や追加オプションについては、使用している推論バックエンドのドキュメントを参照してください。

agent-ui は本番環境で使えますか？

agent-ui スキルは、実際の React/Next.js 向け Agent コンポーネントと、本番利用を意識したプロキシルートパターンを提供します。ただし、本番対応かどうかは次のような点での運用設計に依存します。

  • API キーや環境変数 の管理方法
  • /api/inference/proxy まわりに付与する 認証・認可・レート制限
  • 推論バックエンドへのトラフィックの監視、ログ取得、セキュリティ対策

スキルは堅実な出発点を提供しますが、実運用に入る前に、自社のセキュリティポリシーや監視基盤、エラーハンドリングポリシーをしっかり重ねてください。

agent-ui の公式ドキュメントはどこで見られますか？

次のコマンドでスキルをインストールした後:

npx skills add https://github.com/inferen-sh/skills --skill agent-ui

以下を開いてください。

  • ui/agent-ui/SKILL.md

このファイルは inferen-sh/skills リポジトリで管理されており、agent-ui コンポーネントの上流クイックスタート（インストールコマンド、プロキシルートのスニペット、環境変数の設定、コンポーネントの使用例など）がまとまっています。

評価とレビュー

まだ評価がありません
レビューを投稿
このスキルの評価やコメントを投稿するにはサインインしてください。
G
0/10000
新着レビュー
保存中...