Skip to main content

​
Introduction

AdMesh enables conversational platforms (AI assistants, search engines, chat applications) to monetize through contextually relevant product recommendations. We offer flexible integration options to fit your platform’s architecture and requirements.

​
Package Requirements

​
Mandatory: admesh-ui-sdk

admesh-ui-sdk is required for all AdMesh integrations. This package provides the core functionality every platform needs:
  • Recommendation Fetching: Retrieves contextually relevant recommendations from AdMesh
  • Rendering: Displays recommendations in your UI with proper formatting
  • Tracking: Automatically tracks exposures, clicks, and conversions
  • Transparency: Adds [Ad] labels to comply with advertising standards
The SDK handles all of this automatically, so you don’t need to manage these concerns yourself. Key Features:
  • Provider Pattern: 3-line integration with automatic everything
  • Zero-code integration (3 simple steps)
  • Automatic session lifecycle management
  • Built-in error handling and fallbacks
  • Support for multiple ad formats (tail, product cards, etc.)
  • Configurable theming and styling

​
Three Core Components

The admesh-ui-sdk provides three components for different integration needs:

​
1. AdMeshProvider - State Management

Wraps your application and manages SDK initialization, session tracking, and state. 
<AdMeshProvider apiKey={apiKey} sessionId={sessionId}>
  <YourApp />
</AdMeshProvider>
Responsibilities:
  • ✅ Initializes the SDK
  • ✅ Manages user sessions
  • ✅ Tracks message lifecycle
  • ✅ Handles errors

​
2. AdMeshRecommendations - Tail & Product Formats

Displays recommendations as a separate UI component. Use this for Tail, Product, or Bridge format. Format is automatically detected from the recommendation’s preferred_format. 
<AdMeshRecommendations
  messageId={messageId}  // Required: Message ID for this recommendation
  query={userQuery}      // Required: User's original query
  onRecommendationsShown={(messageId) => {}}  // Optional: Callback when recommendations shown
  onError={(error) => {}}  // Optional: Error handler
  onPasteToInput={(content) => {}}  // Optional: For bridge format CTA button
  followups_container_id="followups"  // Optional: Container for follow-up suggestions
  onExecuteQuery={(query) => {}}  // Optional: Handler for follow-up queries
  onFollowupDetected={(query, url, recId) => {}}  // Optional: When sponsored followup detected
/>
When to use:
  • ✅ You want a separate recommendations panel
  • ✅ You want automatic rendering and tracking
  • ✅ You need per-message recommendations
Formats supported (auto-detected):
  • Tail - Inline tail with product links (default)
  • Product - Product cards with details
  • Bridge - Followup sponsored recommendations for Vibe Coding Platforms, AI IDEs, and AI search (setup prompts and documentation URLs)
Format Configuration: Format is automatically detected from the recommendation’s creative_input.preferred_format. allowed_formats are automatically fetched from your platform configuration (set during onboarding). For Vibe Coding Platforms, bridge format is automatically selected during onboarding. You don’t need to specify formats as props.

​
3. WeaveAdFormatContainer - Weave Ad Format

Wraps your LLM response content and automatically detects AdMesh links. Use this for Weave format. 
<WeaveAdFormatContainer
  messageId={messageId}  // Required: Unique message ID
  query={userQuery}      // Optional: User's query (for fallback recommendations)
  fallbackFormat="tail"  // Optional: Fallback format if no links detected (default: "tail")
>
  {llmResponseContent}
</WeaveAdFormatContainer>
When to use:
  • ✅ You embed AdMesh links directly in LLM responses
  • ✅ You want automatic link detection with event-driven timing
  • ✅ You want fallback recommendations if no links present
  • ✅ You want automatic tracking and transparency labels
What it does:
  • Detects AdMesh links in your content using event-driven detection
  • Adds [Ad] labels automatically
  • Fires exposure pixels when links detected
  • Shows “Why this ad?” tooltip on hover
  • Automatically renders fallback recommendations if no links found (format specified by fallbackFormat)

​
Integration Decision Guide

Choose your component based on your platform’s needs.

​
Tail & Product Format

Best for: Most platforms that want quick, automatic integration Use: AdMeshRecommendations component What you get:
  • Automatic rendering of recommendations
  • Automatic tracking and transparency labels
  • Zero-code setup (3 steps)
  • Multiple format options (tail, product cards, bridge format for followup sponsored recommendations)
Integration steps:
  1. Install admesh-ui-sdk
  2. Wrap app with AdMeshProvider
  3. Add AdMeshRecommendations component
See Tail & Product Format for detailed integration steps.

​
Weave Ad Format

Best for: Conversational AI platforms that embed AdMesh links directly in LLM responses Use: WeaveAdFormatContainer component What you get:
  • Automatic link detection in LLM responses
  • Automatic exposure tracking
  • Fallback recommendations when no links present
  • Transparency labels added automatically
  • Simple component-based integration
Integration steps:
  1. Install admesh-ui-sdk
  2. Wrap app with AdMeshProvider
  3. Wrap LLM response with WeaveAdFormatContainer
  4. Provide fallbackUI with AdMeshRecommendations
See Weave Ad Format for detailed integration steps.

​
Component Comparison

AspectAdMeshRecommendationsWeaveAdFormatContainer
PurposeDisplay recommendationsDetect & track links
FormatsTail, Product, Bridge (followup sponsored recommendations)Weave Ad Format
RenderingAutomatic UIWraps your content
Link DetectionN/AAutomatic
Fallback UIN/ASupported
TrackingAutomaticAutomatic
Setup Time2 minutes2 minutes
Best ForSeparate recommendationsEmbedded in responses

​
Quick Reference

Choose AdMeshRecommendations if:
  • You want a separate recommendations panel
  • You want Tail format (inline tails)
  • You want Product format (product cards)
  • You want Bridge format (followup sponsored recommendations for Vibe Coding Platforms, AI IDEs, and AI search)
  • You want automatic rendering
Choose WeaveAdFormatContainer if:
  • You embed AdMesh links in LLM responses
  • You want automatic link detection
  • You want fallback recommendations
  • You want automatic tracking

​
Next Steps

  1. For Tail & Product Format: Go to Tail & Product Format
  2. For Weave Ad Format: Go to Weave Ad Format
  3. Have Questions? Check our FAQ or contact support@useadmesh.com
AdMesh empowers platforms to monetize the future of conversation — seamlessly, ethically, and transparently.