@earnlayer/chat-ads

React SDK for displaying ads using the EarnLayer MCP server.

Installation

npm install @earnlayer/chat-ads

Quick Start

import { MCPClient, AdDisplay } from '@earnlayer/chat-ads';

const mcpClient = new MCPClient({
  mcpUrl: 'https://earnlayer-mcp-server-production.up.railway.app/mcp',
  apiKey: 'your-api-key'
});

function App() {
  return <AdDisplay mcpResponse={/* MCP response */} />;
}

Features

• MCP-based ad fetching
• Display ad rendering (popup, banner, video, thinking)
• Automatic impression and click tracking
• TypeScript support
• React hooks and components

Components

AdDisplay

Main component for displaying ads:

import { AdDisplay } from '@earnlayer/chat-ads';

<AdDisplay 
  mcpResponse={mcpResponse}
  displayAd={displayAd}
  adType="popup"
  placement="sidebar"
  onAdClick={(ad) => console.log('Ad clicked:', ad)}
  onAdError={(error) => console.error('Ad error:', error)}
/>

MCPAdDisplay

Component for displaying MCP hyperlink ads:

import { MCPAdDisplay } from '@earnlayer/chat-ads';

<MCPAdDisplay mcpResponse={mcpResponse} />

Hooks

useAdDisplay

Hook for managing display ads:

import { useAdDisplay } from '@earnlayer/chat-ads';

const { ad, loading, error } = useAdDisplay(mcpResponse, 'popup', {
  trackImpressions: true,
  sessionId: 'user-session-id'
});

useMCPAds

Hook for managing MCP ads:

import { useMCPAds } from '@earnlayer/chat-ads';

const mcpAds = useMCPAds(mcpResponse);

Services

MCPClient

Service for communicating with the MCP server:

import { MCPClient } from '@earnlayer/chat-ads';

const mcpClient = new MCPClient({
  mcpUrl: 'https://earnlayer-mcp-server-production.up.railway.app/mcp',
  apiKey: 'your-api-key'
});

const response = await mcpClient.searchContentAds(
  ['user query'],
  'creator-id',
  'conversation-id'
);

EarnLayerAdService

Service for managing both MCP and display ads:

import { EarnLayerAdService } from '@earnlayer/chat-ads';

const adService = new EarnLayerAdService({
  mcpClient,
  displayApiUrl: 'https://your-api.com'
});

const { mcpAds, displayAds } = await adService.fetchAds(
  'user message',
  'creator-id',
  'conversation-id',
  {
    mcpAds: true,
    displayAds: ['popup', 'banner']
  }
);

Types

The SDK includes TypeScript definitions for all components and services:

import { 
  MCPResponse,
  DisplayAd,
  EarnLayerAdType,
  MCPAd
} from '@earnlayer/chat-ads';

Contributing

Please read our Contributing Guide for details on our code of conduct and the process for submitting pull requests.

License

This project is licensed under the MIT License - see the LICENSE file for details.