emblem-ai-react

EmblemAI React

當使用者想要將 EmblemAI 整合到 React 應用程式，而不只是使用 CLI 或低階 SDK 時，請使用此技能。

一句話總結： 這是為 React 應用程式加入使用者管理與錢包帳號最簡單的方式。

---

安全性與信任模型

此技能會產生與 EmblemAI 驗證及錢包基礎架構整合的 React 程式碼。本質上涉及：

• 第三方資料 (W011)：Migrate.fun React hooks (useProject、useProjects) 從遠端 API 擷取專案與代幣中繼資料。這些資料會在使用者介面元件中顯示，僅供資訊展示，不會觸發自動化操作。
• 執行時期後端 (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 hooks？"

---

這為 React 應用程式帶來了什麼

• 單一整合即可處理網站驗證與支援錢包的使用者
• 支援加密貨幣錢包、電子郵件/密碼及社群登入等多種登入選項
• 提供 React hooks 與 UI 元件，暴露 session、vault 及錢包狀態
• 從登入到聊天、簽署及其他 Emblem 驅動的工作流程，路徑清晰
• 為 React 應用程式加入 Migrate.fun 遷移感知 UI 的最簡單方式

包含的 React 參考資料

React 驗證

請參閱 references/auth-react.md 了解提供者設定、hooks 及驗證 UI 元件。

React 聊天

請參閱 references/emblem-ai-react.md 了解使用 @emblemvault/hustle-react 的 EmblemAI 聊天設定。

React 元件

請參閱 references/react-components.md 了解目前的驗證與聊天元件表面。

Migrate.fun React

請參閱 references/migratefun-react.md 了解 hooks、提供者設定及專案選擇元件。

---

指引

• 使用此技能進行 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 工作流程的廣泛提示範例