This recipe implements collection:items:search, the most common feature across Scenaro e-commerce experiences (Lupi, Le Petit Ballon, Urbansider, etc.).

Feature overview

PropertyValue
Feature typecollection:items:search
Primary toolsearch_collection_items
UISearch results panel with product rows
Data sourcePlatform API collections

Handler pattern

Registry entry

Rendering results in your own UI instead of a feature panel? Skip the registry and pass the handler via the tools option of useScenaroSession — it receives (args, context) where context.settings and context.collections come from the scenario config.

Search component essentials

Your SearchFeature component should:
  1. Read toolState.items from useFeatures()
  2. Render product rows using a template (e.g. ProductTemplate)
  3. Handle empty results with a friendly message
  4. Support scroll boundary prevention on mobile

Authenticated API calls

Search API calls need the user JWT. Use the shared client:

Agent prompt hints

FeatureToolPurpose
collection:items:displaydisplay_collection_itemProduct detail sheet
collection:items:comparisoncompare_collection_itemsSide-by-side compare
bucket:list:crudadd_to_bucket, etc.Shopping list

Reference implementation

See experiences/lupi/src/lib/scenaro-sdk/features/collection-items-search/ in the monorepo for a full production implementation.