EarnLayerProvider

The EarnLayerProvider component wraps your application to provide EarnLayer SDK functionality via React Context.

Usage

Wrap your app or chat page with the provider:

import { EarnLayerProvider } from '@earnlayer/sdk/react';
 
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <EarnLayerProvider proxyBaseUrl="/api/earnlayer">
          {children}
        </EarnLayerProvider>
      </body>
    </html>
  );
}

Props

`proxyBaseUrl` (optional)

Type: string
Default: "/api/earnlayer"

The base URL for your EarnLayer proxy endpoint. All SDK API calls will be routed through this endpoint.

<EarnLayerProvider proxyBaseUrl="/api/earnlayer">
  {children}
</EarnLayerProvider>

`debug` (optional)

Type: boolean
Default: false

Enable debug logging for the provider and all hooks.

<EarnLayerProvider debug={true}>
  {children}
</EarnLayerProvider>

What It Provides

The provider gives all child components access to:

useEarnLayerClient() - Access to the EarnLayer client instance
useDisplayAd() - Fetch and display ads
Conversation management
Automatic authentication via proxy

Demo Mode Support

The provider supports demo mode for testing. Demo mode is configured when initializing conversations, not on the provider itself:

<EarnLayerProvider proxyBaseUrl="/api/earnlayer">
  <YourApp />
</EarnLayerProvider>
 
// Inside your app component:
function YourApp() {
  const { initializeConversation } = useEarnLayerClient();
 
  useEffect(() => {
    // Enable demo mode for testing
    initializeConversation({ demoMode: true });
  }, []);
}

→ Learn more about Demo Mode

Security

The provider uses your backend proxy endpoint to keep API keys secure:

API keys never exposed to browser
All requests go through your Next.js backend
JWT authentication handled automatically
No CORS configuration needed

Example: Full Setup

// app/layout.tsx
import { EarnLayerProvider } from '@earnlayer/sdk/react';
import './globals.css';
 
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <EarnLayerProvider proxyBaseUrl="/api/earnlayer">
          {children}
        </EarnLayerProvider>
      </body>
    </html>
  );
}
 
// app/page.tsx
import { useEarnLayerClient } from '@earnlayer/sdk/react';
 
export default function ChatPage() {
  const { conversationId, initializeConversation } = useEarnLayerClient();
  
  useEffect(() => {
    initializeConversation();
  }, []);
 
  return <div>Your chat app</div>;
}

Troubleshooting