Skip to content

Integration Examples

Basic Integration Example

This example shows a simple Node.js/Express implementation for fetching and displaying ads from Mosaic.

const express = require('express');
const axios = require('axios');
const app = express();

app.use(express.json());

// Environment variables
const MOSAIC_API_KEY = process.env.MOSAIC_API_KEY;
const MOSAIC_API_URL = 'https://demo.xmosaic.ai/api/fetch-ads';

// Function to extract keywords from conversation
function extractKeywords(conversation) {
  // Simple keyword extraction (in production, use NLP libraries)
  const words = conversation.toLowerCase().split(/\W+/);
  const stopWords = ['the', 'and', 'is', 'in', 'to', 'a', 'for', 'of', 'with'];
  const keywords = words
    .filter(word => word.length > 3 && !stopWords.includes(word))
    .slice(0, 10); // Limit to top 10 keywords

  return keywords.join(',');
}

// Endpoint to fetch ads based on conversation
app.post('/get-ad', async (req, res) => {
  const { conversation, userLocation, deviceInfo } = req.body;

  if (!conversation) {
    return res.status(400).json({ error: 'Conversation is required' });
  }

  try {
    // Extract keywords from conversation
    const contextKeywords = extractKeywords(conversation);

    // Call Mosaic API
    const response = await axios.post(MOSAIC_API_URL, {
      conversation,
      context_keywords: contextKeywords,
      user_location: userLocation || null,
      user_device_info: deviceInfo || null
    }, {
      headers: {
        'Content-Type': 'application/json',
        'mosaic-api-key': MOSAIC_API_KEY
      }
    });

    // Return the ad information
    res.json({
      success: true,
      ad: response.data.advertisements[0]
    });
  } catch (error) {
    console.error('Error fetching ad:', error.response?.data || error.message);

    // Handle errors gracefully
    res.status(error.response?.status || 500).json({
      success: false,
      error: error.response?.data?.error || 'Failed to fetch advertisement'
    });
  }
});

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

Python Integration Example

This example shows how to integrate Mosaic with a Python application:

import requests
import re
from flask import Flask, request, jsonify

app = Flask(__name__)

# Environment variables
MOSAIC_API_KEY = "YOUR_API_KEY"  # Store in environment variables in production
MOSAIC_API_URL = "https://demo.xmosaic.ai/api/fetch-ads"

def extract_keywords(conversation):
    """Extract keywords from conversation text"""
    # Simple keyword extraction (use NLP libraries in production)
    words = re.findall(r'\b\w+\b', conversation.lower())
    stop_words = ['the', 'and', 'is', 'in', 'to', 'a', 'for', 'of', 'with']
    keywords = [word for word in words if len(word) > 3 and word not in stop_words]
    # Limit to top 10 keywords
    return ','.join(keywords[:10])

@app.route('/get-ad', methods=['POST'])
def get_ad():
    data = request.json
    conversation = data.get('conversation')
    user_location = data.get('userLocation')
    device_info = data.get('deviceInfo')

    if not conversation:
        return jsonify({'error': 'Conversation is required'}), 400

    try:
        # Extract keywords from conversation
        context_keywords = extract_keywords(conversation)

        # Call Mosaic API
        response = requests.post(
            MOSAIC_API_URL,
            json={
                'conversation': conversation,
                'context_keywords': context_keywords,
                'user_location': user_location,
                'user_device_info': device_info
            },
            headers={
                'Content-Type': 'application/json',
                'mosaic-api-key': MOSAIC_API_KEY
            }
        )

        response.raise_for_status()
        data = response.json()

        # Return the ad information
        return jsonify({
            'success': True,
            'ad': data['advertisements'][0] if data.get('advertisements') else None
        })

    except requests.exceptions.RequestException as e:
        error_message = e.response.json()['error'] if hasattr(e, 'response') else str(e)
        status_code = e.response.status_code if hasattr(e, 'response') else 500

        return jsonify({
            'success': False,
            'error': error_message
        }), status_code

if __name__ == '__main__':
    app.run(debug=True, port=3000)

Frontend Display Example

This example shows how to display the ad in a React component:

import React, { useState } from 'react';
import ReactMarkdown from 'react-markdown';

const AdComponent = ({ conversation }) => {
  const [ad, setAd] = useState(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  const fetchAd = async () => {
    setLoading(true);
    setError(null);

    try {
      const response = await fetch('/get-ad', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({
          conversation,
          userLocation: 'San Francisco, CA', // Example location
          deviceInfo: 'React Web App'
        })
      });

      const data = await response.json();

      if (!response.ok) {
        throw new Error(data.error || 'Failed to fetch ad');
      }

      setAd(data.ad);
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="ad-container">
      <button onClick={fetchAd} disabled={loading}>
        {loading ? 'Loading...' : 'Show Relevant Ad'}
      </button>

      {error && <div className="error-message">{error}</div>}

      {ad && (
        <div className="ad-content">
          <ReactMarkdown>{ad.campaign_markdown}</ReactMarkdown>
        </div>
      )}
    </div>
  );
};

export default AdComponent;