​
Quick Installation

1

Install the Package

npm install admesh-ui-sdk
2

Import Components

import { AdMeshLayout } from 'admesh-ui-sdk';
3

Use in Your App

<AdMeshLayout 
  recommendations={recommendations}
  layout="auto"
  onRecommendationClick={(adId, admeshLink) => window.open(admeshLink)}
/>

​
Package Requirements

React Version

React 16.8+ (Hooks support required)

TypeScript

Full TypeScript support included

​
Installation Methods

npm install admesh-ui-sdk

yarn add admesh-ui-sdk

pnpm add admesh-ui-sdk

​
Basic Setup

​
1. Import Styles (Optional)

The UI SDK includes default styles, but you can customize them: 
// Import default styles (optional)
import 'admesh-ui-sdk/dist/styles.css';

​
2. Basic Component Usage

import React, { useState, useEffect } from 'react';
import { AdMeshLayout } from 'admesh-ui-sdk';

function MyApp() {
  const [recommendations, setRecommendations] = useState([]);

  useEffect(() => {
    // Fetch recommendations from your backend
    fetchRecommendations();
  }, []);

  const fetchRecommendations = async () => {
    try {
      const response = await fetch('/api/recommendations', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ query: 'best CRM software' })
      });
      
      const recs = await response.json();
      setRecommendations(recs);
    } catch (error) {
      console.error('Failed to fetch recommendations:', error);
    }
  };

  return (
    <div>
      <h1>Product Recommendations</h1>
      <AdMeshLayout
        recommendations={recommendations}
        layout="auto"
        onRecommendationClick={(adId, admeshLink) => {
          // Handle click tracking
          console.log('Recommendation clicked:', adId);
          window.open(admeshLink, '_blank');
        }}
      />
    </div>
  );
}

export default MyApp;

​
Component Props

​
AdMeshLayout Props

PropTypeRequiredDescription
recommendationsRecommendation[]✅Array of recommendation objects
layoutstring❌Layout type: auto, grid, list, citation
onRecommendationClickfunction❌Click handler: (adId, admeshLink) => void
classNamestring❌Custom CSS class
styleobject❌Inline styles
showPricingboolean❌Show pricing information (default: true)
showFeaturesboolean❌Show features list (default: true)
maxItemsnumber❌Maximum recommendations to display

​
Recommendation Object Type

interface Recommendation {
  title: string;
  reason: string;
  admesh_link: string;
  ad_id: string;
  product_id?: string;
  pricing?: string;
  features?: string[];
  description?: string;
  has_free_tier?: boolean;
  trial_days?: number;
  intent_match_score?: number;
}

​
Layout Types

Automatically chooses the best layout based on content:
<AdMeshLayout
  recommendations={recommendations}
  layout="auto"
/>
Displays recommendations in a responsive grid:
<AdMeshLayout
  recommendations={recommendations}
  layout="grid"
/>
Displays recommendations in a vertical list:
<AdMeshLayout
  recommendations={recommendations}
  layout="list"
/>
Inline citations perfect for AI assistants:
<AdMeshLayout
  recommendations={recommendations}
  layout="citation"
/>

​
Advanced Configuration

​
Custom Styling

// Custom styles
const customStyles = {
  container: {
    backgroundColor: '#f8f9fa',
    borderRadius: '8px',
    padding: '16px'
  }
};

<AdMeshLayout
  recommendations={recommendations}
  style={customStyles.container}
  className="my-custom-recommendations"
/>

​
Event Handling

const handleRecommendationClick = (adId: string, admeshLink: string) => {
  // Track analytics
  analytics.track('recommendation_clicked', { adId });
  
  // Custom behavior
  if (window.confirm('Open this recommendation?')) {
    window.open(admeshLink, '_blank');
  }
};

<AdMeshLayout
  recommendations={recommendations}
  onRecommendationClick={handleRecommendationClick}
/>

