Homepage Tile Agent - Technical Overview

⚠️ Important: This use case demonstrates sponsored brand tiles on browser homepages that morph into interactive chat experiences. When clicked, the tile triggers a 5-phase animation sequence that transforms the search bar into a branded shopping assistant powered by MCP (Model Context Protocol).

📺 Live Demo: See this implementation in action at https://demo-aura.affinity.net/homepage-tile-agent

Executive Summary

This document outlines how browser publishers can integrate sponsored brand tiles into new tab pages using AdCP (Ad Context Protocol) format extensions. When users click a sponsored tile, the interface seamlessly transforms into a branded shopping chat experience through a choreographed "Morphing Search Bar" animation. The chat is powered by an MCP endpoint that provides real-time product information and conversational AI.

Key Benefits:

Innovative UX Pattern: Morphing search bar creates seamless transition from browsing to shopping
Brand Immersion: Full-screen branded chat experience with product carousels
MCP-Powered: Real-time product data and conversational AI via MCP endpoints
AdCP Framework: Standardized protocol built on OpenRTB 2.6
Easy Integration: Works with existing ad tech ecosystem (DSPs, SSPs, ad servers)
Performance-Based: Revenue from clicks and conversions
Privacy-First: Contextual targeting without PII requirements
Engaging Experience: 5-phase animation sequence creates memorable brand interaction

Compare With:

Homepage Tile Link uses simple click-through to advertiser landing pages
AI Search LLM Weaving weaves sponsored text into LLM responses

Use Case Example

User Action: User opens new tab in browser and sees homepage with sponsored Walmart tile

Initial State:

┌─────────────────────────────────────────────────────────────────┐
│                           GLIMPSE                               │
│                  ┌────────────────────────────┐                 │
│                  │ 🔍 Search Google or type URL │               │
│                  └────────────────────────────┘                 │
│     ┌───┐  ┌───┐  ┌───┐  ┌───┐  ┌───┐  ┌───┐  ┌───┐  ┌───┐   │
│     │ ▢ │  │ ▢ │  │ ▢ │  │ ▢ │  │🏪│  │ ▢ │  │ ▢ │  │ ▢ │   │
│     │   │  │   │  │   │  │   │  │AD │  │   │  │   │  │   │   │
│     └───┘  └───┘  └───┘  └───┘  └───┘  └───┘  └───┘  └───┘   │
│     (grey content tiles)   (Walmart)   (grey content)           │
└─────────────────────────────────────────────────────────────────┘

User Clicks Walmart Tile → 5-Phase Morphing Sequence:

Phase 1 (0-400ms) - Simulation:

Search bar auto-types "Walmart" character by character
Cursor blinks during typing

Phase 2 (400-800ms) - Recognition:

Typed text clears
Context pill slides in with Walmart logo and name
Search bar border highlights

Phase 3 (800-1200ms) - Prompting:

Auto-types greeting "Hello!" next to context pill
Cursor blinks

Phase 4 (1200-1800ms) - Expansion:

Search bar moves to bottom of screen
Logo and tiles fade out
Chat container fades in
Back button appears

Phase 5 (1800ms+) - Conversation Start:

Greeting becomes user message
Bot typing indicator appears
Walmart assistant responds with welcome message
User can now chat and browse products

Chat State:

┌─────────────────────────────────────────────────────────────────┐
│                                          [← Back to Home]       │
│  ┌─────────────────────────────────────────────────────────┐   │
│  │  🏪 Hi! I'm your Walmart shopping assistant.            │   │
│  │     I can help you find great deals!                    │   │
│  │                                                         │   │
│  │                      Show me some TVs                   │   │
│  │                                                         │   │
│  │  🏪 Here are some great TV deals:                       │   │
│  │  ┌────┐  ┌────┐  ┌────┐  ┌────┐                       │   │
│  │  │ TV │  │ TV │  │ TV │  │ TV │  →                    │   │
│  │  │$449│  │$1299│ │$399│  │$249│                       │   │
│  │  └────┘  └────┘  └────┘  └────┘                       │   │
│  └─────────────────────────────────────────────────────────┘   │
│  ┌─────────────────────────────────────────────────────────┐   │
│  │ 🏪 Walmart × │ Type a message...              [Send]   │   │
│  └─────────────────────────────────────────────────────────┘   │
└─────────────────────────────────────────────────────────────────┘

