24 interactive patternsSynthetic fixtures · no performance claims

WebMCP difference gallery

See the contract, state change, and safety boundary.

Move through the same task before and after an explicit tool contract. Inspect example inputs and results, watch verification state change, and test where human review belongs.

Explore the patterns
6 patterns

Value

Where explicit actions remove interface guesswork.

6 patterns

Contract design

How names, schemas, state, and lifecycle make tools dependable.

6 patterns

Security

How authority, data, and consequence boundaries stay visible.

6 patterns

Reliability

How tools fail, recover, abstain, and degrade gracefully.

Pattern library

Explore one boundary at a time.

Every pattern is a synthetic teaching fixture. The flows demonstrate contract shape and verification logic; they do not claim measured agent speed, success, or production compatibility.

ValueIllustrative · synthetic

Search · compare · shortlist

Catalog research without selector archaeology

Turn a filter-heavy catalog journey into one explicit search contract and a verifiable shortlist.

Design lesson

The value is not fewer pixels. It is a stable action with constrained inputs and a result the interface can also show.

Failure mode

The agent can otherwise miss a constraint or mistake visual order for ranking.

Interactive before flow

Inference-heavy interface

Step 1 of 3

Interpret filters

Map the goal to price, feature, and rating controls.

Visible state

Intent reconstructed from UI labels

Verification state

Step progression only reveals the teaching flow. No verification check has run.

  • Every returned item satisfies the filtersNot evaluated
  • Visible comparison uses the returned stable IDsNot evaluated

Illustrative contract shape

compare_catalog_items

{
  "name": "compare_catalog_items",
  "title": "Compare catalog items",
  "description": "Find and compare public catalog items using explicit constraints.",
  "inputSchema": {
    "type": "object",
    "properties": {
      "query": {
        "type": "string",
        "maxLength": 120,
        "description": "Words to match in the public catalog."
      },
      "max_price": {
        "type": "number",
        "minimum": 0,
        "description": "Maximum synthetic price."
      },
      "required_features": {
        "type": "array",
        "maxItems": 6,
        "uniqueItems": true,
        "items": {
          "type": "string",
          "maxLength": 40
        }
      }
    },
    "required": [
      "query"
    ],
    "additionalProperties": false
  },
  "annotations": {
    "readOnlyHint": true,
    "untrustedContentHint": true
  }
}
Evidence status: Illustrative synthetic pattern. This pattern documents a design target and its verification seam. It is not a claim about third-party sites, browser support, agent selection reliability, or measured lift.