​
Conditional Rendering

function RecommendationSection({ query }) {
  const [recommendations, setRecommendations] = useState([]);
  const [loading, setLoading] = useState(false);

  if (loading) {
    return <div>Loading recommendations...</div>;
  }

  if (recommendations.length === 0) {
    return <div>No recommendations found.</div>;
  }

  return (
    <AdMeshLayout
      recommendations={recommendations}
      layout="auto"
      maxItems={5}
      onRecommendationClick={(adId, admeshLink) => {
        window.open(admeshLink, '_blank');
      }}
    />
  );
}

​
Integration with Backend

​
Complete Example with API Integration

import React, { useState } from 'react';
import { AdMeshLayout } from 'admesh-ui-sdk';

function SearchWithRecommendations() {
  const [query, setQuery] = useState('');
  const [recommendations, setRecommendations] = useState([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  const searchRecommendations = async () => {
    if (!query.trim()) return;

    setLoading(true);
    setError(null);

    try {
      const response = await fetch('/api/recommendations', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ query }),
      });

      if (!response.ok) {
        throw new Error('Failed to fetch recommendations');
      }

      const recs = await response.json();
      setRecommendations(recs);
    } catch (err) {
      setError(err.message);
      setRecommendations([]);
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="search-container">
      <div className="search-input">
        <input
          type="text"
          value={query}
          onChange={(e) => setQuery(e.target.value)}
          onKeyPress={(e) => e.key === 'Enter' && searchRecommendations()}
          placeholder="Search for products or services..."
          disabled={loading}
        />
        <button 
          onClick={searchRecommendations}
          disabled={loading || !query.trim()}
        >
          {loading ? 'Searching...' : 'Search'}
        </button>
      </div>

      {error && (
        <div className="error-message">
          Error: {error}
        </div>
      )}

      {recommendations.length > 0 && (
        <div className="recommendations-section">
          <h3>Recommendations for "{query}"</h3>
          <AdMeshLayout
            recommendations={recommendations}
            layout="grid"
            onRecommendationClick={(adId, admeshLink) => {
              // Track the click
              console.log('Clicked recommendation:', adId);
              
              // Open the link
              window.open(admeshLink, '_blank');
            }}
          />
        </div>
      )}
    </div>
  );
}

export default SearchWithRecommendations;

​
TypeScript Support

The UI SDK includes full TypeScript definitions: 
import { AdMeshLayout, Recommendation } from 'admesh-ui-sdk';

interface Props {
  recommendations: Recommendation[];
  onRecommendationClick?: (adId: string, admeshLink: string) => void;
}

const MyComponent: React.FC<Props> = ({ recommendations, onRecommendationClick }) => {
  return (
    <AdMeshLayout
      recommendations={recommendations}
      layout="auto"
      onRecommendationClick={onRecommendationClick}
    />
  );
};

​
Troubleshooting

Common causes:
  • Empty recommendations array
  • Missing required props
  • CSS conflicts
Solutions:
// Check if recommendations exist
{recommendations.length > 0 && (
  <AdMeshLayout recommendations={recommendations} />
)}

// Add debug logging
console.log('Recommendations:', recommendations);
Common causes:
  • CSS conflicts with existing styles
  • Missing default styles import
Solutions:
// Import default styles
import 'admesh-ui-sdk/dist/styles.css';

// Use custom className
<AdMeshLayout
  recommendations={recommendations}
  className="my-custom-class"
/>
Common causes:
  • Missing onRecommendationClick prop
  • Event propagation issues
Solutions:
const handleClick = (adId: string, admeshLink: string) => {
  console.log('Click handler called:', adId);
  window.open(admeshLink, '_blank');
};

<AdMeshLayout
  recommendations={recommendations}
  onRecommendationClick={handleClick}
/>

​
Next Steps

Layout Component

Detailed component documentation

Customization

Styling and theming guide

Live Examples

Interactive component examples