admesh-ui-sdk
Version:
Beautiful, modern React components for displaying AI-powered product recommendations with citation-based conversation ads, auto-triggered widgets, floating chat, conversational interfaces, persistent sidebar, and built-in tracking. Includes zero-code SDK
105 lines • 3.86 kB
TypeScript
export interface AdMeshRecommendationsProps {
/** Recommendation format
*
* - 'product': Display as product cards
* - 'tail': Display as tail format (default)
* - 'bridge': Display as bridge format for followup sponsored recommendations (primarily for Vibe Coding Platforms, AI IDEs, and AI search followup suggestions) with setup prompts and documentation URLs
*
* Note: For Weave Ad Format (where AdMesh links are embedded in LLM response),
* use WeaveAdFormatContainer component instead. This component is for displaying
* recommendations as a separate UI component.
*/
format?: 'product' | 'tail' | 'bridge';
/** Optional callback when recommendations are shown */
onRecommendationsShown?: (messageId: string) => void;
/** Optional callback on error */
onError?: (error: Error) => void;
/**
* Message ID for per-message recommendations.
*
* This is the primary identifier for fetching recommendations for a specific message.
*/
messageId?: string;
/**
* User query text for generating recommendations.
*
* This is the query that will be used to fetch recommendations from the backend.
* Typically the user's question or search query.
*
* IMPORTANT: This should be a non-empty string. If not provided or empty,
* the component will skip rendering to prevent 400 Bad Request errors.
* The backend requires a valid query parameter.
*/
query?: string;
/**
* Latency budget in milliseconds.
*
* How long the platform will wait for an ad response.
* If not provided, the backend will use a default value.
*/
latencyBudgetMs?: number;
/**
* Callback to paste content to input field (for bridge format CTA button).
* When provided, the bridge format will show a CTA button that pastes
* the bridge_content into the input field when clicked.
*/
onPasteToInput?: (content: string) => void;
}
/**
* AdMeshRecommendations - Citation/Product Format Recommendation Display
*
* Displays recommendations as a separate UI component. Handles all the complexity:
* - Uses provided messageId directly
* - Generates container IDs for recommendations
* - Calls SDK's showRecommendations()
*
* For Weave Ad Format (where AdMesh links are embedded in LLM response),
* use WeaveAdFormatContainer component instead.
*
* @example
* ```tsx
* // Per-message recommendations with messageId
* <AdMeshProvider apiKey={apiKey} sessionId={sessionId}>
* {messages.map((msg) => (
* <div key={msg.messageId}>
* {msg.content}
* {msg.role === 'assistant' && (
* <AdMeshRecommendations
* messageId={msg.messageId}
* format="tail"
* />
* )}
* </div>
* ))}
* </AdMeshProvider>
* ```
*
* @example
* ```tsx
* // Product card format recommendations
* <AdMeshProvider apiKey={apiKey} sessionId={sessionId}>
* <Chat messages={messages} />
* <AdMeshRecommendations
* messageId={lastMessageId}
* query="best CRM for small business"
* format="product"
* />
* </AdMeshProvider>
* ```
*
* @example
* ```tsx
* // Bridge format for followup sponsored recommendations (Vibe Coding Platforms, AI IDEs, AI search)
* <AdMeshProvider apiKey={apiKey} sessionId={sessionId}>
* <Chat messages={messages} />
* <AdMeshRecommendations
* messageId={lastMessageId}
* query="how to set up a CRM system"
* format="bridge"
* />
* </AdMeshProvider>
* ```
*/
export declare const AdMeshRecommendations: ({ format, onRecommendationsShown, onError, messageId, query, latencyBudgetMs, onPasteToInput, }: AdMeshRecommendationsProps) => import("react/jsx-runtime").JSX.Element;
export default AdMeshRecommendations;
//# sourceMappingURL=AdMeshRecommendations.d.ts.map