AI agents are coming to the browser. When they arrive, they'll interact with websites that speak their language — and skip the ones that don't. The good news? Making your site AI-agent ready takes about **10 minutes** and requires **zero framework changes**. Here's exactly how to do it. --- ## The 5-Step Checklist | Step | Time | Difficulty | Impact | |------|------|-----------|--------| | 1. Add WebMCP to your forms | 3 min | Easy | 🔴 High | | 2. Create an llms.txt file | 2 min | Easy | 🟡 Medium | | 3. Add Schema.org structured data | 3 min | Easy | 🟡 Medium | | 4. Check your security headers | 1 min | Easy | 🔴 High | | 5. Verify your score | 1 min | Easy | — | --- ## Step 1: Add WebMCP to Your Forms (3 minutes) Every ` ``` ### After ```html ``` ### Best Practices for Tool Names | ✅ Good | ❌ Bad | Why | |---------|--------|-----| | `searchProducts` | `form1` | Descriptive verb-based name | | `bookAppointment` | `submit` | Tells the agent what it does | | `calculateShipping` | `calc` | Clear and specific | | `filterByCategory` | `filter` | Includes the action context | ### Best Practices for Descriptions - **Minimum 20 characters** — Give the AI agent enough context - **Describe the outcome**, not the mechanics: "Find flights between two cities" not "Submits a flight search form" - **Include what inputs are expected**: "Search products by keyword, category, or price range" ### Enhance Your Input Fields While you're there, improve your `` elements: ```html ``` Key attributes: - `type` — Tells the agent what kind of data to provide - `required` — The agent knows this field must be filled - `pattern` — Validation hints (e.g., `[A-Z]{3}` for airport codes) - `placeholder` — Example values help the agent understand format --- ## Step 2: Create an llms.txt File (2 minutes) `llms.txt` is a simple text file (like `robots.txt`) that tells AI systems what your website does and how to use it. Place it at your domain root: `https://yoursite.com/llms.txt` ### Template ```text # YourSiteName > One-sentence description of your website. ## What We Do Describe your website's main purpose and functionality in 2-3 sentences. ## Key Pages - [Homepage](https://yoursite.com/) - Main landing page - [Products](https://yoursite.com/products) - Browse our catalog - [Search](https://yoursite.com/search) - Search our database - [API Docs](https://yoursite.com/docs) - Developer documentation - [Contact](https://yoursite.com/contact) - Get in touch ## Available Tools (WebMCP) - searchProducts: Search our product catalog by keyword - filterByCategory: Filter products by category - contactUs: Submit a contact inquiry ``` ### Example for an E-Commerce Site ```text # TechGear Store > Online store for premium tech accessories and gadgets. ## What We Do TechGear Store sells curated tech accessories including phone cases, laptop stands, cables, and smart home devices. We ship worldwide with free returns. ## Key Pages - [Shop](https://techgear.store/shop) - Browse all products - [Deals](https://techgear.store/deals) - Current sales and discounts - [Search](https://techgear.store/search) - Find specific products - [Track Order](https://techgear.store/track) - Check delivery status ## Available Tools (WebMCP) - searchProducts: Search our catalog by keyword, brand, or category - trackOrder: Check delivery status with order number - applyDiscount: Apply a discount code to the cart ``` For a more detailed version, create `llms-full.txt` with additional context. --- ## Step 3: Add Schema.org Structured Data (3 minutes) Schema.org markup helps AI agents understand what your pages are about. Add JSON-LD to your page's ``: ### For a Business Website ```html ``` ### For a SaaS Product ```html ``` ### For an E-Commerce Store ```html ``` --- ## Step 4: Check Your Security Headers (1 minute) WebMCP requires a **Secure Context** (HTTPS). But there are other security considerations: ### Must Have - ✅ **HTTPS**: Your site must be served over HTTPS. No exceptions. - ✅ **No mixed content**: All resources (images, scripts, stylesheets) loaded over HTTPS ### Watch Out For - ⚠️ **Content Security Policy (CSP)**: Overly strict CSP can block AI agent scripts. Make sure your CSP doesn't block inline scripts if you use the Imperative API. - ⚠️ **X-Frame-Options**: If set to `DENY`, AI agents that use iframe-based approaches won't work. Consider `SAMEORIGIN` instead. ### Quick Check ```bash # Check your HTTPS and headers curl -sI https://yoursite.com | grep -E "HTTP|content-security|x-frame" ``` --- ## Step 5: Verify Your Score (1 minute) Go to [webmcpverify.com](https://webmcpverify.com), enter your URL, and get your score. You'll receive: - **A letter grade** (A+ to F) - **Score breakdown** across 4 categories - **Individual check results** with pass/fail status - **Fix suggestions** with copy-paste code snippets Aim for at least a **B grade** to be well-prepared for AI agents. --- ## Common Mistakes to Avoid ### 1. Forgetting `toolautosubmit` Without this attribute, the AI agent can fill in your form but can't submit it — the user has to click submit manually. For most forms, you want `toolautosubmit`. ### 2. Vague Tool Descriptions ```html

``` ### 3. Missing Input Types ```html ``` ### 4. Blocking AI Crawlers in robots.txt Check that your `robots.txt` doesn't block common AI user agents: ```text # ❌ This blocks AI agents User-agent: GPTBot Disallow: / # ✅ Allow AI agents to discover your content User-agent: GPTBot Allow: / ``` ### 5. Not Having HTTPS This is non-negotiable. WebMCP only works in Secure Contexts. If your site is still on HTTP, fix this first. --- ## What's Next? After the basics: 1. **Add more tools**: Every useful form is a potential AI tool 2. **Implement the Imperative API**: For actions that don't map to forms 3. **Add tool annotations**: `readOnlyHint`, `destructiveHint`, `idempotentHint` 4. **Monitor your score**: Run [WebMCP Verify](https://webmcpverify.com) regularly as you make changes 5. **Read the spec**: Follow the W3C WebMCP Community Group for updates --- ## Key Takeaways 1. **It takes 10 minutes** to make your site AI-agent ready 2. **Three HTML attributes** on your forms (`toolname`, `tooldescription`, `toolautosubmit`) 3. **llms.txt** tells AI what your site does (like robots.txt for humans) 4. **Schema.org JSON-LD** helps AI understand your content 5. **HTTPS is mandatory** — WebMCP requires Secure Context 6. **Check your score** at [webmcpverify.com](https://webmcpverify.com) — it's free Start with your most important form. Add three attributes. You're already ahead of 99% of websites.