# Store assistant demo

> The agent filters an outdoor store’s product grid, points at its pick and fills your basket.

Pattern: Side panel. Brand: Northwind Outdoor. Tags: page tools, situational awareness, functions, runtime events, React.

## What it shows

- **Page tools** (`set_filters`, `highlight_product`, `add_to_basket`, `remove_from_basket`) changing the storefront as you watch, each validating its arguments
- A **function** searching a sample catalog of about 30 products: literal data and pure filter and sort steps, no database
- Comparison cards drawn by the page from the function result in the run’s `tool_end` event, with no widget step; the product the agent highlights or adds to the basket leads the row as its pick, and "Choose this" sends your choice back through the element’s composer
- **Situational awareness** sending the basket, the active filters and the product in view with every turn
- Every call in the under-the-hood pane, colored by kind: function or page tool

## Files

- `demos/northwind-store/demo.json`
- `demos/northwind-store/functions/northwind-store-search-products.json`
- `src/demos/store/index.tsx`
- `src/demos/store/shortlist.ts`
- `src/demos/store/pageTools.ts`
- `src/demos/store/catalog.ts`

## More

- [Source](https://docs.mindset.ai/demos/store/source)
- [How it works](https://docs.mindset.ai/demos/store/how)
- [Put an agent on your page](https://docs.mindset.ai/docs/put-an-agent-on-your-page)
- [The mindset-agent element](https://docs.mindset.ai/docs/the-mindset-agent-element)
- [Add a function](https://docs.mindset.ai/docs/build-a-function)
- [Test behavior](https://docs.mindset.ai/docs/test-an-agents-behavior)
