See What AI Agents See
When Your Website Speaks Their Language

// What an AI agent does WITHOUT WebMCP:
// 1. Take a screenshot (2,000+ tokens)
// 2. Send it to a vision model
// 3. Try to identify interactive elements
// 4. Generate mouse coordinates
// 5. Hope the layout hasn't changed

agent.screenshot() // 2,000+ tokens
  → "I see a form with fields..."
  → agent.click(342, 518) // fragile coordinates
  → agent.type("wireless headphones")
  → agent.click(780, 518) // 😬 wrong button?

// Total: ~8,000 tokens per interaction
// Reliability: ~60% (breaks on redesign)
// Speed: 3-5 seconds per action

<form action="/api/contact" method="POST"
      toolname="request_consultation"
      tooldescription="Request a free
        consultation about our services">

  <input name="name" type="text" required
    toolparamdescription="Full name" />

  <input name="email" type="email" required
    toolparamdescription="Email address" />

  <select name="service"
    toolparamdescription="Service area">
    <option value="ai">AI Solutions</option>
    <option value="design">Web Design</option>
  </select>

  <button type="submit">Send</button>
</form>

navigator.modelContext.registerTool({
  name: 'search_services',
  description: 'Search available services',
  inputSchema: {
    type: 'object',
    properties: {
      query: {
        type: 'string',
        description: 'Search keywords'
      },
      category: {
        type: 'string',
        enum: ['ai', 'design', 'marketing']
      }
    },
    required: ['query']
  },
  annotations: { readOnlyHint: true },
  async execute({ query, category }) {
    const data = await fetch(
      \`/api/services?q=\${query}\`
    );
    return {
      content: [{ type: 'text',
        text: JSON.stringify(data) }]
    };
  }
});