Skip to main content

​
Get Started in 3 Steps

Transform your site from guesswork to clarity for AI agents.
1

Identify Key Actions

Find the primary user actions on your most important pages:
  • Add to cart / Buy now
  • Submit forms
  • Search queries
  • Primary navigation
2

Add WCP Annotations

Add data-wcp attributes to those elements
3

Test with AI Agents

Verify AI agents can now interact reliably with your site

​
Example: E-commerce Product Page

​
Before WCP

<div class="product-card">
  <button class="btn btn-primary" onclick="addToCart()">
    Add to Cart
  </button>
  <button class="btn btn-secondary" onclick="buyNow()">
    Buy Now
  </button>
</div>
AI agent sees: Generic buttons with unclear behavior

​
After WCP

<div class="product-card" data-wcp="region:product">
  <!-- Primary action: Add to cart without navigation -->
  <button class="btn btn-primary" 
          data-wcp="action:add; effect:async; target:#cart; primary:true"
          onclick="addToCart()">
    Add to Cart
  </button>
  
  <!-- Secondary action: Navigate to checkout -->
  <button class="btn btn-secondary"
          data-wcp="action:purchase; effect:navigate"
          onclick="buyNow()">
    Buy Now
  </button>
</div>
AI agent knows:
  • ✅ First button adds to cart without navigation
  • ✅ Second button navigates to checkout
  • ✅ First button is the primary action

​
Common Patterns

<form data-wcp="action:submit; effect:async; target:#notification">
  <input type="email" name="email" />
  <button type="submit" 
          data-wcp="action:submit; effect:async; primary:true">
    Save Changes
  </button>
</form>

<div data-wcp="region:search">
  <form data-wcp="action:search; effect:async; target:#results">
    <input type="search" name="q" />
    <button data-wcp="action:search; effect:async; primary:true">
      Search
    </button>
  </form>
  
  <button data-wcp="action:filter; effect:async; target:#results">
    Tech Articles
  </button>
</div>

​
Best Practices

Start with CTAs

Annotate primary Call-to-Action buttons first for maximum impact

Mark Primary Actions

Use primary:true for the main action in each section/region

Specify Effects

Always include effect type so agents know what to expect

Use Regions

Group related elements with semantic regions

​
Optional: Registry Tracking

Track adoption by adding the registry beacon (optional): 
<meta name="wcp-registry" content="https://registry.wcp.dev/ping">
This sends a daily ping (domain + version only, no user data) to help track protocol adoption.

​
Validation

Validate your WCP implementation: 
// Check all WCP annotations
document.querySelectorAll('[data-wcp]').forEach(el => {
  console.log(el.getAttribute('data-wcp'), el);
});
Use browser DevTools to inspect and verify your WCP attributes are correctly applied.

​
Next Steps

Explore Examples

See complete implementations for your use case

Read Core Concepts

Deep dive into actions, effects, and regions

Best Practices

Learn advanced patterns and optimization tips

Join Community

Share your implementation and get help
Don’t over-annotate! Start with high-value interactions. You don’t need to annotate every single element.

View Full Specification

Need complete technical details? Read the full WCP specification.