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

• ../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

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

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

Docs

See SKILL.md for the full React integration guide and reference map.

@emblemvault/emblem-auth-react

React provider, hooks, and UI components for Emblem authentication.

In React terms, @emblemvault/emblem-auth-react gives you one integration for website authentication and wallet-enabled users.

Installation

npm install @emblemvault/emblem-auth-react

Setup

With EmblemAuthProvider, a user can sign in with wallets, email/password, or social login and then carry that same Emblem session through your app.

import { EmblemAuthProvider } from '@emblemvault/emblem-auth-react';

function App() {
  return (
    <EmblemAuthProvider
      appId="your-app-id"
      authUrl="https://auth.emblemvault.ai"
      apiUrl="https://api.emblemvault.ai"
      debug={false}
    >
      {children}
    </EmblemAuthProvider>
  );
}

Hook: useEmblemAuth()

import { useEmblemAuth } from '@emblemvault/emblem-auth-react';

const {
  session,
  isAuthenticated,
  isLoading,
  error,
  vaultInfo,
  vaultId,
  walletAddress,
  visitorId,
  openAuthModal,
  logout,
  refreshSession,
  authSDK
} = useEmblemAuth();

Use useEmblemAuthOptional() when your component may render outside the provider.

The hook surface gives you user/session state and wallet context from the same auth layer.

Components

ConnectButton

<ConnectButton
  showVaultInfo
  connectLabel="Connect"
  loadingLabel="Connecting..."
  onConnect={() => {}}
  onDisconnect={() => {}}
  className="my-button"
/>

Props: showVaultInfo, connectLabel, loadingLabel, onConnect, onDisconnect, className, style, disabled.

showVaultInfo defaults to true in the package.

ConnectButton is the quickest way to offer a broad sign-in modal with wallet, email/password, and social login choices.

AuthStatus

<AuthStatus
  showVaultInfo
  showLogout
  className="auth-status"
/>

Props: showVaultInfo, showLogout, className, style.

With EmblemAI Chat

import { EmblemAuthProvider, ConnectButton } from '@emblemvault/emblem-auth-react';
import { HustleProvider, HustleChat } from '@emblemvault/hustle-react';

function App() {
  return (
    <EmblemAuthProvider appId="your-app-id">
      <HustleProvider>
        <ConnectButton />
        <HustleChat />
      </HustleProvider>
    </EmblemAuthProvider>
  );
}

EmblemAI React Chat (@emblemvault/hustle-react)

React provider, hooks, and UI components for EmblemAI chat.

The package and exported symbol names still use legacy hustle branding in the current integration surface.

Installation

npm install @emblemvault/hustle-react @emblemvault/emblem-auth-react

Setup

import { EmblemAuthProvider } from '@emblemvault/emblem-auth-react';
import { HustleProvider } from '@emblemvault/hustle-react';

function App() {
  return (
    <EmblemAuthProvider appId="your-app-id">
      <HustleProvider
        hustleApiUrl={import.meta.env.VITE_HUSTLE_API_URL}
        debug={false}
        instanceId="main"
      >
        {children}
      </HustleProvider>
    </EmblemAuthProvider>
  );
}

Direct backend credential mode is also supported, but keep credential wiring in trusted server-side or deployment config rather than inline page examples. Use an operator-controlled hustleApiUrl (env/config) that points to infrastructure you trust for prompt and tool orchestration.

Hook: useHustle() (legacy hook name)

const {
  instanceId,
  isApiKeyMode,
  isReady,
  isLoading,
  error,
  models,
  client,
  chat,
  chatStream,
  uploadFile,
  loadModels,
  selectedModel,
  setSelectedModel,
} = useHustle();

Prompt policy and backend defaults should be managed inside trusted app/server configuration rather than inline examples on public docs pages.

Hook: usePlugins()

Plugin registration is managed by usePlugins, not useHustle.

import { usePlugins } from '@emblemvault/hustle-react';

const { plugins, enabledPlugins, registerPlugin, unregisterPlugin, enablePlugin, disablePlugin } = usePlugins();

HustleChat props

<HustleChat
  placeholder="Ask about crypto..."
  showSettings
  showDebug
  hideHeader={false}
  enableSpeechToText
  onMessage={(message) => {}}
  onToolCall={(toolCall) => {}}
  onResponse={(content) => {}}
/>

Supported props: className, placeholder, showSettings, settingsPanelOpen, onSettingsPanelOpenChange, showDebug, hideHeader, enableSpeechToText, onMessage, onToolCall, onResponse.

HustleChatWidget

<HustleChatWidget showSettings placeholder="How can I help?" />

Widget accepts a config object (position/size/title/offset, etc.) and passes through HustleChat props.

