Skip to main content

​
Prerequisites

  • A React or Next.js frontend
  • AdMesh API key

​
Step 1: Install the SDK

npm install admesh-ui-sdk@latest

​
Step 2: Generate Session ID and Wrap Your Page with AdMeshIntentAssistant

For publisher integrations, use the SDK’s utility function to generate session IDs from URL structure. 
'use client';

import { useMemo } from 'react';
import { AdMeshProvider } from 'admesh-ui-sdk';
import { AdMeshIntentAssistant, AdMeshProvider as AdMeshProviderComponent, AdMeshSDK } from 'admesh-ui-sdk';

export default function PublisherPage() {
  const apiKey = '<YOUR_ADMESH_API_KEY>';
    
  // Generate session ID from current page URL
  const sessionId = useMemo(() => {
    // Use the utility function from the SDK
    return AdMeshSDK.generateSessionIdFromUrl();
  }, []);

  return (
    <AdMeshProvider apiKey={apiKey} sessionId={sessionId}>
      <main>
        <h1>Your Publisher Content</h1>
        <p>Your article body goes here...</p>
      </main>

      <AdMeshIntentAssistant
        autoOpen={true}
        position="bottom-right"
        size="md"
      />
    </AdMeshProvider>
  );
}

​
Step 3: Verify Integration

  1. Open a content page where the assistant is rendered
  2. Confirm the floating assistant appears in the selected corner
  3. Click a suggestion and verify recommendation UI appears
  4. Check browser console for SDK initialization logs

​
Next Step

UI SDK Integration

Explore advanced configuration options for AdMeshIntentAssistant.