emblem-ai-react

EmblemAI React

当用户希望将 EmblemAI 集成到 React 应用中，而不只是使用 CLI 或底层 SDK 时，请使用此技能。

**一句话概括：**这是在 React 应用中添加用户管理和钱包支持账户的最简单方式。

---

安全与信任模型

此技能会生成与 EmblemAI 身份验证和钱包基础设施集成的 React 代码。它本身涉及：

• 第三方数据（W011）：Migrate.fun React hooks（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 hooks？”

---

为 React 应用提供的功能

• 一站式集成网站身份验证和钱包支持用户
• 支持加密钱包、电子邮件/密码和社交登录等登录方式
• 提供 React hooks 和 UI 组件，用于呈现会话、金库和钱包状态
• 从登录到聊天、签名及其他 Emblem 驱动的工作流，提供流畅的使用路径
• 在 React 应用中添加支持 Migrate.fun 迁移功能的 UI 的最简单方式

附带的 React 参考资料

React 身份验证

请参阅 references/auth-react.md，了解 Provider 设置、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、Provider 设置和项目选择组件。

---

指南

• 在组合 React 应用、连接 Provider 和集成 UI 模式时，请使用此技能。
• 如果请求明显与 React 相关，请优先使用此技能，而不是范围更广的 emblem-ai 技能。
• 旧版软件包名称可能仍使用 hustle 品牌，尽管产品名称是 EmblemAI。
• 对于面向终端用户的钱包、交易、NFT 或市场工作流提示词，请改用 emblem-ai-prompt-examples 技能。

---

相关技能

• ../emblem-ai/SKILL.md - 更广泛地涵盖 SDK、插件、CLI 和内省功能
• ../emblem-ai-agent-wallet/SKILL.md - 面向 Agent 和终端用户、以 CLI 为先的钱包工作流
• ../emblem-ai-prompt-examples/SKILL.md - 涵盖非 React 工作流的更多提示词示例