> ## Documentation Index
> Fetch the complete documentation index at: https://docs.actionx.top/llms.txt
> Use this file to discover all available pages before exploring further.
# Soft mention
> Blend one subtle product suggestion into a longer answer without breaking the conversational tone.
export const ExampleShowcase = ({defaultExampleId = "text-links", showCatalog = true}) => {
const products = [{
id: "lv-pochette",
name: "Louis Vuitton Pochette Sling PM",
brand: "Louis Vuitton",
adCopy: "Perfect anniversary gift. Modern elegance meets timeless luxury.",
softPlacementCopy: "This compact black bag feels polished and giftable, with a classic chain detail that works for both daily use and dinner plans.",
displayPrice: "$2,030.00",
url: "https://us.louisvuitton.com/eng-us/products/pochette-sling-pm-h27-nvprod7150038v/M27822",
image: "https://images.unsplash.com/photo-1584917865442-de89df76afd3?w=400&h=400&fit=crop",
imagePosition: "object-center",
badge: "High intent",
priceBand: "Ultra luxury",
matchReason: "A strong fit for someone who likes sleek silhouettes and a polished day-to-night feel.",
styleTags: ["structured", "sleek", "day-to-night"],
occasionTags: ["anniversary", "birthday", "holiday"],
supportingPoints: ["Modern profile with strong visual impact", "Feels premium without looking overly formal", "Easy to style across daytime and evening outfits"],
scores: {
versatility: 92,
statement: 88,
giftAppeal: 95
},
personaFit: {
minimalist: 96,
office: 80,
everyday: 82
},
occasionMessages: {
birthday: "Feels celebratory and visually striking for a birthday gift.",
anniversary: "The strongest milestone-gift option in this shortlist.",
holiday: "A festive pick when you want high recognition and polish."
}
}, {
id: "loewe-amazona",
name: "Large Amazona 180",
brand: "Loewe",
adCopy: "Effortlessly sophisticated. A refined gift for someone special.",
softPlacementCopy: "A softer and more design-led direction if you want the gift to feel tasteful rather than obviously brand-forward.",
displayPrice: "$3,500.00",
url: "https://www.loewe.com/int/en/women/bags/amazona/large-amazona-180-bag-in-suede/A039ASRX03-0018.html",
image: "https://www.loewe.com/dw/image/v2/BBPC_PRD/on/demandware.static/-/Sites-Loewe_master/default/dwbef4ac14/images_rd/A039ASRX03/A039ASRX03-0018/A039ASRX03_0018_3O.jpg?sw=850&q=100",
imagePosition: "object-center",
badge: "Editorial",
priceBand: "High luxury",
matchReason: "Best for a softer, quieter luxury look with a more relaxed and artistic feel.",
styleTags: ["soft luxury", "single-handle", "editorial"],
occasionTags: ["anniversary", "holiday", "everyday-upgrade"],
supportingPoints: ["Distinct silhouette without looking loud", "Carries a crafted, design-forward identity", "Balances elegance with an effortless attitude"],
scores: {
versatility: 84,
statement: 82,
giftAppeal: 88
},
personaFit: {
minimalist: 78,
office: 84,
everyday: 90
},
occasionMessages: {
birthday: "A thoughtful birthday gift when you want taste over flash.",
anniversary: "Works well for an anniversary with a more refined tone.",
holiday: "A sophisticated holiday option with a strong editorial mood."
}
}, {
id: "celine-luggage",
name: 'Celine "New Luggage"',
brand: "Celine",
adCopy: "Iconic and versatile. A gift that works across occasions.",
softPlacementCopy: "A recognizable icon if you want the recommendation to land with stronger brand recognition while staying clean and wearable.",
displayPrice: "$3,900.00",
url: "https://www.celine.com/en-us/celine-shop-women/handbags/new-luggage/",
image: "https://www.celine.com/on/demandware.static/-/Library-Sites-Celine-SharedLibrary/default/dw68d58acb/content_assets/block%20editor/CELINE_SUMMER_26_4X5_2400PX_02.jpg?im=Resize=(800)",
imagePosition: "object-top",
badge: "Brand-led",
priceBand: "High luxury",
matchReason: "A reliable recommendation when you want a recognizable icon with a cleaner 2026 update.",
styleTags: ["iconic", "structured", "professional"],
occasionTags: ["birthday", "anniversary", "office-style"],
supportingPoints: ["Strong brand recognition and proven silhouette", "Feels versatile across professional and social settings", "Updated shape keeps it current without losing familiarity"],
scores: {
versatility: 90,
statement: 85,
giftAppeal: 89
},
personaFit: {
minimalist: 86,
office: 94,
everyday: 78
},
occasionMessages: {
birthday: "A dependable birthday gift when you want iconic recognition.",
anniversary: "A polished anniversary option with broad appeal.",
holiday: "A structured holiday pick that still feels practical."
}
}];
const categories = [{
id: "soft-placement",
label: "Soft placement",
description: "Keep the recommendation subtle by blending products into a longer, more natural answer."
}, {
id: "answer-native",
label: "Answer-native",
description: "Keep the recommendation inside the answer flow and progressively enrich it."
}, {
id: "browsing-native",
label: "Browsing-native",
description: "Turn the same response into layouts built for exploration and discovery."
}, {
id: "decision-support",
label: "Decision-support",
description: "Help users compare, filter, and shortlist before they take the next step."
}, {
id: "action-extensions",
label: "Action-extensions",
description: "Extend the recommendation into service, wishlist, and follow-up actions."
}];
const accentByCategory = {
"soft-placement": "border-rose-700 bg-rose-700 text-white",
"answer-native": "border-slate-900 bg-slate-900 text-white",
"browsing-native": "border-amber-700 bg-amber-700 text-white",
"decision-support": "border-emerald-700 bg-emerald-700 text-white",
"action-extensions": "border-indigo-700 bg-indigo-700 text-white"
};
const demos = [{
id: "soft-mention",
categoryId: "soft-placement",
label: "Soft mention",
eyebrow: "Subtle handoff",
title: "Blend one product suggestion into the answer without breaking the tone",
description: "Keep the response centered on advice, then softly introduce one relevant item as a natural follow-up instead of switching immediately into a shopping layout.",
notes: ["Best when you want the recommendation to feel like part of the assistant response, not a separate ad module.", "A good bridge pattern before stronger commerce treatments such as links, cards, or shelves."],
code: `return (
<>
);`
}, {
id: "contextual-entity-links",
categoryId: "soft-placement",
label: "Contextual entity links",
eyebrow: "Inline entities",
title: "Embed linked brands and products directly inside the answer context",
description: "Keep the recommendation paragraph readable, but turn the relevant brands and product entities into links so the commercial surface stays soft and contextual.",
notes: ["Useful when the answer should still read like advice, with commerce appearing only on the important entities.", "A good pattern for editorial assistants or brand-aware recommendation flows."],
code: `return (
);`
}, {
id: "contextual-links-with-ad-hover",
categoryId: "soft-placement",
label: "Contextual links with ad hover",
eyebrow: "Hover disclosure",
title: "Keep inline entity links subtle, then reveal the product card from a tiny AD marker",
description: "Let the answer stay paragraph-first, attach a small AD marker to the linked entity, and show the richer product card only when the user intentionally hovers or focuses that marker.",
notes: ["Useful when you want the commercial cue to be visible but still much softer than an always-on card.", "A good pattern for conversational surfaces where disclosure matters but UI noise should stay low."],
code: `return (
);`
}, {
id: "clickable-recommendation-block",
categoryId: "soft-placement",
label: "Clickable recommendation block",
eyebrow: "Larger hit area",
title: "Turn one recommendation paragraph into a softer click target",
description: "Instead of linking only a few words, make the recommendation paragraph itself clickable so the commercial action is easier without feeling like a separate card.",
notes: ["Useful when one paragraph is clearly the recommendation section and deserves a larger tap target.", "Good for mobile surfaces where larger hit areas improve usability without adding hard merchandising UI."],
code: `return (
{products[0].matchReason}
);`
}, {
id: "inline-recommendation-insert",
categoryId: "soft-placement",
label: "Inline recommendation insert",
eyebrow: "Embedded card",
title: "Insert one compact recommendation card into a longer answer",
description: "Keep the answer content-rich, then place one lightweight product card inside the response exactly where the recommendation becomes relevant.",
notes: ["Useful when the answer has several advice points and only one section naturally transitions into a product suggestion.", "Very close to assistant-style soft placement because the product sits inside the flow rather than below it."],
code: `return (
);`
}, {
id: "text-links",
categoryId: "answer-native",
label: "Text links",
eyebrow: "Lightweight rendering",
title: "Turn product mentions into clickable commerce links",
description: "Keep the answer mostly text-first and only upgrade product names into links for the lightest possible enrichment layer.",
notes: ["Best when you want almost no visual interruption inside a chat interface.", "Useful as the lowest-effort integration before experimenting with richer cards."],
code: `products.map((product) => (
));`
}, {
id: "inline-cards",
categoryId: "answer-native",
label: "Inline product cards",
eyebrow: "Contextual enrichment",
title: "Insert richer product blocks directly after the answer",
description: "Preserve the conversational answer, then attach visual cards that make the next click much easier.",
notes: ["Good when the answer still carries most of the meaning but visuals improve engagement.", "A common step up from plain text links in assistant-style products."],
code: `return (
<>
);`
}, {
id: "reason-chips",
categoryId: "answer-native",
label: "Reason chips",
eyebrow: "Explainability",
title: "Add compact reason chips after each recommendation",
description: "Use short tags to explain why an item matches the query without forcing users to read longer paragraphs.",
notes: ["Helpful when recommendation quality needs a visible explanation layer.", "Chips are especially effective on mobile because they scan quickly."],
code: `return (
<>
{product.matchReason}
);`
}, {
id: "expandable-picks",
categoryId: "answer-native",
label: "Expandable picks",
eyebrow: "Progressive disclosure",
title: "Collapse the shortlist until the user asks for more detail",
description: "Show only the product names first, then let users expand each recommendation to inspect the supporting reasons.",
notes: ["Useful when answer density matters and the first screen should stay compact.", "Works well in docs because the interaction cost is low and easy to explain."],
code: `products.map((product) => (
));`
}, {
id: "hover-sync-answer",
categoryId: "answer-native",
label: "Hover sync answer",
eyebrow: "Linked interaction",
title: "Sync answer reasoning with a richer product panel",
description: "Link a compact answer summary on the left to a richer visual card on the right using hover or focus.",
notes: ["Good for desktop-first docs that want to show coordinated UI states.", "Makes the relation between reasoning and product presentation more explicit."],
code: `const [activeId, setActiveId] = useState(products[0].id);
`
}, {
id: "chat-carousel",
categoryId: "answer-native",
label: "Chat carousel",
eyebrow: "Touch-friendly browsing",
title: "Keep the chat context and move the products into a scrollable shelf",
description: "This keeps the answer bubble intact but turns the product layer into a horizontally scrollable sequence of cards.",
notes: ["Good for mobile experiences and chat interfaces with constrained vertical space.", "Feels native to touch interactions without abandoning the chat framing."],
code: `return (
);`
}, {
id: "product-gallery",
categoryId: "browsing-native",
label: "Product gallery",
eyebrow: "Direct merchandising",
title: "Render the same items as a standalone recommendation grid",
description: "Move from answer-first to browsing-first by presenting the same product payload as a clear grid.",
notes: ["A simple and reliable option for landing pages or post-answer recommendation zones.", "Good baseline for comparing richer browsing layouts against a straightforward grid."],
code: `return ;`
}, {
id: "editorial-spotlight",
categoryId: "browsing-native",
label: "Editorial spotlight",
eyebrow: "Hero-led browsing",
title: "Promote one hero item while keeping supporting picks nearby",
description: "Use a large feature card for the strongest recommendation and smaller slots for alternatives.",
notes: ["Works well for content-driven surfaces or brand-heavy presentation.", "Useful when one product clearly deserves more attention than the rest."],
code: `return (
);`
}, {
id: "bento-discovery-grid",
categoryId: "browsing-native",
label: "Bento discovery grid",
eyebrow: "Exploration-first",
title: "Use an editorial bento layout to make a small catalog feel richer",
description: "A bento grid gives the content more shape and makes the recommendation feel like a discovery surface instead of a utility list.",
notes: ["Useful for demoing how layout alone changes the perceived product experience.", "Can make even three products feel more dynamic and premium."],
code: `return (
);`
}, {
id: "lookbook-strip",
categoryId: "browsing-native",
label: "Lookbook strip",
eyebrow: "Image-first storytelling",
title: "Push imagery forward with a lookbook-style presentation",
description: "Emphasize photography and mood so the same product data reads more like an editorial feature.",
notes: ["Best for lifestyle-led merchandising or inspirational landing pages.", "Useful for showing that docs can host presentation-heavy UI, not just reference layouts."],
code: `products.map((product) => (
));`
}, {
id: "compact-result-shelf",
categoryId: "browsing-native",
label: "Compact result shelf",
eyebrow: "Dense placement",
title: "Shrink the same recommendations into a tight recommendation row",
description: "Render a denser shelf that could live inside a results page, side rail, or lower-priority placement.",
notes: ["Good for embedding product recommendations in tighter layout constraints.", "Helps show how one payload can scale down without needing a different backend response."],
code: `products.map((product) => (
));`
}, {
id: "comparison-table",
categoryId: "decision-support",
label: "Comparison table",
eyebrow: "Structured trade-offs",
title: "Compare style, occasion, and gifting logic in one table",
description: "Turn descriptive product data into a comparison matrix for users who are already evaluating trade-offs.",
notes: ["Tables are often easier to scan than cards once the user is in decision mode.", "This is especially useful for partner docs explaining recommendation rationale."],
code: `return (
);`
}, {
id: "attribute-scorecards",
categoryId: "decision-support",
label: "Attribute scorecards",
eyebrow: "Visible ranking logic",
title: "Expose recommendation criteria through compact scorecards",
description: "Make hidden ranking dimensions more legible by visualizing scores such as versatility, statement value, and gift appeal.",
notes: ["Helpful when the user wants to understand why one product ranks higher than another.", "A good way to turn abstract recommendation logic into something concrete and visual."],
code: `return (
);`
}, {
id: "persona-matcher",
categoryId: "decision-support",
label: "Persona matcher",
eyebrow: "Intent adaptation",
title: "Re-rank the shortlist around different user personas",
description: "Let readers switch between personas such as minimalist, office style, or daily use and see the same data reprioritized.",
notes: ["Useful for showing how one product set can serve multiple audience lenses.", "Demonstrates lightweight interactivity without involving external data."],
code: `const ranked = sortBy(products, product => product.personaFit[persona]);
return ;`
}, {
id: "occasion-switcher",
categoryId: "decision-support",
label: "Occasion switcher",
eyebrow: "Context switching",
title: "Change the framing for birthday, anniversary, or holiday gifting",
description: "Keep the same products but change the message and ordering depending on the occasion context.",
notes: ["Good for recommendation systems that adapt copy rather than inventory.", "Shows how local UI logic can personalize the same backend result set."],
code: `const ordered = rankByOccasion(products, activeOccasion);
return ;`
}, {
id: "shortlist-compare-tray",
categoryId: "decision-support",
label: "Shortlist compare tray",
eyebrow: "Mid-funnel state",
title: "Let users save two or three picks before comparing them",
description: "Simulate the common mid-funnel moment where users gather likely candidates before making a decision.",
notes: ["Good for illustrating shortlist behavior inside docs without building a full compare page.", "Adds just enough interactivity to make the experience feel product-like."],
code: `const selectedProducts = products.filter((product) =>
selectedIds.includes(product.id)
);
return ;`
}, {
id: "follow-up-service-card",
categoryId: "action-extensions",
label: "Follow-up service card",
eyebrow: "Extended action",
title: "Attach a post-recommendation service module",
description: "Add a second action layer after the recommendation, such as premium gift wrapping or another add-on flow.",
notes: ["Good for showing how a recommendation can hand off into a monetizable secondary action.", "Keeps the interaction simple while proving the docs page can host a coded module."],
code: `return (
);`
}, {
id: "gift-bundle-builder",
categoryId: "action-extensions",
label: "Gift bundle builder",
eyebrow: "Configurable add-ons",
title: "Turn a recommendation into a light bundle-building flow",
description: "Keep the product recommendation on screen while letting the user configure simple gift options.",
notes: ["Useful for service add-ons that naturally follow a product recommendation.", "Helps teams imagine how the recommendation area can branch into configuration UI."],
code: `const [selectedOptions, setSelectedOptions] = useState(["wrap"]);
return ;`
}, {
id: "save-or-share-wishlist",
categoryId: "action-extensions",
label: "Save or share wishlist",
eyebrow: "Intent capture",
title: "Convert recommendations into a lightweight wishlist surface",
description: "Give the user a softer action than purchase by offering save, share, or copy-style follow-ups.",
notes: ["Best when the recommendation is valuable but the user is not ready to act immediately.", "Makes the recommendation module useful even before a final decision happens."],
code: `return (
);`
}, {
id: "next-step-action-sheet",
categoryId: "action-extensions",
label: "Next-step action sheet",
eyebrow: "Clear handoff",
title: "Surface the likely next actions in a compact action sheet",
description: "Add a bottom action layer that makes the handoff from recommendation to user action explicit.",
notes: ["Useful when you want to keep the answer area focused but still show the main downstream actions.", "A clean pattern for docs that want to simulate a fuller product journey."],
code: `return (
);`
}];
const supportingCodeByDemoId = {
"soft-mention": {
title: "SoftMentionCard",
code: `function SoftMentionCard({ product }) {
return (
If you want one polished option,{" "}
{products[0].brand}
{" "}
and{" "}
{products[1].name}
{" "}
are easy starting points because they feel giftable without overwhelming the answer.
This pattern keeps the answer in advice mode, then introduces one product as a light suggestion instead of a hard merchandising switch.
,
children:
AX
If you are choosing a gift for your girlfriend, I would usually start from her daily style instead of the product category itself. That makes it easier to avoid recommendations that feel technically correct but emotionally flat.
For example, if she usually likes polished pieces that still feel easy to wear, then a refined bag can be a very safe direction. If she is more design-led, then I would lean toward something quieter and more distinctive instead of something obviously logo-driven.
To keep it simple, I can start with one softer recommendation first and only expand into a fuller shortlist if you want more options after that.
Yes, show me one subtle option first.
AX
A gentle starting point would be this one. It feels polished and gift-ready, but still understated enough that the recommendation does not overpower the conversation.
If this direction feels right, I can then give you two stronger alternatives: one more iconic and one more design-led.
This works well when the answer should remain paragraph-first and only the important entities need commercial affordance.
,
children:
AX
If you want the recommendation to stay elegant, I would keep the shortlist very tight and only mention the strongest directions directly inside the answer instead of switching into a visible product module too early.
For a more polished and gift-ready option,{" "}
Louis Vuitton
{" "}
is the safest place to start. If you want something quieter and more design-led,{" "}
Large Amazona 180
{" "}
feels more understated and design-forward.
That way, the answer still reads like advice first, while the most important brand and product entities quietly remain clickable.
This keeps the paragraph visually quiet, while the richer product card only appears when the user inspects the AD marker.
,
children:
AX
If you want to keep the recommendation elegant, one good approach is to mention the strongest option directly in the paragraph and only expose the richer product card when the user shows intent.
For a polished and gift-ready direction,{" "}
Louis Vuitton
AD
{softPlacementCard({
badge: "AD",
description: products[0].softPlacementCopy,
product: products[0]
})}
{" "}
is an easy place to start because it feels refined without making the answer suddenly look like a product grid.
This way, the main answer remains readable, but users who notice the disclosure marker can still inspect the product with a much richer preview.
This pattern enlarges the click target only where the answer clearly moves into recommendation mode.
,
children:
AX
If you are buying for your girlfriend, I would first narrow the answer to one recommendation paragraph instead of showing a full shopping block right away. That keeps the tone helpful and personal, especially if the user is still thinking through taste, budget, and occasion.
This mirrors a long-form answer where one compact recommendation card appears exactly at the point where a product becomes relevant.
,
children:
AX
If you are choosing a gift for your girlfriend and are not fully sure what direction to take yet, I would usually think through a few categories first and only surface one product when it naturally matches the answer.
Jewelry: A necklace, bracelet, or earrings can work very well if she already likes delicate accessories and tends to wear them often.
Beauty: If she has a favorite brand, a premium beauty or skincare item can feel thoughtful without being too difficult to choose.
Bag direction: If you want something that feels more complete as a milestone gift, a refined handbag is often the safest upgrade because it feels both practical and special.