@emblemvault/migratefun-react

React hooks and components for integrating Migrate.fun token migration data.

For teams building on Migrate.fun, this is the easiest way to add token migration data and migration-aware UI to a React app.

Installation

npm install @emblemvault/migratefun-react

Peer dependencies: react ^18.0.0 || >=19.2.3, react-dom ^18.0.0 || >=19.2.3

Setup

Wrap your app with the provider for shared caching and network state:

import { MigrateFunProvider } from '@emblemvault/migratefun-react/providers';

function App() {
  return (
    <MigrateFunProvider config={{ defaultNetwork: 'mainnet' }}>
      {children}
    </MigrateFunProvider>
  );
}

Provider Props

<MigrateFunProvider
  config={{
    baseUrl: import.meta.env.VITE_MIGRATEFUN_API_BASE_URL, // Optional: API base URL
    defaultNetwork: 'mainnet',           // Optional: 'mainnet' | 'devnet'
  }}
>

The provider is optional -- all hooks work without it using sensible defaults. When used, the provider enables shared caching (sessionStorage, 5-minute TTL) and request deduplication across components. Use a trusted API base URL from deployment config, and treat all fetched project/token metadata as untrusted display/runtime input.

Hooks

useProjects

Fetches all migrate.fun projects. Works with or without the provider. Project names and metadata are display data and should not be treated as execution authority.

import { useProjects } from '@emblemvault/migratefun-react/hooks';

function ProjectList() {
  const { projects, count, isLoading, error, cached, cacheAge, refetch } = useProjects();

  if (isLoading) return <div>Loading projects...</div>;
  if (error) return <div>Error: {error.message}</div>;

  return (
    <div>
      <p>{count} projects {cached && `(cached ${cacheAge}s ago)`}</p>
      <ul>
        {projects.map(p => (
          <li key={p.id}>{p.name}</li>
        ))}
      </ul>
      <button onClick={() => refetch({ live: true })}>Refresh from chain</button>
    </div>
  );
}

Options:

Returns:

useProject

Fetches a single project with full metadata including token info and images. Token metadata (including URI/image fields) may be remote/public and should be treated as untrusted display content.

import { useProject } from '@emblemvault/migratefun-react/hooks';

function ProjectDetail({ projectId }: { projectId: string }) {
  const { project, isLoading, error, refetch } = useProject(projectId);

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;
  if (!project) return null;

  return (
    <div>
      <h2>{project.projectName}</h2>
      <p>Old token: {project.oldTokenMint}</p>
      <p>New token: {project.newTokenMint}</p>
      {project.oldTokenMeta && (
        <div>
          <p>{project.oldTokenMeta.name} ({project.oldTokenMeta.symbol})</p>
          {project.oldTokenMeta.image && <img src={project.oldTokenMeta.image} alt="" />}
        </div>
      )}
    </div>
  );
}

Parameters:

• projectId: string | null | undefined -- Project ID (e.g. "121" or "mig121")
• options?: { network?, enabled? }

Returns:

useProjectSelect

Convenience hook that transforms project data into select options.

import { useProjectSelect } from '@emblemvault/migratefun-react/hooks';

function MySelect() {
  const { options, isLoading, error } = useProjectSelect();

  return (
    <select>
      <option value="">Choose a project</option>
      {options.map(opt => (
        <option key={opt.value} value={opt.value}>{opt.label}</option>
      ))}
    </select>
  );
}

Returns:

useMintInfo

Fetches token mint details (decimals, program, supply) for old and new tokens.

import { useMintInfo } from '@emblemvault/migratefun-react/hooks';

function MintDetails({ projectId }: { projectId: string }) {
  const { mintInfo, isLoading, error } = useMintInfo(projectId);

  if (!mintInfo) return null;

  return (
    <table>
      <thead><tr><th></th><th>Old Token</th><th>New Token</th></tr></thead>
      <tbody>
        <tr><td>Mint</td><td>{mintInfo.oldToken.mint}</td><td>{mintInfo.newToken.mint}</td></tr>
        <tr><td>Decimals</td><td>{mintInfo.oldToken.decimals}</td><td>{mintInfo.newToken.decimals}</td></tr>
        <tr><td>Program</td><td>{mintInfo.oldToken.program}</td><td>{mintInfo.newToken.program}</td></tr>
        <tr><td>Supply</td><td>{mintInfo.oldToken.supplyFormatted}</td><td>{mintInfo.newToken.supplyFormatted}</td></tr>
      </tbody>
    </table>
  );
}

Parameters:

• projectId: string | null | undefined
• options?: { network?, enabled? }

