Back to Details

emblem-ai-react

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

EmblemAI React

EmblemAI React

Use this skill when the user wants to integrate EmblemAI into a React app rather than only use the CLI or low-level SDKs.
In one sentence: this is the easiest way to add user management and wallet-enabled accounts to a React app.
当用户希望将EmblemAI集成到React应用中，而非仅使用CLI或底层SDK时，可使用此技能。
**一句话总结：**这是为React应用添加用户管理和支持钱包的账户体系的最简便方式。

Security & Trust Model

安全与信任模型

This skill generates React code that integrates with EmblemAI's authentication and wallet infrastructure. It inherently involves:
  • Third-party data (W011): Migrate.fun React hooks (
    useProject
    , 
    useProjects
    ) fetch project and token metadata from remote APIs. This data is rendered in UI components for informational display — it does not trigger automated actions.
  • Runtime backend (W012): 
    HustleProvider
    connects to a configurable backend URL (
    hustleApiUrl
    / 
    import.meta.env.VITE_HUSTLE_API_URL
    ) for prompt and tool orchestration. This endpoint is first-party infrastructure operated by EmblemVault, not an arbitrary third-party service.
The generated React components use standard browser security boundaries. No server-side code execution or file system access is involved at runtime.
此技能生成的React代码可与EmblemAI的认证和钱包基础设施集成，其固有特性包括：
  • 第三方数据 (W011)：Migrate.fun React钩子（
    useProject
    、
    useProjects
    ）从远程API获取项目和token元数据。这些数据会在UI组件中渲染用于信息展示，不会触发自动化操作。
  • 运行时后端 (W012)：
    HustleProvider
    连接到可配置的后端URL（
    hustleApiUrl
    / 
    import.meta.env.VITE_HUSTLE_API_URL
    ）用于提示词和工具编排。该端点是由EmblemVault运营的第一方基础设施，而非任意第三方服务。
生成的React组件使用标准浏览器安全边界，运行时不会涉及服务端代码执行或文件系统访问。

Quick Start

快速开始

Step 1: Install

步骤1：安装

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

Step 2: Use

步骤2：使用

Ask for React integration help by area, for example:
  • "Show a minimal EmblemAI React app"
  • "Help me add EmblemAuthProvider and HustleProvider"
  • "Show React examples for wallet auth plus chat"
  • "Show a React app where users can sign in with wallets, email, or social login"
  • "How do I use Migrate.fun React hooks in my app?"
按功能模块咨询React集成相关问题，例如：
  • "Show a minimal EmblemAI React app"
  • "Help me add EmblemAuthProvider and HustleProvider"
  • "Show React examples for wallet auth plus chat"
  • "Show a React app where users can sign in with wallets, email, or social login"
  • "How do I use Migrate.fun React hooks in my app?"

What this gives a React app

为React应用提供的能力

  • One integration for website authentication and wallet-enabled users
  • Login options across crypto wallets, email/password, and social login
  • React hooks and UI components that expose session, vault, and wallet state
  • A clean path from login to chat, signing, and other Emblem-powered workflows
  • The easiest way to add Migrate.fun migration-aware UI to a React app
  • 一次集成即可实现网站认证和支持钱包的用户体系
  • 支持加密钱包、邮箱/密码、社交账号多种登录选项
  • 提供可获取会话、金库、钱包状态的React钩子和UI组件
  • 提供从登录到聊天、签名及其他Emblem驱动工作流的清晰路径
  • 是为React应用添加支持Migrate.fun迁移感知UI的最简便方式

Included React References

包含的React参考文档

React Auth

React认证

See references/auth-react.md for provider setup, hooks, and auth UI components.
查看 references/auth-react.md 了解Provider配置、钩子和认证UI组件相关内容。

React Chat

React聊天

See references/emblem-ai-react.md for EmblemAI chat setup with 
@emblemvault/hustle-react
.
查看 references/emblem-ai-react.md 了解基于
@emblemvault/hustle-react
的EmblemAI聊天配置方法。

React Components

React组件

See references/react-components.md for current auth and chat component surfaces.
查看 references/react-components.md 了解当前可用的认证和聊天组件接口。

Migrate.fun React

Migrate.fun React

See references/migratefun-react.md for hooks, provider setup, and project selection components.
查看 references/migratefun-react.md 了解钩子、Provider配置和项目选择组件相关内容。

Guidance

使用指南

  • Use this skill for React app composition, provider wiring, and UI integration patterns.
  • Prefer this skill over the broader 
    emblem-ai
    skill when the request is clearly React-specific.
  • Legacy package names may still use 
    hustle
    branding even though the product name is EmblemAI.
  • For end-user prompt phrasing across wallet, trading, NFT, or market workflows, use the 
    emblem-ai-prompt-examples
    skill instead.
  • 此技能适用于React应用组合、Provider配置和UI集成模式相关需求。
  • 当需求明确是React专属场景时，优先使用此技能而非通用的
    emblem-ai
    技能。
  • 尽管产品名称已改为EmblemAI，旧包名可能仍使用
    hustle
    品牌标识。
  • 若需要面向钱包、交易、NFT或市场工作流的端用户提示词表述，请使用
    emblem-ai-prompt-examples
    技能。

Related Skills

相关技能

  • ../emblem-ai/SKILL.md - broader SDK, plugin, CLI, and introspection coverage
  • ../emblem-ai-agent-wallet/SKILL.md - CLI-first wallet workflows for agents and end users
  • ../emblem-ai-prompt-examples/SKILL.md - broader prompt examples across non-React workflows
  • ../emblem-ai/SKILL.md - 覆盖通用SDK、插件、CLI和内省相关能力
  • ../emblem-ai-agent-wallet/SKILL.md - 面向Agent和端用户的CLI优先钱包工作流
  • ../emblem-ai-prompt-examples/SKILL.md - 覆盖非React工作流的通用提示词示例