# Store assistant demo: source

> The code that makes the Store assistant demo work, walked through snippet by snippet.

The page hands the agent four tools and describes itself on every turn. That is the whole integration.

## A page tool

A name, a schema and a function that runs in your page. What it returns goes back to the agent.

```ts file=src/demos/store/pageTools.ts
{
  name: 'highlight_product',
  description: 'Scroll the storefront to one product and outline it so the visitor sees it. Use the product id from the search function, e.g. "jkt-cairn".',
  jsonSchema: { type: 'object', properties: { id: { type: 'string' } }, required: ['id'], additionalProperties: false },
  execute: (args) => {
    …
    if (!host.highlight(p.value.id)) return `Error: ${p.value.name} is not on the page right now.`
    return `Highlighted ${p.value.name} (${formatPrice(p.value.price)}).`
  },
},
```

## What the visitor sees

Sent with every message, so the agent knows the basket without asking.

```ts file=src/demos/store/pageTools.ts
return {
  page: 'Northwind Outdoor storefront (demo, sample data)',
  basket: describeBasket(state.basket),
  activeFilters: describeFilters(state.filters),
  …
}
```

## Put it on the page

One hook mounts the agent with its tools and context.

```tsx file=src/demos/store/index.tsx
const agent = useDemoElement({ handle: AGENT_HANDLE, pageTools, situationalAwareness, onRuntimeEvent })
```

## The search

The agent's one function filters a sample catalog in steps the platform runs. No server, no model call.

```json file=demos/northwind-store/functions/northwind-store-search-products.json
{
  "id": "filtered",
  "heading": "Keep products that match the category, price and features",
  "do": {
    "$filter": {
      "items": {
        "$bind": "steps.catalogue.result"
      },
      …
```