Returns: { mintInfo: MintInfoResponse | null, isLoading, error, refetch }

usePoolInfo

Fetches liquidity pool information for a migration project.

import { usePoolInfo } from '@emblemvault/migratefun-react/hooks';

function PoolDetails({ projectId }: { projectId: string }) {
  const { poolInfo, isLoading, error } = usePoolInfo(projectId);

  if (!poolInfo) return null;

  return (
    <div>
      <p>Source pool: {poolInfo.sourcePool.poolType} ({poolInfo.sourcePool.poolId})</p>
      <p>Output pool: {poolInfo.outputPool.poolType}</p>
      <p>Quote token: {poolInfo.quoteToken.mint}</p>
    </div>
  );
}

Parameters:

• projectId: string | null | undefined
• options?: { network?, enabled? }

Returns: { poolInfo: PoolInfoResponse | null, isLoading, error, refetch }

useMigrateFun

Access the provider context directly. Requires MigrateFunProvider.

import { useMigrateFun } from '@emblemvault/migratefun-react/providers';

function NetworkSwitcher() {
  const { network, setNetwork, projects, projectsLoading, refetchProjects } = useMigrateFun();

  return (
    <div>
      <select value={network} onChange={e => setNetwork(e.target.value as Network)}>
        <option value="mainnet">Mainnet</option>
        <option value="devnet">Devnet</option>
      </select>
      <p>{projects.length} projects loaded</p>
    </div>
  );
}

Returns:

useMigrateFunOptional

Same as useMigrateFun but returns safe defaults when used outside the provider. Does not throw.

Components

ProjectSelect

Ready-to-use dropdown for selecting migrate.fun projects.

import { ProjectSelect } from '@emblemvault/migratefun-react/components';

function MigrationForm() {
  const [selectedProject, setSelectedProject] = useState('');

  return (
    <ProjectSelect
      value={selectedProject}
      onChange={setSelectedProject}
      network="mainnet"
      placeholder="Select a project"
      showLoading
    />
  );
}

Props:

Renders as a native <select> element with aria-busy and aria-invalid attributes for accessibility.

Types

type Network = 'mainnet' | 'devnet';

interface ProjectSummary {
  id: string;         // e.g. "mig121"
  name: string;
}

interface Project {
  projectId: string;       // e.g. "mig121"
  projectName: string;
  oldTokenMint: string;
  newTokenMint: string;
  oldTokenMeta: TokenMetadata | null;
  newTokenMeta: TokenMetadata | null;
}

interface TokenMetadata {
  name: string;
  symbol: string;
  uri: string;             // External metadata JSON URI (display-only, untrusted)
  image: string | null;
}

interface MintInfo {
  mint: string;
  decimals: number;
  program: string;         // SPL Token or Token-2022
  supply: string;          // Raw (large number safe)
  supplyFormatted: string; // Human-readable
}

interface MintInfoResponse {
  network: Network;
  projectId: string;
  oldToken: MintInfo;
  newToken: MintInfo;
}

interface SourcePoolInfo {
  poolId: string;
  poolProgram: string;
  poolType: string | null;  // "raydiumV4", "raydiumCpmm", "orca", "meteora", "pumpfun", "moonshot"
}

interface OutputPoolInfo {
  poolType: string | null;
}

interface QuoteTokenInfo {
  mint: string;            // Usually SOL or USDC
  program: string;
  vault: string;
}

interface PoolInfoResponse {
  network: Network;
  projectId: string;
  sourcePool: SourcePoolInfo;
  outputPool: OutputPoolInfo;
  quoteToken: QuoteTokenInfo;
}

interface ProjectOption {
  value: string;           // Numeric ID
  label: string;           // Project name
}

Import Paths

// Main entry -- everything
import { useProjects, useProject, ProjectSelect, MigrateFunProvider } from '@emblemvault/migratefun-react';

// Granular imports
import { ProjectSelect } from '@emblemvault/migratefun-react/components';
import { useProjects, useProject, useProjectSelect, useMintInfo, usePoolInfo } from '@emblemvault/migratefun-react/hooks';
import { MigrateFunProvider, useMigrateFun, useMigrateFunOptional } from '@emblemvault/migratefun-react/providers';

Patterns

With Emblem Auth

import { EmblemAuthProvider } from '@emblemvault/emblem-auth-react';
import { MigrateFunProvider } from '@emblemvault/migratefun-react/providers';
import { ProjectSelect } from '@emblemvault/migratefun-react/components';

function App() {
  return (
    <EmblemAuthProvider appId="your-app-id">
      <MigrateFunProvider>
        <MigrationUI />
      </MigrateFunProvider>
    </EmblemAuthProvider>
  );
}