Why AdCP for Brand Tiles?

1. Standardized Integration

Built on OpenRTB 2.6 with AdCP extensions
No custom integrations needed for each brand
Works with existing ad tech ecosystem (DSPs, SSPs, ad servers)
Forward-compatible protocol design

2. Structured Agent Configuration

Brands provide structured assets for chat agents
Agent name, welcome message, and MCP endpoint clearly defined
Consistent format ensures quality and interoperability
Supports rich chat experiences with product discovery

3. MCP-Powered Interactions

Real-time product data via MCP (Model Context Protocol) endpoints
Conversational AI capabilities
Dynamic product search and recommendations
Extensible tool integration

4. Privacy-First Design

No PII required in bid requests
Contextual targeting based on homepage context
GDPR/CCPA compliant by design

5. Rich Analytics

Track impressions (when tile appears on homepage)
Track clicks (when users activate the tile)
Track engagement (chat interactions, product views)
Standard tracking mechanisms via AdCP universal macros

6. Quality Control

Format specifications define asset requirements
Validation ensures quality before serving
Publisher controls which brands to display

Architecture Overview

Key Points:

Browser provides the homepage - The browser renders the new tab page
Affinity AI Bid API provides brand tiles - standard OpenRTB auction with AdCP extensions
Morphing animation - 5-phase sequence transforms search bar into chat
Form auto-fill - Agent name, welcome message, and MCP endpoint populated from bid response
MCP integration - Chat powered by brand's MCP server for real-time product data
Standard tracking - impression and click tracking via AdCP universal macros

Format Specification

Homepage Tile Agent Format

Format ID: homepage_tile_agent_v1

Type: Interactive brand tile with MCP-powered chat agent

Key Features:

Brand tile display on homepage
Morphing animation to chat interface
Agent configuration (name, welcome message, MCP endpoint)
Real-time product search via MCP
Product carousels and recommendations

Required Assets

Asset	Purpose	Max Length
`brand_name`	Brand identifier for tile	50 chars
`brand_logo`	Logo image for tile (96x96px)	-
`agent_name`	Chat agent display name	50 chars
`welcome_message`	Initial greeting from agent	300 chars
`mcp_endpoint`	MCP server URL for chat	-
`impression_tracker`	Impression tracking URL	-
`click_tracker`	Click tracking URL	-

Optional Assets

Asset	Purpose	Max Length
`brand_category`	Brand category (e.g., "Shopping")	50 chars
`agent_avatar`	Agent avatar image (200x200px)	-
`initial_prompt`	Pre-filled greeting (e.g., "Hello!")	100 chars
`brand_color`	Primary brand color (hex)	7 chars
`engagement_tracker`	Engagement tracking URL	-

OpenRTB Integration

Note: We use standard OpenRTB 2.6 with AdCP extensions for brand tiles. The protocol is used for structured communication and asset delivery.

Bid Request Structure

Your browser sends standard OpenRTB 2.6 bid requests with AdCP extensions:

{
  "id": "homepage-tiles-req-001",
  "imp": [
    {
      "id": "imp-1",
      "ext": {
        "aura": {
          "adcpFormats": [
            {
              "agent_url": "https://creative.adcontextprotocol.org",
              "id": "homepage_tile_agent_v1"
            }
          ]
        }
      },
      "bidfloor": 0.5,
      "bidfloorcur": "USD"
    }
  ],
  "site": {
    "id": "tiles-homepage.com",
    "domain": "demo-aura.affinity.net",
    "page": "https://demo-aura.affinity.net/homepage-tile-agent",
    "cat": ["IAB19-30"],
    "keywords": "homepage,new tab,browser"
  },
  "device": {
    "language": "en",
    "geo": {
      "country": "US"
    }
  }
}

Key Request Components:

Request ID: Unique identifier for the bid request
Impressions: Single impression object for one tile slot
AdCP Format: Specifies homepage_tile_agent_v1 format
Site: Publisher site information with contextual keywords
Device: User device and geo information for targeting

Bid Response Structure

Brands respond with structured assets using AdCP format:

