matrixads-react Package

Installation

Quick 3-Line Component (`MatrixAdsCard`)

import { MatrixAdsCard } from 'matrixads-react';

export function ChatMessage({ message }) {
  return (
    <div className="p-4 rounded-lg bg-slate-900">
      <p>{message.text}</p>
      
      {/* Renders native sponsored card with automatic impression tracking */}
      <MatrixAdsCard 
        publisherKey="mtx_pk_live_your_publisher_key" 
        ad={message.ad}
        theme="dark" // 'dark' | 'light'
      />
    </div>
  );
}

Context Provider & Hook (`useMatrixAds`)

import { MatrixAdsProvider, useMatrixAds, MatrixAdsCard } from 'matrixads-react';

function App() {
  return (
    <MatrixAdsProvider publisherKey="mtx_pk_live_your_publisher_key">
      <ChatInterface />
    </MatrixAdsProvider>
  );
}

function ChatInterface() {
  const { ad, loading, matchAd } = useMatrixAds();

  const handleUserMessage = async (userPrompt: string) => {
    // Matches ad in parallel with LLM generation
    const response = await matchAd(userPrompt);
    if (response.match) {
      console.log('Matched Headline:', response.ad.headline);
    }
  };

  return (
    <div>
      {loading && <p className="text-xs text-slate-500">Matching context...</p>}
      {ad && <MatrixAdsCard ad={ad} theme="dark" />}
    </div>
  );
}

Plain TypeScript / Vanilla JS (`MatrixAdsClient`)

import { MatrixAdsClient } from 'matrixads-react';

const client = new MatrixAdsClient({
  publisherKey: 'mtx_pk_live_your_publisher_key',
  endpointUrl: 'https://thematrixads.space/api/v1/ads/match',
});

// Request contextual ad match
const response = await client.matchAd('Need cloud hosting for Node.js API');

if (response.match && response.ad) {
  console.log('Matched Headline:', response.ad.headline);
  console.log('CTA URL:', response.ad.cta_url);

  // Trigger view impression beacon
  await client.reportImpression(response.impression_token);
}