Give in-browser agents your tools

How to do it

Where document.modelContext exists, call registerTool for each tool with its schema. Older builds used navigator.modelContext. Set readOnlyHint on tools that only read, and consequentialHint on tools with effects. A thrown error reaches the agent without its message, so return expected failures as data. WebMCP is a draft from a W3C Community Group, and only some browsers ship it.

Example

const modelContext = document.modelContext ?? navigator.modelContext;
if (modelContext) {
  modelContext.registerTool({
    name: 'book_call',
    description: 'Book a call at a free time slot.',
    inputSchema: { type: 'object', properties: { slot: { type: 'string' } }, required: ['slot'] },
    annotations: { consequentialHint: true },
    async execute({ slot }) {
      const res = await fetch('/api/book', {
        method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ slot }),
      });
      if (!res.ok) return { booked: false, reason: 'Slot not available, pick another' };
      return { booked: true, slot };
    },
  });
}

How to check

In a browser with WebMCP turned on, the tools appear with their schemas. Calling each one with a bad input returns a readable failure.