Demos

This demo shows page tools: functions your page hands the agent so it can change what the visitor sees. Watch the strip above the store. It lights when the agent calls one, and names it, as the grid filters, a product is highlighted or the basket fills.

Northwind Outdoor is a made-up shop. The storefront on the left is ordinary React: a product grid, category chips, a comparison row and a basket. The assistant on the right is a Mindset agent embedded with the <mindset-agent> element. The agent never reaches into the page's code. It can only call the tools the page hands it, and it only knows what the page tells it.

The agent is configuration#

The agent, northwind-store, is a few prompt fields (purpose, personality, background, policy rules, output formatting), a model, and a grant for one function. There is no agent code. The definition lives in the repo under demos/northwind-store/ and is applied to the workspace through the admin MCP, so you can read exactly what the agent was given.

One function, cards from its result#

northwind-store-search-products is a function: a short pipeline the platform runs for the agent. Its first step is the catalog itself, about 30 jackets, boots, packs, tents and sleep items as literal data. The later steps are pure: keep the products that match the category, price ceiling and required features, score them against the query words, sort them, and return the top eight. No database and no outside call, so it is cheap and returns the same answer every time. The storefront imports that same JSON file, so the grid and the agent always agree on products and prices.

The page draws the comparison itself. The chat is Mindset's own <mindset-agent> element, and it streams every run event to the page. When a search call ends, its tool_end event carries the function's result, and the page shows the top three products of that search as cards above the grid, with price, rating, waterproofing, weight and colors. A wild-camping kit searches tents, sleep and packs in one turn, so those cards add up within the turn; your next question starts a fresh row. The search's top three aren't always what the agent recommends, a kit's cheaper items especially, so the agent's own pick leads the row: any product it highlights or adds to the basket moves to the front, marked "Agent's pick", with its details from the search result (or the catalog when no search that turn returned it). Each card's "Choose this" button sends your pick to the agent as a chat message naming the product id. The row stays put while the agent handles it, even if it looks the product up again before adding it to the basket. The agent doesn't call a widget to show the cards, so each search saves a tool step and a model call, and it writes one short line with its top pick.

Page tools and situational awareness#

The page registers four page tools:

• set_filters sets the category, price ceiling and features on the grid. The price ceiling and features have no controls of their own: they appear as removable pills only once the agent sets them.
• highlight_product scrolls to one product and outlines it for a moment.
• add_to_basket and remove_from_basket change the basket.

Each tool checks its arguments before it touches anything: an unknown product id, a quantity of zero, a color the product doesn't come in or a made-up feature gets an error string that says what to send instead, and the page stays as it was. The agent reads the error and tries again.

Situational awareness goes the other way. On every turn the page sends the basket (each line, whether it is waterproof, and the total), the active filters and the product in view or under the pointer. Ask "Is anything in my basket not waterproof?" and the agent answers from that, without a tool call.

Under the hood#

The pane below the demo lists every call as it happens: the function with its arguments and how long it took, and each page tool with the result string the page returned. A rejected argument shows up there too, so you can watch the agent correct itself.

Build the same thing#

• Write the function: Build a function.
• Put the agent on your page and register page tools: Put an agent on your page and The Mindset agent element.
• See how the session, tools and context fit together: Put an agent on your page.
• Pin the behavior you care about, such as "searches before it recommends": Test an agent's behavior.

All the products, prices and stock are sample data. Nothing is sold or charged.