{
  "id": "homepage-tiles-req-001",
  "seatbid": [
    {
      "seat": "walmart-bidder",
      "bid": [
        {
          "id": "walmart-tile-1",
          "impid": "imp-1",
          "price": 1.5,
          "ext": {
            "aura": {
              "adcpFormat": {
                "formatId": {
                  "agent_url": "https://creative.adcontextprotocol.org",
                  "id": "homepage_tile_agent_v1"
                },
                "creativeManifest": {
                  "promoted_offering": "Walmart Shopping Assistant",
                  "assets": {
                    "brand_name": {
                      "content": "Walmart"
                    },
                    "brand_logo": {
                      "url": "https://static-02.veve.com/96x96/walmart-logo.png",
                      "width": 96,
                      "height": 96
                    },
                    "brand_category": {
                      "content": "Shopping"
                    },
                    "agent_name": {
                      "content": "Walmart Shopping Assistant"
                    },
                    "welcome_message": {
                      "content": "Hi! I'm your Walmart shopping assistant. I can help you find great deals on everything from groceries to electronics!"
                    },
                    "initial_prompt": {
                      "content": "Hello!"
                    },
                    "mcp_endpoint": {
                      "url": "https://mcp.walmart.com/shopping-agent"
                    },
                    "brand_color": {
                      "content": "#0071CE"
                    },
                    "impression_tracker": {
                      "url": "https://track.walmart.com/imp?buy={MEDIA_BUY_ID}&cb={CACHEBUSTER}"
                    },
                    "click_tracker": {
                      "url": "https://track.walmart.com/click?buy={MEDIA_BUY_ID}&cb={CACHEBUSTER}"
                    },
                    "engagement_tracker": {
                      "url": "https://track.walmart.com/engage?buy={MEDIA_BUY_ID}&cb={CACHEBUSTER}"
                    }
                  }
                }
              }
            }
          },
          "crid": "walmart-tile-001",
          "adomain": ["walmart.com"]
        }
      ]
    }
  ],
  "cur": "USD"
}

AdCP Response Breakdown:

The ext.aura.adcpFormat object contains the creative manifest:

Format ID: homepage_tile_agent_v1
Promoted Offering: "Walmart Shopping Assistant"
Assets:
- brand_name: "Walmart" (displayed on tile)
- brand_logo: Logo URL (96x96px, displayed at 40px)
- brand_category: "Shopping" (optional)
- agent_name: "Walmart Shopping Assistant" (fills chat form)
- welcome_message: Initial greeting from agent (fills chat form)
- initial_prompt: "Hello!" (auto-typed during animation)
- mcp_endpoint: MCP server URL (fills chat form, enables real-time chat)
- brand_color: Primary brand color for UI theming
Tracking URLs: Impression, click, and engagement trackers with universal macros

Tile Display Integration

Parsing AdCP Response

Your browser extracts brand tile information from the AdCP creative manifest:

Parse the ext.aura.adcpFormat.creativeManifest object from the bid response
Extract assets from the manifest:
- brand_name → Brand name for tile display
- brand_logo → Brand logo URL (96x96px source)
- brand_category → Brand category (optional)
- agent_name → Agent name for chat form
- welcome_message → Welcome message for chat form
- initial_prompt → Pre-filled greeting for animation
- mcp_endpoint → MCP server URL for chat form
- brand_color → Primary brand color (optional)
- impression_tracker → Impression tracking URL
- click_tracker → Click tracking URL
- engagement_tracker → Engagement tracking URL (optional)
Validate all URLs are HTTPS
Sanitize text content to prevent XSS
Store agent configuration for chat initialization
Render tile on homepage

Rendering Brand Tile

Display the brand tile on the homepage:

Brand Logo: From brand_logo asset (96x96px source, scaled to 40px display)
Brand Name: From brand_name asset (displayed below logo)
AD Badge: Small "AD" badge in top-right corner
Clickable Tile: Entire tile is clickable

Visual Design:

┌───────────────┐
│ [Logo 40px]   │ ← AD badge
│               │
│  Brand Name   │
└───────────────┐

Loading State:

Gray circle placeholder (80px diameter)
Pulse animation while loading
Fades to brand tile when loaded

Chat Form Auto-Fill

When the user clicks the tile, the browser automatically fills the chat form with:

