Agent Component
ReactでAIエージェントインターフェースを構築
AIチャットインターフェースの構築には、複雑な状態管理、ストリーミング、ツール処理が必要です。このスキルでは、すべての機能が組み込まれたすぐに使えるエージェントコンポーネントを提供します。
下载技能 ZIP
在 Claude 中上传
前往 设置 → 功能 → 技能 → 上传技能
开启并开始使用
测试它
正在使用“Agent Component”。 基本的な設定でエージェントコンポーネントをインストールして設定
预期结果:
メッセージ入力、会話履歴、Claudeからのストリーミングレスポンスを備えた完全に機能するチャットインターフェースが表示されます。コンポーネントは接続状態、エラー、再接続を自動的に処理します。
正在使用“Agent Component”。 メール送信前に承認を必要とするツールを追加
预期结果:
エージェントがメール送信を試みるとき、受信者、件名、メッセージコンテンツを表示する承認ウィジェットが表示されます。ユーザーは実行前にアクションを承認または拒否できます。
安全审计
安全This is a documentation-only skill containing only SKILL.md with installation instructions and usage examples. No executable code, scripts, or network operations were detected. The skill provides guidance for integrating a React agent component from ui.inference.sh.
质量评分
你能构建什么
SaaSコパイロット統合
最小限の設定でSaaSアプリケーションにAIコパイロットを追加。コンポーネントはストリーミング、ツール呼び出し、ユーザー承認を自動的に処理します。
内部ワークフロー自動化
人間の監視下でAIエージェントがアクションを実行できる内部ツールを作成。承認フローは機密操作が実行前にレビューされることを保証します。
カスタマーサポートチャットボット
データの取得、フォーム入力、必要に応じて人間へのエスカレーションが可能なサポートチャットボットを展開。ウィジェットシステムは 풍부なインタラクティブなレスポンスを提供します。
试试这些提示
Claude Haikuを使用してユーザー質問に応答するシンプルなエージェントコンポーネントを作成。ストリーミング有効なデフォルト設定を使用。
コードレビュー用のカスタムシステムプロンプトでエージェントコンポーネントを設定。エージェントはプルリクエストの差分を分析し、改善を提案する必要があります。
フォームインタラクション用のクライアントサイドツールを持つエージェントをセットアップ。エージェントはscan_uiを使用してフォームフィールドを読み取り、fill_fieldに基づいてユーザーリクエストに基づいてデータを入力する必要があります。
データベース書き込みや外部API呼び出しなどの機密操作を実行する前に人間の承認を必要とするエージェントを設定。確認前にコンテキストを表示する承認ハンドラーをセットアップ。
最佳实践
- APIキーがクライアントサイドに露出するのを防ぐために常にバックエンドプロキシルートを使用
- データを変更したり外部システムをトリガーするアクションには承認フローを実装
- ブラウザセーフな操作（フォーム値の読み取りやスクロールなど）にのみクライアントサイドツールを使用
避免
- INFERENCE_API_KEYをクライアントサイドコードに露出させたり、バージョン管理にコミットしないでください
- 認証情報が露出するため、プロキシルートなしでエージェントコンポーネントを使用しないでください
- 適切なユーザー確認UIなしに機密操作の承認権限を付与しないでください