Skip to main content

React SDK

The @agentfish/react package provides React components and hooks for embedded wallets with x402 payments.

Installation​

npm install @agentfish/react

Import the styles in your app:

import '@agentfish/react/styles.css';

Features​

  • Embedded wallets - Non-custodial, secure key management
  • Multiple auth methods - Email OTP, Passkey, External Wallets (Phantom, MetaMask)
  • Automatic x402 payments - Seamless payment handling for AI APIs
  • Customizable UI - Full theming support with CSS variables

Quick Start​

import { AgentFishProvider, SignIn, WalletButton, useAuth } from '@agentfish/react';
import '@agentfish/react/styles.css';

function App() {
  return (
    <AgentFishProvider
      config={{
        app: {
          appId: 'your-agentfish-app-id',
        },
        theme: {
          mode: 'dark',
          colors: {
            primary: '#0EA5E9',
          },
        },
      }}
    >
      <YourApp />
    </AgentFishProvider>
  );
}

function YourApp() {
  const { isAuthenticated } = useAuth();

  return (
    <div>
      {isAuthenticated ? (
        <WalletButton />
      ) : (
        <SignIn providers={['email', 'passkey', 'wallet']} />
      )}
    </div>
  );
}

Sections​

  • Provider - AgentFishProvider configuration
  • Components - SignIn, WalletButton, AddFundsModal
  • Hooks - useAuth, useWallet, useAgentFish
  • Theming - Customize colors and styles