Agent Name: From agent_name asset
Welcome Message: From welcome_message asset
MCP Endpoint: From mcp_endpoint asset URL

This configuration enables the chat interface to:

Display the correct agent name in the UI
Show the welcome message as the first bot response
Connect to the brand's MCP server for real-time interactions

MCP Integration

After the morphing animation completes, the browser:

Connects to MCP Server: Uses the mcp_endpoint URL from the manifest
Initializes Agent: Sends initialization request with agent configuration
Receives Capabilities: MCP server responds with available tools and capabilities
Enables Chat: User can now interact with the MCP-powered agent
Product Search: Agent uses MCP tools to search products and provide recommendations

MCP Communication Flow:

Browser → MCP Server: Initialize connection
MCP Server → Browser: Agent capabilities (tools, resources)
Browser → MCP Server: User message
MCP Server → Browser: Agent response with product data

Tracking Implementation

Fire tracking pixels at appropriate times using navigator.sendBeacon() with image pixel fallback:

Impression Trackers: When tile becomes 50% visible in viewport (Intersection Observer)
Click Trackers: When user clicks on tile (max 200ms wait before animation)
Engagement Trackers: When user sends first message in chat (optional)

Implementation Details:

Uses Intersection Observer API with 0.5 threshold (50% visibility)
Fires impression only once per tile per session
Fires impression before click if not already fired
All tracking URLs validated as HTTPS
Universal macros replaced with actual values
Graceful degradation if tracking fails

Morphing Animation Sequence

Phase 1: Simulation (0-400ms)

Behavior:

Search input auto-types brand name character by character
Typing speed: 50ms per character
Cursor blinks during typing

Purpose: Simulates user typing to create natural transition

Phase 2: Recognition (400-800ms)

Behavior:

Clear typed text
Animate context pill into search bar
Show brand icon + name in pill
Highlight search bar border (neutral gray, not brand color)

Purpose: System "recognizes" the brand and shows context

Phase 3: Prompting (800-1200ms)

Behavior:

Auto-type greeting prompt ("Hello!")
Show typing animation in input field
Position text next to context pill

Purpose: Suggests user intent to engage with brand

Phase 4: Expansion (1200-1800ms)

Behavior:

Search bar translates from center to bottom
Logo fades out
Tiles fade out and translate down
Chat container fades in
Back button appears

Purpose: Transform layout from homepage to chat interface

Phase 5: Conversation Start (1800ms+)

Behavior:

Clear greeting from input
Add greeting as user message to chat
Show typing indicator (800ms)
Display bot welcome message
Enable user input

Purpose: Start branded chat conversation

Chat Experience

Chat Interface

After the morphing animation, users interact with a branded chat assistant:

Features:

Context Pill: Brand logo and name always visible in input bar
Message Bubbles: User messages (right, blue) and bot messages (left, white)
Product Carousels: Horizontal scrolling product cards in bot messages
Typing Indicator: Animated dots while bot is "thinking"
Back Button: Return to homepage at any time

Product Display

Bot messages can include product carousels:

Product Card:

Product image (square, 180x135px)
Product name (2-line clamp)
Price (bold, green)
Rating and reviews
Badge (e.g., "Flash Deal")
Entire card is clickable

Carousel:

Horizontal scroll
Snap-to-item scrolling
Touch/mouse scroll support

Demo Implementation

The demo includes:

Keyword Detection: Responds to "TV", "snack", etc.
Mock Products: Pre-defined product catalogs
Scripted Responses: Keyword-based bot responses

Real Implementation Would Include:

MCP server integration for real product search
LLM-powered conversational AI
Real-time product data from merchant APIs

User Experience Flow

1. Homepage Display

User opens new tab in browser
Gray placeholder circle appears while loading tile
Sponsored tile loads with brand logo, name, and AD badge
7 grey content tiles (static, non-interactive) + 1 sponsored tile
Entire sponsored tile is clickable

2. Tile Click → Morphing Animation

User clicks sponsored tile
Click trackers fire (max 200ms wait)
5-phase morphing animation executes (~2000ms total)
Search bar transforms into branded chat interface
User sees welcome message from brand assistant

3. Chat Interaction

