UI SDK Integration

'use client';

import { useMemo } from 'react';
import { AdMeshProvider } from 'admesh-ui-sdk';
import { AdMeshIntentAssistant } from 'admesh-ui-sdk';

export default function ArticlePage() {
 const sessionId = useMemo(() => {
    // Use the utility function from the SDK
    return AdMeshSDK.generateSessionIdFromUrl();
  }, []);
  return (
    <AdMeshProvider apiKey={apiKey} sessionId={sessionId}>
      <div className="min-h-screen bg-white">
        <header className="border-b">
          <div className="mx-auto max-w-5xl px-4 py-4">
            <h1 className="text-2xl font-bold">Your Publication</h1>
          </div>
        </header>

        <main className="mx-auto max-w-3xl px-4 py-8">
          <article>
            <h2 className="mb-4 text-3xl font-semibold">
              Your Article Title
            </h2>
            <p className="mb-4">
              Publish your content normally. The assistant runs independently as a floating UI.
            </p>
            <p>
              Readers can open suggestions and interact with sponsored recommendations without leaving your page flow.
            </p>
          </article>
        </main>
      </div>

      <AdMeshIntentAssistant
        autoOpen={true}
        position="bottom-right"
        size="md"
        panelWidth={360}
        panelHeight={420}
        fontScale={0.95}
        maxSuggestions={3}
        showWelcomeMessage={false}
      />
    </AdMeshProvider>
  );
}

<AdMeshProvider
  apiKey={apiKey}
  sessionId={sessionId}
  language="en-US"
  geo_country="US"
>
  {children}
</AdMeshProvider>

<AdMeshIntentAssistant
  autoOpen={true}
  position="bottom-right"
  size="md"
  maxSuggestions={3}
  showWelcomeMessage={false}
/>