> ## Documentation Index
> Fetch the complete documentation index at: https://docs.useadmesh.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Platform Overview

> AdMesh integration guide for conversational platforms - understand package requirements and choose your integration approach

## 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

### Frontend SDKs

Use the frontend SDK that matches your client application:

* **`admesh-ui-sdk`** for React web applications
* **`admesh_flutter_ui_sdk`** for native Flutter applications

These SDKs provide 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 frontend 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 React frontend SDK provides three components for different integration needs, while the Flutter frontend SDK provides native widget equivalents for recommendation layouts, tracking, and provider-based state.

### 1. **AdMeshProvider** - State Management

Wraps your application and manages SDK initialization, session tracking, and state.

```tsx theme={null}
<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`.

```tsx theme={null}
<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)

<Note>
  **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.
</Note>

***

### 3. **WeaveAdFormatContainer** - Weave Ad Format

Wraps your LLM response content and automatically detects AdMesh links. Use this for Weave format.

```tsx theme={null}
<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 your frontend SDK (`admesh-ui-sdk` or `admesh_flutter_ui_sdk`)
2. Wrap app with `AdMeshProvider`
3. Add `AdMeshRecommendations` component

See [Tail & Product Format](/platforms/tail-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](/platforms/weave-ad-format) for detailed integration steps.

***

## Component Comparison

| Aspect             | AdMeshRecommendations                                      | WeaveAdFormatContainer |
| ------------------ | ---------------------------------------------------------- | ---------------------- |
| **Purpose**        | Display recommendations                                    | Detect & track links   |
| **Formats**        | Tail, Product, Bridge (followup sponsored recommendations) | Weave Ad Format        |
| **Rendering**      | Automatic UI                                               | Wraps your content     |
| **Link Detection** | N/A                                                        | Automatic              |
| **Fallback UI**    | N/A                                                        | Supported              |
| **Tracking**       | Automatic                                                  | Automatic              |
| **Setup Time**     | 2 minutes                                                  | 2 minutes              |
| **Best For**       | Separate recommendations                                   | Embedded 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](/platforms/tail-format)
2. **For Weave Ad Format:** Go to [Weave Ad Format](/platforms/weave-ad-format)
3. **For Flutter frontend setup:** Go to [Flutter Frontend SDK](/ui-sdk/flutter)
4. **Have Questions?** Check our [FAQ](/platforms/faq) or contact [support@useadmesh.com](mailto:support@useadmesh.com)

***

> **AdMesh empowers platforms to monetize the future of conversation — seamlessly, ethically, and transparently.**