User types messages in input bar
Bot responds with text and product carousels
User can browse products, ask questions
Back button returns to homepage

4. Tracking Events

Impression: Fired when tile becomes 50% visible (once per session)
Click: Fired when user clicks tile (before animation)
Engagement: Chat interactions, product views (future)

Benefits for Browser Publishers

Revenue Generation

Performance-Based: Revenue tied to clicks and engagement
Premium Placements: Homepage tiles command premium rates
Brand Partnerships: Direct relationships with major brands
Standard Tracking: Industry-standard impression and click tracking

User Experience

Innovative UX: Morphing animation creates memorable experience
Brand Immersion: Full-screen branded chat experience
Helpful: Users get shopping assistance without leaving browser
Transparent: Clear presentation as sponsored content per IAB guidelines

Technical Advantages

Industry Standard: OpenRTB 2.6 + AdCP extensions
MCP-Powered: Real-time product data and conversational AI
Easy Integration: Works with existing ad tech infrastructure
Scalable: Handle millions of homepage views per day
Flexible: Extensible format for future enhancements

Analytics & Optimization

Standard Metrics: Track impressions, clicks via AdCP universal macros
Engagement Tracking: Monitor chat interactions and product views
A/B Testing: Test different animation styles, tile layouts, agent configurations
Performance Data: Optimize based on click-through rates and engagement
Revenue Reporting: Standard programmatic advertising metrics

Implementation Considerations

Quality Control

Asset Validation: Ensure all required AdCP assets are present (brand_name, brand_logo, agent_name, welcome_message, mcp_endpoint)
HTTPS Validation: All URLs (images, tracking, MCP endpoints) must be HTTPS
XSS Prevention: Sanitize all text content before rendering
Image Quality: Validate logo URLs are accessible
MCP Endpoint Validation: Verify MCP server is reachable and responds correctly
Performance: Target <50ms per tile parsing

Privacy & Compliance

No PII Required: Contextual targeting only
GDPR Compliant: User consent management
CCPA Compliant: Privacy string support
Transparent Disclosure: Clearly mark tiles as sponsored/ads
MCP Data Privacy: Ensure MCP interactions respect user privacy

Performance

Low Latency: 1000ms timeout for bid request
Image Optimization: Use lazy loading for brand logos
Async Tracking: Fire tracking pixels asynchronously with sendBeacon
Graceful Degradation: Handle no-bid responses gracefully
Performance Targets:
- Bid request construction: <10ms
- Bid API response: <1000ms
- Tile parsing: <50ms per tile
- Impression tracking: <100ms
- Click tracking: <50ms
- Morphing animation: ~2000ms total
- Page load: <2s complete homepage

Animation Performance

60fps Target: All animations use GPU-accelerated properties
Smooth Transitions: Cubic-bezier easing functions
No Jank: Layout shifts are smooth and predictable
Responsive: Adapts to different screen sizes

Demo Implementation

A complete working demo is available at https://demo-aura.affinity.net/homepage-tile-agent:

Features:

Real Affinity AI Bid API integration (no mock data)
AdCP format parsing with creative manifests
5-phase morphing animation sequence
Branded chat interface with product carousels
Chat form auto-fill (agent name, welcome message, MCP endpoint)
Intersection Observer impression tracking
Click tracking with sendBeacon
Responsive design (desktop and mobile)

Demo Limitations:

Simulated chat responses (keyword-based, no real LLM)
Mock product catalogs (no real merchant APIs)
No MCP server integration (uses mock responses)

Real Implementation Would Include:

Affinity AI Bid API integration with AdCP format
OpenRTB 2.6 protocol with AdCP extensions
AdCP creative manifest parsing
MCP server integration for real-time chat
LLM-powered conversational AI
Real product data from merchant APIs
Impression/click/engagement tracking

Homepage Tile Link - Simple click-through to advertiser landing pages
AI Search LLM Weaving - Weave sponsored text into LLM responses
AI Search Product Ads - Product cards in search results

ADCP Protocol Components

Format Support - ADCP format framework
Creative Manifests - Manifest structure
Tracking - Tracking implementation

OpenRTB Components

Request Format - OpenRTB 2.6 bid request format
Response Format - OpenRTB 2.6 bid response format

External Standards

