# Widget round trip demo

> Widgets are rich UI in the chat that send the visitor’s choice back to the agent. On a coffee roaster’s product page the agent shows a grind picker; a tap goes back as a turn, and the page’s grind selector and brew card change in reply.

Pattern: Widget round trip. Brand: Kettle & Co. Tags: widgets, sendToAgent, page tools, functions, runtime events, drop-in element.

## What it shows

- A **widget**, `kettle-grind-picker`, rendered natively by `<mindset-agent>`: four buttons, each a `sendToAgent` action that posts "Grind: Filter" back as the next turn
- The agent answering that turn with the page tool `set_grind`, so the product page’s grind selector changes and is marked "Set by the roaster"
- A function over literal brew data, `kettle-brew-guide`, whose filter row returns "15 g to 250 ml at 200°F"
- The brew card drawn by the page from the function’s `tool_end` output, so the recipe on the page is the one the function returned
- The selected grind and the cart sent as situational awareness, and `add_to_bag` refusing until a grind is set

## Files

- `demos/kettle/demo.json`
- `demos/kettle/widgets/kettle-grind-picker.json`
- `demos/kettle/functions/kettle-brew-guide.json`
- `demos/kettle/prompt/policy-rules.md`
- `src/demos/kettle/index.tsx`
- `src/demos/kettle/pageTools.ts`
- `src/demos/kettle/brew.ts`
- `src/content/demos/kettle.ts`
- `src/content/demos/kettle.md`

## More

- [Source](https://docs4.mindset.ai/demos/kettle/source)
- [How it works](https://docs4.mindset.ai/demos/kettle/how)
- [Build a widget](https://docs4.mindset.ai/docs/ams/build-a-widget)
- [Build a function](https://docs4.mindset.ai/docs/ams/build-a-function)
- [The mindset-agent element](https://docs4.mindset.ai/docs/sdk/the-mindset-agent-element)
- [Put an agent on your page](https://docs4.mindset.ai/docs/sdk/put-an-agent-on-your-page)
- [Events reference](https://docs4.mindset.ai/docs/sdk/events-reference)