matrixads-react

Conversational Monetization SDK for React & Next.js applications. Ingest contextually-matched sponsored cards into AI chatbot interfaces with sub-50ms latency and FTC-compliant disclosure badges.

Official Website: https://thematrixads.space

Installation

npm install matrixads-react
# or
yarn add matrixads-react
# or
pnpm add matrixads-react

Quick Start (3 Lines)

import { MatrixAdsCard } from 'matrixads-react';

function ChatMessage({ message }) {
  return (
    <div>
      <p>{message.text}</p>
      {/* Automatically matches & renders sponsored ad card */}
      <MatrixAdsCard
        publisherKey="syn_pk_live_your_publisher_key"
        ad={message.ad}
      />
    </div>
  );
}

Advanced Hook Usage (useMatrixAds)

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

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

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

  const handleUserMessage = async (userPrompt: string) => {
    // Submit user message and fetch matched ad in parallel
    const match = await matchAd(userPrompt);
    if (match.match) {
      console.log('Ad matched:', match.ad.headline);
    }
  };

  return (
    <div>
      {ad && <MatrixAdsCard ad={ad} theme="dark" />}
    </div>
  );
}

Plain TypeScript / Vanilla JS Usage (MatrixAdsClient)

import { MatrixAdsClient } from 'matrixads-react';

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

// Request an ad match
const response = await client.matchAd('I need cloud hosting for Node.js');

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

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

License

MIT © MatrixAds