OpenRTB 2.6 Specification - IAB Tech Lab
Model Context Protocol (MCP) - Anthropic

Version History

v2.0 (2025-12-19): Updated to AdCP format
- AdCP format specification (homepage_tile_agent_v1)
- MCP endpoint integration for real-time chat
- Chat form auto-fill with agent configuration
- Enhanced tracking with engagement metrics
- Updated architecture with MCP server integration
v1.0 (2025-12-19): Initial use case guide
- IAB Native Ads 1.2 specification for brand tiles
- 5-phase morphing animation sequence
- Branded chat experience with product carousels
- Demo implementation details

Conclusion

AdCP enables browser publishers to monetize homepage tiles through innovative MCP-powered branded chat experiences. This approach ensures:

Industry Standard: OpenRTB 2.6 + AdCP extensions
MCP-Powered: Real-time product data and conversational AI
Easy Integration: Works with existing ad tech infrastructure
Innovative UX: Morphing animation creates memorable brand interaction
Brand Immersion: Full-screen chat experience with product discovery
Strong Revenue: Performance-based monetization with engagement tracking
Privacy-First: Contextual targeting without PII
Responsive Design: Adapts to all screen sizes

By using AdCP format extensions with MCP integration and the morphing search bar pattern, you can generate revenue from homepage placements while creating engaging, AI-powered brand experiences that users remember.

Executive Summary​

Use Case Example​

Why AdCP for Brand Tiles?​

1. Standardized Integration​

2. Structured Agent Configuration​

3. MCP-Powered Interactions​

4. Privacy-First Design​

5. Rich Analytics​

6. Quality Control​

Architecture Overview​

Format Specification​

Homepage Tile Agent Format​

Required Assets​

Optional Assets​

OpenRTB Integration​

Bid Request Structure​

Bid Response Structure​

Tile Display Integration​

Parsing AdCP Response​

Rendering Brand Tile​

Chat Form Auto-Fill​

MCP Integration​

Tracking Implementation​

Morphing Animation Sequence​

Phase 1: Simulation (0-400ms)​

Phase 2: Recognition (400-800ms)​

Phase 3: Prompting (800-1200ms)​

Phase 4: Expansion (1200-1800ms)​

Phase 5: Conversation Start (1800ms+)​

Chat Experience​

Chat Interface​

Product Display​

Demo Implementation​

User Experience Flow​

1. Homepage Display​

2. Tile Click → Morphing Animation​

3. Chat Interaction​

4. Tracking Events​

Benefits for Browser Publishers​

Revenue Generation​

User Experience​

Technical Advantages​

Analytics & Optimization​

Implementation Considerations​

Quality Control​

Privacy & Compliance​

Performance​

Animation Performance​

Demo Implementation​

Related Use Cases​

Related Documentation​

ADCP Protocol Components​

OpenRTB Components​

External Standards​

Version History​

Conclusion​

Executive Summary

Use Case Example

Why AdCP for Brand Tiles?

1. Standardized Integration

2. Structured Agent Configuration

3. MCP-Powered Interactions

4. Privacy-First Design

5. Rich Analytics

6. Quality Control

Architecture Overview

Format Specification

Homepage Tile Agent Format

Required Assets

Optional Assets

OpenRTB Integration

Bid Request Structure

Bid Response Structure

Tile Display Integration

Parsing AdCP Response

Rendering Brand Tile

Chat Form Auto-Fill

MCP Integration

Tracking Implementation

Morphing Animation Sequence

Phase 1: Simulation (0-400ms)

Phase 2: Recognition (400-800ms)

Phase 3: Prompting (800-1200ms)

Phase 4: Expansion (1200-1800ms)

Phase 5: Conversation Start (1800ms+)

Chat Experience

Chat Interface

Product Display

Demo Implementation

User Experience Flow

1. Homepage Display

2. Tile Click → Morphing Animation

3. Chat Interaction

4. Tracking Events

Benefits for Browser Publishers

Revenue Generation

User Experience

Technical Advantages

Analytics & Optimization

Implementation Considerations

Quality Control

Privacy & Compliance

Performance

Animation Performance

Demo Implementation

Related Use Cases

Related Documentation

ADCP Protocol Components

OpenRTB Components

External Standards

Version History

Conclusion