Demos

Working Mindset agents, each one showing off a feature. Open one and try it.

Every feature in one trip plannerPlan a Lisbon trip, and the Features tab lights each feature as it fires.
- Scripts
- Situational awareness
- Functions
- Widgets
- Page tools
- Connections and approvals
Trip planner · Wayfarer Travel

Situational awareness and page tools

The page tells the agent what’s on screen, and page tools let the agent change it.

Situational awarenessSelect a delayed shipment and ask about it: an agent with no tools answers from the page.What’s wrong with this one? · Relay
Page toolsAsk for a tent: it filters the grid, highlights its pick and adds it to your basket.Also uses Situational awareness, FunctionsStore assistant · Northwind Outdoor
A copilot for complex formsIt fills the HR form field by field, flags a salary above its band and leaves Save to you.Also uses Page tools, Situational awareness, FunctionsAdd a new employee · Plinth

Resources the agent uses

Functions, widgets, scripts and connections, built in Mindset.

Embedding

The agent element on your page, or your own UI drawn by your app.

Store assistant · Northwind Outdoor

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.

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.

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.

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.

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"
      },
      …