This recipe implements collection:items:search, the most common feature across Scenaro e-commerce experiences (Lupi, Le Petit Ballon, Urbansider, etc.).
Feature overview
| Property | Value |
|---|
| Feature type | collection:items:search |
| Primary tool | search_collection_items |
| UI | Search results panel with product rows |
| Data source | Platform 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:
- Read
toolState.items from useFeatures()
- Render product rows using a template (e.g.
ProductTemplate)
- Handle empty results with a friendly message
- Support scroll boundary prevention on mobile
Authenticated API calls
Search API calls need the user JWT. Use the shared client:
Agent prompt hints
| Feature | Tool | Purpose |
|---|
collection:items:display | display_collection_item | Product detail sheet |
collection:items:comparison | compare_collection_items | Side-by-side compare |
bucket:list:crud | add_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.