emblem-ai-react

EmblemAI React

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

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

---

安全与信任模型

此技能生成的 React 代码与 EmblemAI 的认证和钱包基础设施集成。它固有地涉及：

• 第三方数据 (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 应用带来的好处

• 网站认证和钱包支持用户的一体化集成
• 支持加密钱包、邮箱/密码和社交登录等多种登录方式
• 提供暴露会话、保险库和钱包状态的 React 钩子和 UI 组件
• 从登录到聊天、签名及其他 Emblem 驱动的工作流的清晰路径
• 在 React 应用中添加 Migrate.fun 迁移感知 UI 的最简单方法

包含的 React 参考

React 认证

参见 references/auth-react.md 了解提供者设置、钩子和认证 UI 组件。

React 聊天

参见 references/emblem-ai-react.md 了解使用 @emblemvault/hustle-react 的 EmblemAI 聊天设置。

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 工作流的更广泛提示示例