JavaScript for application workflows
The six industry playgrounds use imperative tools because their actions update carts, quotes, drafts and boards. Each tool has a named handler, explicit validation and a structured return value. You can reuse these ideas in a component-based application without replacing its human interface.
HTML annotations for an existing form
Chrome’s declarative documentation describes toolname and tooldescription on a form. Named form controls become tool parameters. By default, a user still submits the filled form; toolautosubmit opts into submission through the tool. Use that option only when automatic submission matches the action’s consequences.
<form toolname="search_listings"
tooldescription="Search fictional listings by city.">
<label>City
<input name="city" required />
</label>
<button type="submit">Search</button>
</form>
<!-- Connect the form to your actual search handler. -->Do not register the same action twice
Keep tool names unique. If both an annotated form and an imperative callback advertise an identical search, the agent has two overlapping choices. Prefer one clear registration for the action and keep the ordinary form usable.
Treat implementation details as versioned
The current draft and Chrome documentation do not agree on every discovery, invocation and cancellation detail. Try WebMCP’s local runner calls its own handlers rather than depending on the shifting executeTool input signature. Declarative code on this guide is an explanation, not a claim that declarative tools were validated in every browser.
See it in a working example.
Inspect the schema, run a call and observe the result in the page.
Open the playground