---
id: daily-emblem-ai-react
name: "emblem-ai-react"
url: https://skills.yangsir.net/skill/daily-emblem-ai-react
author: emblemcompany
domain: ai-app-building-integration
tags: ["react", "web3", "authentication", "ui-design", "blockchain-integration"]
install_count: 8000
rating: 4.50 (4 reviews)
github: https://github.com/emblemcompany/agent-skills
---

# emblem-ai-react

> 将 EmblemAI 钱包用户管理集成到 React 应用，提供开箱即用的认证和 Web3 组件

**Stats**: 8,000 installs · 4.5/5 (4 reviews)

## Before / After 对比

### React 钱包集成

**Before**:

手动编写 React Context 管理钱包状态，创建连接按钮、地址显示、余额展示等组件，处理异步加载和错误状态

**After**:

使用预构建的 EmblemAI React Hooks 和组件，直接嵌入 ConnectButton 和 WalletCard，自动处理状态和 UI 更新

| Metric | Before | After | Change |
|---|---|---|---|
| 开发时间 | 16小时 | 2小时 | -88% |

## Readme

# emblem-ai-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.

## 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.

## Quick Start

### Step 1: Install

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

```

### Step 2: Use

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?"

## What this gives a React app

- 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

## Included React References

### React Auth

See [references/auth-react.md](https://github.com/emblemcompany/agent-skills/blob/HEAD/skills/emblem-ai-react/references/auth-react.md) for provider setup, hooks, and auth UI components.

### React Chat

See [references/emblem-ai-react.md](https://github.com/emblemcompany/agent-skills/blob/HEAD/skills/emblem-ai-react/references/emblem-ai-react.md) for EmblemAI chat setup with `@emblemvault/hustle-react`.

### React Components

See [references/react-components.md](https://github.com/emblemcompany/agent-skills/blob/HEAD/skills/emblem-ai-react/references/react-components.md) for current auth and chat component surfaces.

### Migrate.fun React

See [references/migratefun-react.md](https://github.com/emblemcompany/agent-skills/blob/HEAD/skills/emblem-ai-react/references/migratefun-react.md) for hooks, provider setup, and project selection components.

## 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.

## Related Skills

- [../emblem-ai/SKILL.md](https://github.com/emblemcompany/agent-skills/blob/HEAD/skills/emblem-ai-react/../emblem-ai/SKILL.md) - broader SDK, plugin, CLI, and introspection coverage

- [../emblem-ai-agent-wallet/SKILL.md](https://github.com/emblemcompany/agent-skills/blob/HEAD/skills/emblem-ai-react/../emblem-ai-agent-wallet/SKILL.md) - CLI-first wallet workflows for agents and end users

- [../emblem-ai-prompt-examples/SKILL.md](https://github.com/emblemcompany/agent-skills/blob/HEAD/skills/emblem-ai-react/../emblem-ai-prompt-examples/SKILL.md) - broader prompt examples across non-React workflows

Weekly Installs850Repository[emblemcompany/a…t-skills](https://github.com/emblemcompany/agent-skills)GitHub Stars9First SeenMar 12, 2026Security Audits[Gen Agent Trust HubPass](/emblemcompany/agent-skills/emblem-ai-react/security/agent-trust-hub)[SocketPass](/emblemcompany/agent-skills/emblem-ai-react/security/socket)[SnykWarn](/emblemcompany/agent-skills/emblem-ai-react/security/snyk)Installed onamp850cline850codex850opencode850cursor850antigravity844

---
*Source: https://skills.yangsir.net/skill/daily-emblem-ai-react*
*Markdown mirror: https://skills.yangsir.net/api/skill/daily-emblem-ai-react/markdown*