Skip to main content

​
Installation

Install the ActionX Frontend SDK via npm: 
npm install @ai-ad-network/frontend-sdk

​
React Integration

​
Step 1: Configure AdProvider

Wrap your application with the AdProvider component: 
import { AdProvider } from '@ai-ad-network/frontend-sdk';

function App() {
  return (
    <AdProvider
      config={{
        apiBaseUrl: '/api/v1',
        apiKey: 'ak_your_api_key', // Optional with backend proxy
        debug: process.env.NODE_ENV === 'development',
      }}
    >
      <ChatApp />
    </AdProvider>
  );
}

​
Step 2: Use Hook to Fetch Ads

import { useAiAds, ActionCardAd, SuffixAd } from '@ai-ad-network/frontend-sdk';

function ChatApp() {
  const [query, setQuery] = useState('');
  const [response, setResponse] = useState('');
  const [isFinished, setIsFinished] = useState(false);

  const { ads, requestId, isLoading, error } = useAiAds(
    query,
    response,
    isFinished,
    {
      formats: ['action_card', 'suffix'],
      placement: 'post_response',
    }
  );

  return (
    <div>
      {ads.map((ad) => {
        switch (ad.type) {
          case 'action_card':
            return (
              <ActionCardAd
                key={ad.id}
                ad={ad}
                slotId="main-chat"
                variant="horizontal"
              />
            );
          case 'suffix':
            return (
              <SuffixAd
                key={ad.id}
                ad={ad}
                slotId="suffix-slot"
                variant="block"
              />
            );
          default:
            return null;
        }
      })}
    </div>
  );
}

​
Vue / Other Frameworks

Use the Universal SDK for non-React frameworks: 
import { AdManager, DOMRenderer } from '@ai-ad-network/frontend-sdk/universal';

// Initialize
const manager = new AdManager({
  apiBaseUrl: '/api/v1',
  apiKey: 'ak_your_api_key',
});

// Request ads
const result = await manager.requestAds({
  conversationContext: {
    query: 'User query',
    response: 'AI response',
  },
});

// Render ads
const ad = result.slots[0].ads[0];
DOMRenderer.renderActionCardWithAnalytics(ad, container, {
  analytics: {
    requestId: result.requestId,
    slotId: 'main',
    position: 0,
    totalAds: 1,
  },
  manager,
});