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;