WebMCP

// Old way: Click around until something works
agent.click("#submit-button")
agent.waitFor(".success-message")
agent.scrapeText(".result")

// New way: Call structured tool
agent.callTool("book_flight", {
  origin: "BKK",
  destination: "LAX", 
  outboundDate: "2026-03-15",
  passengers: 2
})

<!-- แปลง HTML form เป็น AI tool -->
<form toolname="search_flights" 
      tooldescription="Search for available flights">
  
  <label>
    Origin:
    <input name="origin" type="text" required />
  </label>
  
  <label>
    Destination:
    <input name="destination" type="text" required />
  </label>
  
  <label>
    Date:
    <input name="date" type="date" required />
  </label>
  
  <button type="submit">Search Flights</button>
</form>

// Register a tool with JavaScript
navigator.modelContext.registerTool({
  name: "add_to_cart",
  description: "Add a product to the shopping cart",
  inputSchema: {
    type: "object",
    properties: {
      productId: { 
        type: "string",
        description: "Product ID to add" 
      },
      quantity: { 
        type: "number",
        description: "Quantity to add",
        default: 1
      }
    },
    required: ["productId"]
  },
  execute: async (params) => {
    const { productId, quantity } = params;
    
    // Your business logic here
    const result = await addToCart(productId, quantity);
    
    return {
      success: true,
      cartTotal: result.total,
      message: `Added ${quantity} item(s) to cart`
    };
  }
});

// Other methods:
// - navigator.modelContext.unregisterTool("tool_name")
// - navigator.modelContext.provideContext([...tools])
// - navigator.modelContext.clearContext()

<!-- Declarative checkout form -->
<form toolname="checkout" 
      tooldescription="Complete the purchase checkout"
      toolautosubmit="false">
  
  <input name="email" type="email" required />
  <input name="shipping_address" required />
  <select name="payment_method">
    <option value="credit_card">Credit Card</option>
    <option value="paypal">PayPal</option>
  </select>
  
  <button type="submit">Place Order</button>
</form>

<script>
// Handle agent-initiated checkout
document.querySelector('form').addEventListener('submit', (e) => {
  if (e.agentInvoked) {
    e.preventDefault();
    
    // Process checkout
    const result = await processCheckout(new FormData(e.target));
    
    // Return structured response to AI
    e.respondWith(Promise.resolve({
      orderId: result.id,
      status: 'completed',
      estimatedDelivery: result.deliveryDate
    }));
  }
});
</script>

// Imperative API for report generation
navigator.modelContext.registerTool({
  name: "generate_report",
  description: "Generate a business report for a specific date range",
  inputSchema: {
    type: "object",
    properties: {
      reportType: {
        type: "string",
        enum: ["sales", "traffic", "inventory"],
        description: "Type of report to generate"
      },
      startDate: {
        type: "string",
        format: "date",
        description: "Report start date"
      },
      endDate: {
        type: "string", 
        format: "date",
        description: "Report end date"
      },
      format: {
        type: "string",
        enum: ["pdf", "csv", "json"],
        default: "pdf"
      }
    },
    required: ["reportType", "startDate", "endDate"]
  },
  execute: async (params) => {
    const report = await generateReport(params);
    
    return {
      downloadUrl: report.url,
      fileSize: report.size,
      generatedAt: new Date().toISOString()
    };
  }
});

// Detect when AI invokes a form
form.addEventListener('submit', (e) => {
  // Check if invoked by AI agent
  if (e.agentInvoked) {
    console.log('Form submitted by AI agent!');
    e.preventDefault();
    
    // Return structured response to AI
    const result = await processForm(new FormData(e.target));
    e.respondWith(Promise.resolve(result));
  }
});

// Tool activation events
form.addEventListener('toolactivated', (e) => {
  console.log('Fields pre-filled by AI:', e.filledFields);
  // Show visual indicator to user
});

form.addEventListener('toolcancel', (e) => {
  console.log('AI cancelled the tool invocation');
  // Reset form state
});

/* Visual feedback when AI is using form */
form:tool-form-active {
  border: 2px solid #f59e0b;
  background: rgba(245, 158, 11, 0.1);
}

/* Highlight submit button during AI operation */
button:tool-submit-active {
  animation: pulse 1s infinite;
  box-shadow: 0 0 20px rgba(245, 158, 11, 0.5);
}

/* Chrome provides default placeholder styles */
input::placeholder {
  color: #94a3b8;
}