MCP HubMCP Hub
← Back to Skills

emblem-ai-react

EmblemCompany
Updated 2 days ago
3 views
10
1
10
View on GitHub
Metareactai

About

This React integration skill enables developers to add EmblemAI's authentication and wallet-enabled user management to React applications. It provides ready-to-use components like EmblemAuthProvider, ConnectButton, and auth hooks for social/email/wallet login flows. Use it when you need to implement comprehensive user authentication with wallet integration in a React-based project.

Quick Install

Claude Code

Recommended
Primary
npx skills add EmblemCompany/Agent-skills -a claude-code
Plugin CommandAlternative
/plugin add https://github.com/EmblemCompany/Agent-skills
Git CloneAlternative
git clone https://github.com/EmblemCompany/Agent-skills.git ~/.claude/skills/emblem-ai-react

Copy and paste this command in Claude Code to install this skill

Documentation

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 for provider setup, hooks, and auth UI components.

React Chat

See references/emblem-ai-react.md for EmblemAI chat setup with @emblemvault/hustle-react.

React Components

See references/react-components.md for current auth and chat component surfaces.

Migrate.fun React

See 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

GitHub Repository

EmblemCompany/Agent-skills
Path: skills/emblem-ai-react
0
agent-skillsai-agentblockchaincross-chaincryptodefi

Related Skills

content-collections

Meta

This skill provides a production-tested setup for Content Collections, a TypeScript-first tool that transforms Markdown/MDX files into type-safe data collections with Zod validation. Use it when building blogs, documentation sites, or content-heavy Vite + React applications to ensure type safety and automatic content validation. It covers everything from Vite plugin configuration and MDX compilation to deployment optimization and schema validation.

View skill

polymarket

Meta

This skill enables developers to build applications with the Polymarket prediction markets platform, including API integration for trading and market data. It also provides real-time data streaming via WebSocket to monitor live trades and market activity. Use it for implementing trading strategies or creating tools that process live market updates.

View skill

creating-opencode-plugins

Meta

This skill helps developers create OpenCode plugins that hook into 25+ event types like commands, files, and LSP operations. It provides the plugin structure, event API specifications, and implementation patterns for JavaScript/TypeScript modules. Use it when you need to intercept, monitor, or extend the OpenCode AI assistant's lifecycle with custom event-driven logic.

View skill

sglang

Meta

SGLang is a high-performance LLM serving framework that specializes in fast, structured generation for JSON, regex, and agentic workflows using its RadixAttention prefix caching. It delivers significantly faster inference, especially for tasks with repeated prefixes, making it ideal for complex, structured outputs and multi-turn conversations. Choose SGLang over alternatives like vLLM when you need constrained decoding or are building applications with extensive prefix sharing.

View skill