Skip to main content

Provider

The AgentFishProvider wraps your app with authentication and wallet context.

Basic Setup​

import { AgentFishProvider } from '@agentfish/react';
import '@agentfish/react/styles.css';

function App() {
  return (
    <AgentFishProvider
      config={{
        app: {
          appId: 'your-agentfish-app-id',
        },
      }}
    >
      <YourApp />
    </AgentFishProvider>
  );
}

Configuration Options​

<AgentFishProvider
  config={{
    app: {
      appId: string;           // Your AgentFish App ID (required)
      rpId?: string;           // Relying Party ID for passkeys (optional)
    },
    
    // x402 Configuration
    facilitatorUrl?: string;   // Custom x402 facilitator (default: AgentFish)
    x402Version?: 1 | 2;       // x402 protocol version (default: 1)
    
    // Network
    rpcUrl?: string;           // Custom Solana RPC URL
    
    // UI Customization
    theme?: ThemeConfig;       // See Theming section
  }}
>
  {children}
</AgentFishProvider>

App Configuration​

OptionTypeRequiredDescription
appIdstringYesYour AgentFish App ID
rpIdstringNoRelying Party ID for passkeys

x402 Configuration​

By default, AgentFish handles x402 payment settlement. You can optionally use an external facilitator:

<AgentFishProvider
  config={{
    app: { appId: '...' },
    
    // Use external facilitator (optional)
    facilitatorUrl: 'https://x402.example.com',
    x402Version: 1,
  }}
>

When to use an external facilitator​

  • Building a payment network with multiple providers
  • Custom payment routing logic
  • Third-party settlement service

Network Configuration​

<AgentFishProvider
  config={{
    app: { appId: '...' },
    rpcUrl: 'https://your-rpc-endpoint.com',
  }}
>

Full Example​

import { AgentFishProvider } from '@agentfish/react';
import '@agentfish/react/styles.css';

function App() {
  return (
    <AgentFishProvider
      config={{
        app: {
          appId: process.env.NEXT_PUBLIC_AGENTFISH_APP_ID!,
        },
        theme: {
          mode: 'dark',
          colors: {
            primary: '#0EA5E9',
            primaryHover: '#0284C7',
          },
          radius: '12px',
        },
      }}
    >
      <YourApp />
    </AgentFishProvider>
  );
}