← all demos

Tool Inspector

the other half of document.modelContext

{{ isSupported ? 'WebMCP active — ' + tools.length + ' tools discovered' : 'no getTools() here — nothing to discover' }}

"add a note about the boat, then read the notebook back to me"

Every other demo on this site answers an agent. This page is the agent: useRegisteredTools() wraps getTools(), executeTool() and the toolchange event, which is what an in-page assistant or a dev panel is built out of. The notebook below is here so there is something to discover — its tools and the panel are two halves of the same page talking through the browser.

The notebook (the side being inspected)

  • {{ i }}{{ note }}

Empty.

That checkbox is the composable's enabled option. Tick it and the tool appears in the panel below on its own — no refresh, no polling: the browser fires toolchange and the list re-reads itself.

Discovered tools (the side doing the inspecting)

This browser has a modelContext that can register tools but not discover them, so there is nothing to list.

{{ error.message }}

No tools registered on this document.

{{ selected.name }} — arguments

{{ selected.title || selected.description }}

registered by {{ selected.origin }}

{{ failure }}

Input schema, as the browser reports it

{{ selected.inputSchema ? pretty(selected.inputSchema) : 'none — this tool takes no arguments' }}

Tool activity (the far end of each call)

  1. {{ entry.tool }} {{ entry.args }} {{ entry.result }} {{ entry.ms }}