Implementation And Validation · Add Webmcp · browserbase/skills · Skills Docs

Implementation And Validation · Add Webmcp · browserbase/skills · Skills Docs

<form toolname="search_catalog" tooldescription="Search the public product catalog.">
  <input
    name="query"
    required
    toolparamdescription="Words in the product name or description"
  />
  <button type="submit">Search</button>
</form>

const modelContext = navigator.modelContext || document.modelContext;

if (modelContext?.registerTool) {
  await modelContext.registerTool({
    name: "search_catalog",
    description: "Search products visible to the current user without changing application state.",
    inputSchema: {
      type: "object",
      properties: {
        query: { type: "string", minLength: 1 },
        limit: { type: "integer", minimum: 1, maximum: 20 },
      },
      required: ["query"],
      additionalProperties: false,
    },
    annotations: {
      readOnlyHint: true,
      untrustedContentHint: true,
    },
    execute: async (input) => {
      const parsed = SearchCatalogInput.parse(input);
      const response = await searchCatalog(parsed);
      return {
        results: response.items.map(({ id, name, price }) => ({ id, name, price })),
      };
    },
  });
}

{
  "timeoutMs": 5000,
  "expectedDom": [
    {
      "selector": "#last-tool",
      "text": "search_catalog"
    }
  ],
  "tools": [
    {
      "name": "search_catalog",
      "risk": "read-only",
      "expectedAnnotations": {
        "readOnly": true,
        "untrustedContent": true
      },
      "input": {
        "query": "notebook",
        "limit": 3
      },
      "expectedOutputSubset": {
        "results": []
      }
    },
    {
      "name": "submit_order",
      "risk": "consequential"
    }
  ]
}