agent-ui
React と Next.js 向けのエージェント UI を構築
React チームには、カスタムインフラなしでストリーミング、ツール、承認、リッチな応答を扱えるエージェントインターフェースが必要です。この skill は、すぐに使えるエージェントコンポーネント、プロキシルート、スコープ付きツールパターンを追加する方法を示します。
自分のエージェントでインストール
このリクエストをエージェントにコピーしてください。正規の Skill ページとマニフェストが含まれています。
Review the Skillstore skill "agent-ui" from https://skillstore.io/skills/inferen-sh-agent-ui.md and its manifest at https://skillstore.io/api/skills/inferen-sh-agent-ui/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.エージェントは引き続き計画を提示し、セキュリティポリシーで必要な確認を求める必要があります。
エージェントが読めるリソース
AI エージェント、クローラー、スクリプトがページ全体ではなく整理されたコンテキストを必要とする場合は、これらのリンクを使ってください。
テストする
「agent-ui」を使用しています。 React 管理ダッシュボード用のエージェントチャットパネルが必要です。
期待される結果:
- コンポーネントのインストール手順を含むセットアップ計画。
- サーバー側 API アクセス用のプロキシルートチェックリスト。
- ストリーミング、ファイル、画像、エージェント名を設定するための props の短い一覧。
「agent-ui」を使用しています。 ユーザーがサポートフォームを完了できるようにアシスタントに手伝わせたいです。
期待される結果:
- アクセスを 1 つのフォーム参照に制限するスコープ付きツール計画。
- フィールドが変更される前の人間による承認ポイント。
- 明示的に許可されていない限り、機密フィールドをブロックする警告。
「agent-ui」を使用しています。 エージェント copilot のローンチチェックリストが必要です。
期待される結果:
- インストール前にリモートコンポーネントファイルをレビューする。
- API キーはサーバー側にのみ保持する。
- ツールの進行状況、承認状態、アップロード、エラー処理をテストする。
セキュリティ監査
中リスクMost static findings are false positives caused by markdown code fences, inline prop names, documentation links, and placeholder environment variable examples. Two command examples and one remote registry URL are confirmed as medium or low risk because they direct users to execute external package or skill installation commands. A semantic review also found a medium-risk workflow concern around agent-driven form filling with client-side tools.
確認済みのセキュリティ上の懸念 (1)
機能レビュー項目 (3)
これらは、このスキルに期待される可能性のある実際のローカル機能であるため、レビューが必要ですが、確認済みの悪意ある動作としてはカウントされません。
リスク要因
⚙️ 外部コマンド (16)
🌐 ネットワークアクセス (9)
🔑 環境変数 (1)
このレポートを共有・引用
バージョン付き評価レポート、中立的なバッジ、埋め込みカード、引用を共有できます。Skillstore は証拠を報告しますが、この Skill が安全かどうかは判断しません。
レポートリンクをコピー
https://skillstore.io/skills/inferen-sh-agent-ui/audits/4?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportMarkdownバッジ
[](https://skillstore.io/skills/inferen-sh-agent-ui?utm_source=security_passport_badge)HTMLバッジ
<a href="https://skillstore.io/skills/inferen-sh-agent-ui?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/inferen-sh-agent-ui/security.svg" alt="Skillstore security assessment" loading="lazy"></a>埋め込みカード
<iframe src="https://skillstore.io/embed/skills/inferen-sh-agent-ui.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>学術引用 (APA · BibTeX · CFF)
APA形式の引用
inferen-sh. (2026). agent-ui security audit report (audit version 4) [Author version unspecified]. Skillstore. https://skillstore.io/skills/inferen-sh-agent-ui/audits/4BibTeX形式の引用
@techreport{inferen-sh-inferen-sh-agent-ui-2026,
author = {inferen-sh},
title = {agent-ui security audit report (audit version 4)},
institution = {Skillstore},
year = {2026},
number = {4},
url = {https://skillstore.io/skills/inferen-sh-agent-ui/audits/4},
note = {Author version unspecified}
}CITATION.cff
cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "agent-ui security audit report (audit version 4)"
version: "unspecified"
type: report
authors:
- name: "inferen-sh"
date-released: "2026-07-05"
url: "https://skillstore.io/skills/inferen-sh-agent-ui/audits/4"
identifiers:
- type: other
value: "skillstore:inferen-sh-agent-ui:audit:4"
description: "Skillstore immutable audit report identifier"
バリアントを比較
インストール可能なバリアント 3 件各作者のスキルは個別のインストール項目として維持されます。推奨バリアントは Skillstore の証拠で順位付けされます。
このバリアントが首位の理由
inference-sh-9-agent-ui
2026-09-09
Skillstore スコア
このスコアの理由 証拠の信頼度: 高作成できるもの
SaaS Copilot を追加
回答をストリーミングし、承認を求め、プロダクトダッシュボード内でツールの進行状況を表示するエージェントインターフェースを埋め込みます。
エージェントワークフローをプロトタイプ化
ガイド付きアシスタントがフォームを完了し、ウィジェットを提示し、アクション前に人間の確認を要求する方法をテストします。
エージェント UI パターンを標準化
プロキシルーティング、モデル設定、アップロード、ツール、承認状態のための共有コンポーネントパターンを使用します。
これらのプロンプトを試す
新しい Next.js アプリに agent UI コンポーネントを追加する方法を示してください。必要なパッケージと registry 手順を含めてください。
Next.js アプリ用の Inference プロキシルートを作成し、API キーをどこに置くべきか説明してください。
エージェントが 1 つのフォームを検査し、ユーザー承認付きでフィールド値を提案できる、スコープ付きのクライアント側ツール設定を設計してください。
安全でないツールアクセス、アップロード処理、プロキシ公開、承認の抜け漏れについて、計画中の agent UI ワークフローをレビューしてください。
ベストプラクティス
- インストールコマンドをマージする前に、リモート registry の出力とパッケージ変更をレビューします。
- API キーはサーバー側の環境変数に保持し、すべてのプロバイダー呼び出しをプロキシ経由でルーティングします。
- クライアント側ツールのスコープを狭くし、フォームデータを変更する前にユーザー承認を必須にします。
回避
- 生成されたファイルをレビューせずに、本番ブランチでリモート npx コマンドを実行する。
- API キーやプロバイダー認証情報をブラウザコンポーネントに渡す。
- 制御なしで、フォーム、ファイル、アップロード、ページ状態への広範なアクセスをエージェントツールに与える。
よくある質問
この skill は何を構築するのに役立ちますか？
バックエンドロジックは含まれていますか？
API キーは必要ですか？
エージェントはツールを使用できますか？
ファイルアップロードはサポートされていますか？
インストール前に何をレビューすべきですか？
開発者情報
作成者
inferen-shライセンス
MIT
Skillstore リビジョン
r1
バージョンに関する注意
作者はバージョンを宣言していません。
参照
30c73eac2afe762f6aa9c4553158769369d47351
メンテナンスの新しさ
2026/7/24
利用状況
3 ダウンロード · 157 閲覧
ファイル構成
📄 SKILL.md