WebMCP Declarative API

Support Ticket Form

A standard HTML form enhanced with WebMCP attributes. An AI agent can discover this form as a callable tool, understand its fields, and pre-fill or submit it on behalf of the user.

New Support Ticket

Fill out the form below or let an AI agent handle it.

agent-ready

🔎 WebMCP Attributes Explained

toolname on <form>
Required. Names the tool that this form represents. When an AI agent scans the page, it discovers a tool called submit_support_ticket. This is how the agent references the action — like a function name in an API.
tooldescription on <form>
Required. A natural-language description of what the tool does. The agent's LLM reads this to decide when to use the tool. Be specific — vague descriptions lead to the model guessing wrong.
toolautosubmit on <form>
Optional. When present, the form auto-submits after the agent fills it in. Without it, the agent pre-fills the form but waits for the user to review and click submit. This demo intentionally omits it so you can see the "human-in-the-loop" pattern.
toolparamdescription on <input> / <select> / <textarea>
Optional but recommended. Tells the agent what each field expects. Without this, the agent infers from the name, type, placeholder, and <label> — which usually works, but explicit descriptions remove ambiguity.
Events: toolactivated & toolcancel
When an agent invokes a declarative tool, a toolactivated event fires as fields are pre-filled. If the user cancels, toolcancel fires. On submit, you can check event.agentInvoked to know whether a human or an agent triggered it, and use event.respondWith() to return structured data back to the agent.

📄 The Key Markup

<form
  toolname="submit_support_ticket"
  tooldescription="Submit a customer support ticket..."
  action="/api/support/submit" method="POST">

  <input
    type="text" name="full_name" required
    toolparamdescription="Customer's full name"
  />

  <select
    name="category" required
    toolparamdescription="The type of issue: billing, technical...">
    <option value="billing">Billing</option>
    ...
  </select>

  <textarea
    name="description" required
    toolparamdescription="Detailed description of the problem..."
  ></textarea>

</form>