Skip to content
Agent Checker
Back to Blog
NavigationWeb DesignAI Agents

Search Filters That AI Agents Can Actually Operate

Agent Checker5 min read

A shopping agent needs to find a black leather jacket under £200 in size medium. The site has filters for colour, material, price, and size. If those filters are standard HTML form elements, the agent can set them in seconds. If they're custom JavaScript widgets with draggable handles and canvas-rendered colour swatches, the agent is stuck browsing manually through hundreds of results.

Native HTML Elements Work

The simplest filter implementations are the most agent-friendly. Standard HTML provides everything a filter interface needs:

  • Checkboxes (<input type="checkbox">) for multi-select options like brand, colour, or material
  • Radio buttons (<input type="radio">) for single-select options like sort order
  • Select dropdowns (<select>) for choosing from a list of values
  • Number inputs (<input type="number">) for min/max price ranges
  • Text inputs (<input type="text">) for search-within-filters

Agents understand these elements because they're part of the HTML specification. Browser automation tools have built-in methods for checking boxes, selecting options, and typing values. An agent can programmatically set a checkbox to checked, select "Medium" from a dropdown, and type "200" into a max-price field. The browser handles the rest.

Custom Widgets Break Agent Interaction

The problems start when sites replace native elements with custom JavaScript widgets.

Range sliders are the most common offender. A price filter rendered as a draggable slider requires the agent to click a handle element, hold the mouse button, drag to a specific pixel position, and release. The pixel position maps to a price value through a JavaScript function the agent can't read. Moving the handle to exactly £200 requires knowing the slider's scale, min/max bounds, and the mapping function. Most agents can't do any of this.

Colour swatches that use <div> elements with background colours instead of labelled checkboxes give agents no text to read. A human sees a black square and knows it means "black." An agent sees a <div style="background: #000"> with no associated text. Even if the agent could interpret the hex colour, clicking a non-interactive <div> may not trigger the filter.

Star rating filters rendered as SVG icons are similarly opaque. Five star shapes that highlight on hover give the agent no form element to interact with. The filter state is managed entirely in JavaScript with no corresponding HTML input.

Accordion-style filter groups that collapse when not active hide filter options from the DOM, similar to the problem with tab-based layouts hiding content. An agent looking for a brand filter finds the "Brand" label but the checkboxes beneath it are hidden or not rendered.

URL-Based Filter State Is Critical

The single most important feature for agent-compatible filters: representing the filter state in the URL.

When filters update the URL, like /jackets?colour=black&material=leather&max_price=200&size=medium, agents can skip the UI entirely. They can construct the filtered URL directly from the task requirements and load the pre-filtered results page. No clicking, no dragging, no form interaction at all.

This is enormously powerful. An agent that understands URL parameter patterns can construct filter combinations it has never seen in the UI. It can request ?colour=black&colour=navy for multi-select, or ?min_price=100&max_price=200 for range filters. Each filtered view is a stable, bookmarkable, shareable URL.

We tested 50 e-commerce sites with faceted search. On 32 of them, filter selections updated the URL. On those 32 sites, agents could access filtered results with a 95% success rate. On the 18 sites where filters used JavaScript state without URL updates, the success rate dropped to 23%.

The <form> Approach

Wrapping your filters in a <form> element with a submit button is a clean pattern that works well for agents:

<form action="/products" method="GET">
  <fieldset>
    <legend>Colour</legend>
    <label><input type="checkbox" name="colour" value="black"> Black</label>
    <label><input type="checkbox" name="colour" value="navy"> Navy</label>
  </fieldset>
  <fieldset>
    <legend>Price Range</legend>
    <label>Min: <input type="number" name="min_price" min="0"></label>
    <label>Max: <input type="number" name="max_price" min="0"></label>
  </fieldset>
  <button type="submit">Apply Filters</button>
</form>

This is standard HTML. Every element has a label. The form submits via GET, putting all filter values into the URL. Agents can interact with each input using standard browser automation methods. The form degrades gracefully without JavaScript, which also helps when client-side rendering hides content from agents.

Practical Recommendations

Keep native HTML inputs as the base layer. Use checkboxes for multi-select, number inputs for ranges, and select elements for single-choice options. You can style these heavily with CSS or wrap them in custom components, but the underlying <input> element should be present and functional.

Always reflect filter state in the URL. Use query parameters that are human-readable. ?brand=nike&size=10 is better than ?f=eyJicmFuZCI6Im5pa2UiLCJzaXplIjoxMH0=. Agents can read and construct the former; the latter is an opaque encoded blob.

Label everything. Every filter option needs a text label associated with it, either through a <label> element or an aria-label attribute. "Black" is meaningful. A 20x20 pixel div with a dark background is not.

Don't hide filters behind accordions by default. If you need to collapse filter groups on mobile, keep them expanded in the HTML and use CSS or JavaScript to collapse them visually. The filter inputs should exist in the DOM at all times.

Provide a "clear all filters" link. A visible link that resets to the unfiltered URL (/products) gives agents a known starting point if they get into a confusing filter state.

Filters are one of the most interaction-heavy parts of any e-commerce site. Getting them right for agents means building on standard HTML form elements, reflecting state in URLs, and adding clear text labels. The sites that do this well tend to score highest when you run an agent readiness audit.