Plain HTML counter

This demo shows putting an agent on your page. Watch the strip above the store: it lights once the counter on the left, mounted by the snippet in the code panel at the foot of the store, has answered your first question. The marks beside the snippet's lines show each step happen.

Ferrier & Sons is a made-up hardware store with the kind of website someone built by hand and still updates themselves. That is the point of this demo. A site like this has no build step and no framework, so the question it answers is the simplest one: what is the least you have to add to a page to put a Mindset agent on it?

The whole integration

The answer is three things, and the panel at the foot of the store shows all of them:

• A script tag for the served SDK, https://eu.mindset.ai/sdk/mindset-agent.js. It registers the mindset-agent tag. Nothing is installed or bundled.
• One element, <mindset-agent agent="ferrier">. It draws nothing until it is configured.
• A few lines of JavaScript that find the element and call configure({ getSession }). getSession fetches a session from the page's own backend and returns the response body unchanged. The SDK calls it as soon as configure() runs, and again whenever it needs a fresh session, so there is no refresh code. The listener on mindset:error prints any problem with its stable code.

It is the snippet from Put an agent on your page, with two small changes. The element has an id, because this docs site already has its own guide agent on the page, and document.querySelector("mindset-agent") would find that one first. The session comes from this site's demo route, /api/demo-session?agent=ferrier, which holds the org API key on the server, as your backend would.

The code on screen is the code that ran

The page doesn't mount the counter with a React component and then show you a tidier version. The snippet lives in one string, and the page runs that string: it loads the script the snippet names, creates the tag the snippet writes, with its attributes, in the counter slot, and runs the snippet's inline script as written. That script calls configure() itself. The only thing the page adds is a watch on fetch, so it can mark each line as it happens: the script loaded, the element placed, the session request answered and its status. A test renders the page with a changed snippet and checks that the change is both shown and run.

The counter

The agent, ferrier, is configuration: five prompt fields, a model and a grant for one function. ferrier-parts holds the store's twelve hinges, screws and locks as literal data, with sizes and prices in dollars, then keeps the ones in the category and price you asked for, scores them against your words and returns the best six. It reaches nothing outside, so it is cheap and always gives the same answer.

The element streams every run event to the page. When a ferrier-parts call ends, its tool_end event carries the result, and the page tags those parts on the shelf with a yellow Pulled for you label. No page tool does that, because the snippet registers none. The shelf only listens. The pane under the demo lists each call with its arguments, result and timing.

Build the same thing

• Copy the snippet: Put an agent on your page and The Mindset agent element.
• Write the session endpoint: Create a session for your users.
• Listen to the run: Events reference.
• Write the function: Build a function.

The store, its stock and its prices are sample data. Nothing is sold or charged.