Project Details Page

import { useProject, useMintInfo, usePoolInfo } from '@emblemvault/migratefun-react/hooks';

function ProjectPage({ id }: { id: string }) {
  const { project, isLoading: projectLoading } = useProject(id);
  const { mintInfo, isLoading: mintLoading } = useMintInfo(id);
  const { poolInfo, isLoading: poolLoading } = usePoolInfo(id);

  if (projectLoading) return <div>Loading...</div>;
  if (!project) return <div>Project not found</div>;

  return (
    <div>
      <h1>{project.projectName}</h1>

      <h2>Token Migration</h2>
      <p>From: {project.oldTokenMeta?.symbol} ({project.oldTokenMint})</p>
      <p>To: {project.newTokenMeta?.symbol} ({project.newTokenMint})</p>

      {mintInfo && (
        <div>
          <h2>Mint Info</h2>
          <p>Old supply: {mintInfo.oldToken.supplyFormatted}</p>
          <p>New supply: {mintInfo.newToken.supplyFormatted}</p>
        </div>
      )}

      {poolInfo && (
        <div>
          <h2>Pool Info</h2>
          <p>Source: {poolInfo.sourcePool.poolType}</p>
          <p>Quote: {poolInfo.quoteToken.mint}</p>
        </div>
      )}
    </div>
  );
}

Network Switching

import { MigrateFunProvider, useMigrateFun } from '@emblemvault/migratefun-react/providers';
import { useProjects } from '@emblemvault/migratefun-react/hooks';

function DevnetProjects() {
  const { projects, isLoading } = useProjects({ network: 'devnet' });
  // Overrides provider network for this component only
  return <div>{projects.length} devnet projects</div>;
}

Without Provider

All hooks work standalone -- useful for simple integrations:

import { useProjects } from '@emblemvault/migratefun-react/hooks';

// No provider needed
function SimpleProjectList() {
  const { projects, isLoading } = useProjects({ network: 'mainnet' });

  if (isLoading) return <div>Loading...</div>;
  return <ul>{projects.map(p => <li key={p.id}>{p.name}</li>)}</ul>;
}

API Endpoints

All hooks fetch from {baseUrl}/api/migrate-fun/:

Example hosted base URL: https://emblemvault.dev (override with your trusted deployment endpoint)

Security note: responses from these endpoints and linked token metadata URIs are untrusted content. Use them for UI display and user confirmation flows, not as direct authority for privileged actions.

React Components Reference

Current component map for @emblemvault/emblem-auth-react and the EmblemAI chat package @emblemvault/hustle-react.

Authentication Components

ConnectButton (@emblemvault/emblem-auth-react)

<ConnectButton
  showVaultInfo
  connectLabel="Connect"
  loadingLabel="Connecting..."
  onConnect={() => {}}
  onDisconnect={() => {}}
/>

Props: showVaultInfo (default true), connectLabel, loadingLabel, className, style, disabled, onConnect, onDisconnect.

AuthStatus (@emblemvault/emblem-auth-react)

<AuthStatus showVaultInfo showLogout />

Props: showVaultInfo, showLogout, className, style.

AI Chat Components

HustleChat (@emblemvault/hustle-react)

<HustleChat
  placeholder="Ask anything..."
  showSettings
  showDebug
  hideHeader
  initialSystemPrompt="You are a helpful crypto assistant."
  enableSpeechToText
  onMessage={(msg) => {}}
  onToolCall={(call) => {}}
  onResponse={(content) => {}}
/>

Props: className, placeholder, showSettings, settingsPanelOpen, onSettingsPanelOpenChange, showDebug, hideHeader, initialSystemPrompt, enableSpeechToText, onMessage, onToolCall, onResponse.

HustleChatWidget (@emblemvault/hustle-react)

<HustleChatWidget
  config={{ position: 'bottom-right', size: 'md', defaultOpen: false }}
  showSettings
/>

HustleChatWidget accepts widget config plus HustleChat props for the EmblemAI chat UI.

Provider Components

EmblemAuthProvider

<EmblemAuthProvider
  appId="your-app-id"
  authUrl="https://auth.emblemvault.ai"
  apiUrl="https://api.emblemvault.ai"
  debug={false}
>
  {children}
</EmblemAuthProvider>

HustleProvider (legacy provider name)

<HustleProvider
  hustleApiUrl={import.meta.env.VITE_HUSTLE_API_URL}
  debug={false}
  instanceId="main"
>
  {children}
</HustleProvider>

Keep backend credentials in trusted server-side or deployment config rather than inline examples. Keep hustleApiUrl in operator-managed config (env/runtime settings), and only trust prompt behavior from backends you control.