emblem-ai-react

EmblemAI React

ユーザーがCLIや低レベルSDKのみを使用するのではなく、EmblemAIをReactアプリに統合したい場合にこのスキルを使用します。

一言で言うと： Reactアプリにユーザー管理とウォレット対応アカウントを最も簡単に追加する方法です。

---

セキュリティと信頼モデル

このスキルは、EmblemAIの認証およびウォレットインフラストラクチャと統合するReactコードを生成します。これには、次の要素が本質的に関わります。

• サードパーティデータ（W011）：Migrate.funのReactフック（useProject、useProjects）は、リモートAPIからプロジェクトとトークンのメタデータを取得します。このデータは情報表示用のUIコンポーネントに表示され、自動アクションは実行しません。
• ランタイムバックエンド（W012）：HustleProviderは、プロンプトとツールのオーケストレーションのために、設定可能なバックエンドURL（hustleApiUrl / import.meta.env.VITE_HUSTLE_API_URL）に接続します。このエンドポイントはEmblemVaultが運営する自社インフラであり、任意のサードパーティサービスではありません。

生成されたReactコンポーネントは、標準的なブラウザーのセキュリティ境界を使用します。ランタイムでサーバーサイドコードの実行やファイルシステムへのアクセスは行われません。

クイックスタート

ステップ1：インストール

npx skills add EmblemCompany/Agent-skills --skill emblem-ai-react

ステップ2：使用

以下のように、分野を指定してReact統合のサポートを依頼します。

• 「最小構成のEmblemAI Reactアプリを見せてください」
• 「EmblemAuthProviderとHustleProviderの追加を手伝ってください」
• 「ウォレット認証とチャットを組み合わせたReactの例を見せてください」
• 「ユーザーがウォレット、メールアドレス、またはソーシャルログインでサインインできるReactアプリを見せてください」
• 「アプリでMigrate.funのReactフックを使用する方法を教えてください」

---

Reactアプリでできること

• Webサイト認証とウォレット対応ユーザーのための統合
• 暗号資産ウォレット、メールアドレス／パスワード、ソーシャルログインに対応したログイン方法
• セッション、ボールト、ウォレットの状態を公開するReactフックとUIコンポーネント
• ログインからチャット、署名、その他のEmblemを活用したワークフローへ進むための明確な手順
• Migrate.funの移行に対応したUIをReactアプリに最も簡単に追加する方法

収録されているReactリファレンス

React認証

プロバイダーのセットアップ、フック、認証UIコンポーネントについては、references/auth-react.mdを参照してください。

Reactチャット

@emblemvault/hustle-reactを使用したEmblemAIチャットのセットアップについては、references/emblem-ai-react.mdを参照してください。

Reactコンポーネント

現在の認証およびチャットコンポーネントの種類については、references/react-components.mdを参照してください。

Migrate.fun React

フック、プロバイダーのセットアップ、プロジェクト選択コンポーネントについては、references/migratefun-react.mdを参照してください。

---

ガイダンス

• Reactアプリの構成、プロバイダーの接続、UI統合パターンにはこのスキルを使用してください。
• 依頼が明らかにReact固有の場合は、より広範なemblem-aiスキルよりもこのスキルを優先してください。
• 製品名はEmblemAIですが、レガシーパッケージ名には引き続きhustleのブランド名が使われている場合があります。
• ウォレット、取引、NFT、市場のワークフローに関するエンドユーザー向けのプロンプト表現には、代わりにemblem-ai-prompt-examplesスキルを使用してください。

---

関連スキル

• ../emblem-ai/SKILL.md - SDK、プラグイン、CLI、イントロスペクションを幅広くカバー
• ../emblem-ai-agent-wallet/SKILL.md - エージェントとエンドユーザー向けのCLI中心のウォレットワークフロー
• ../emblem-ai-prompt-examples/SKILL.md - React以外のワークフローを含む幅広いプロンプト例