WebMCP Snippet Generator

<form action="/search" method="post" toolname="searchProducts" tooldescription="Search the product catalog by keyword">
  <label for="query">Query</label>
  <input id="query" name="query" type="text" toolparamdescription="Search query for products" required />
  <label for="limit">Limit</label>
  <input id="limit" name="limit" type="number" toolparamdescription="Maximum number of results" />
  <button type="submit">Submit</button>
</form>

if (typeof navigator !== "undefined" && navigator.modelContext) {
  navigator.modelContext.registerTool({
    name: "searchProducts",
    description: "Search the product catalog by keyword",
    parameters: {
      type: "object",
      properties: {
      query: { type: "string", description: "Search query for products" },
      limit: { type: "integer", description: "Maximum number of results" }
      },
      required: ["query"]
    },
    async invoke({ query, limit }) {
      const res = await fetch("/search", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ query, limit })
      });
      if (!res.ok) throw new Error("Tool call failed: " + res.status);
      return await res.json();
    }
  });
}