Demos / Plain HTML · Ferrier & Sons

Plain HTML counter

Put an agent on your page with a script tag, one element and a few lines of JavaScript. A hardware store with a hand-made website shows that snippet and runs it to mount its counter.

A script tag, one element and a few lines of JavaScript put the counter on the page.

The snippet

This is the whole integration. getSession asks your backend for a session, so the API key never reaches the browser.

src/demos/ferrier/snippet.ts

export const FERRIER_SNIPPET = `<script src="${AGENT_SDK_SRC}"></script>
<mindset-agent id="${ELEMENT_ID}" agent="${AGENT_HANDLE}"></mindset-agent>
<script>
  const agent = document.getElementById("${ELEMENT_ID}");
  …
  agent.configure({
    getSession: async () => {
      const r = await fetch("${DEMO_SESSION_PATH}?agent=${AGENT_HANDLE}");
      if (!r.ok) throw new Error("Could not start a session");
      return r.json();
    },
  });
</script>`

The agent

No code, just configuration: a model, embedding only, and its prompt files.

demos/ferrier/demo.json

"agent": {
  "handle": "ferrier",
  …
  "llmModel": "claude-haiku-4-5",
  "availability": { "embed": true, "hub": false, "api": false, "delegation": false, "schedules": false, "triggers": false },
  …
},

The parts search

A function ranks twelve sample parts in steps the platform runs.

demos/ferrier/functions/ferrier-parts.json

{
  "id": "ranked",
  "heading": "Sort by matches, keeping price order within a tie",
  "do": {
    "$sortBy": {
      "items": {
        "$bind": "steps.byPrice.result"
      },
      "as": "p",
      "by": "matches",
      "dir": "desc"
    }
  }
},

Tagging the shelf

When the search ends, the page reads its result from the run's events and tags those parts.

src/demos/ferrier/index.tsx

const onRuntimeEvent = useCallback((ev: AnyEvent) => {
  …
  if (e.type !== 'tool_end' || typeof e.toolName !== 'string' || !isPartsTool(e.toolName) || e.isError || e.refused) return
  const skus = skusOf(e.output)
  …
}, [])