Emblem Ai React
Wire EmblemAI website authentication, wallet-enabled users, and chat UI into a React app using the official composition patterns and hooks.
Overview
emblem-ai-react is an agent skill for the Build phase that integrates EmblemAI one-shot user management, multi-modal login, and chat components into React apps.
Install
npx skills add https://github.com/emblemcompany/agent-skills --skill emblem-ai-reactWhat is this skill?
- One-shot user management with EmblemAuthProvider and ConnectButton for React apps
- Social, email/password, and wallet sign-in flows in a single integration path
- Chat components plus React auth hooks aligned to EmblemAI docs
- Migrate.fun React hooks and composition patterns mapped from emblemvault.ai references
- Standalone from emblem-ai-prompt-examples when you need code, not prompt phrasing
Adoption & trust: 8.7k installs on skills.sh; 10 GitHub stars; 2/3 security scanners passed (skills.sh audits).
What problem does it solve?
You are building a React site and need auth plus wallet-enabled users without stitching together EmblemAI SDK snippets by hand.
Who is it for?
Solo builders adding EmblemAI as the auth and wallet layer to an existing or new React SaaS frontend.
Skip if: Non-React stacks, operators who only want EmblemAI prompt wording (use emblem-ai-prompt-examples), or teams skipping any user-facing auth UI.
When should I use this skill?
User wants to add website authentication plus wallet-enabled users to a React app with EmblemAuthProvider, ConnectButton, social/email/wallet login, chat components, React auth hooks, composition patterns, or Migrate.fun
What do I get? / Deliverables
Your agent delivers a React integration plan and code guidance centered on EmblemAuthProvider, login UI, hooks, and doc-aligned patterns ready to paste into the app.
- React auth provider and login UI integration steps
- Hook and chat component wiring guidance
- Doc-aligned reference map for EmblemAI React APIs
Recommended Skills
Journey fit
Canonical shelf is Build because the skill is a React integration guide for shipping auth and user-management UI in the product codebase. Frontend is the primary facet: EmblemAuthProvider, ConnectButton, chat components, and React hooks are all client-side integration work.
How it compares
React integration skill with providers and hooks—not the emblem-ai-prompt-examples prompt catalog for chat-only workflows.
Common Questions / FAQ
Who is emblem-ai-react for?
Indie and solo developers shipping React web apps who want EmblemAI to handle authentication, wallets, and optional chat components in one guided integration.
When should I use emblem-ai-react?
Use it during Build when you are implementing frontend auth—e.g., adding ConnectButton and social login before launch, or wiring chat components alongside Migrate.fun hooks in an MVP.
Is emblem-ai-react safe to install?
Review the Security Audits panel on this Prism page and your agent’s Bash/Read/Write permissions before letting it modify your repo or run install commands.
SKILL.md
READMESKILL.md - Emblem Ai React
# EmblemAI React Standalone skill for building React apps with EmblemAI's one-shot user management, chat components, React composition patterns, and Migrate.fun React hooks. For prompt catalogs, use the dedicated `emblem-ai-prompt-examples` skill. This is the easiest way to add website authentication and wallet-enabled users to a React app, with sign-in options across wallets, email/password, and social login. ## Install ```bash npx skills add EmblemCompany/Agent-skills --skill emblem-ai-react ``` ## Docs See [SKILL.md](SKILL.md) for the full React integration guide and reference map. --- name: emblem-ai-react description: React integration skill for EmblemAI's one-shot user management. Use when the user wants to add website authentication plus wallet-enabled users to a React app with EmblemAuthProvider, ConnectButton, social/email/wallet login, chat components, React auth hooks, React composition patterns, or Migrate.fun React hooks. license: MIT allowed-tools: Bash Read Write compatibility: Works on Claude Code, Cursor, Codex, OpenClaw, and other agents following the Agent Skills specification. metadata: author: EmblemAI version: "1.0.1" homepage: https://emblemvault.ai docs: https://emblemvault.ai/docs docs-interactive: https://emblemvault.dev --- # 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 ```bash 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](references/auth-react.md) for provider setup, hooks, and auth UI components. ### React Chat See [references/emblem-ai-react.md](references/emblem-ai-react.md) for EmblemAI chat setup with `@emblemvault/hustle-react`. ### React Components See [references/react-components.md](references/react-components.md) for current auth and chat component surfaces. ### Migrate.fun React See [references/migratefun-react.md](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` skil