AI UX PlaygroundNewsletterJoin 2K+ AI designers and PMs on Substack. New teardowns, patterns, and prompts as they drop.

Commerce

Natural Language Filter

Parse free-text queries into editable filter chips for price, color, location, and similar constraints. People type naturally, then tweak structured filters without rebuilding menus.

Interactive demo

Type query to auto-filter

Overview

How might we design natural language filter so people can trust and act on AI output?

When to use

  • Essential for e-commerce platforms, marketplace applications, and discovery tools where users need to express complex search criteria naturally without navigating multiple filter menus.

When to skip

  • Faceted search with three fields where NL adds confusion.
  • Queries that must map to exact SQL with no interpretation.
  • Locales where parser quality is unproven.

Rules

  • Silent wrong chips with no way to edit one facet.

  • Parsing “under $50” into the wrong currency or unit.

  • Replacing manual filters entirely for power users.

  • No show of removed or ignored parts of the query.

Evidence

ProductImplementation
AirbnbNatural language search mapped to stay filters.
AmazonQuery understanding that surfaces category and attribute chips.
EtsySearch bar that applies parsed filters to handmade catalog.
Booking.comTrip intent phrases converted to date and amenity filters.

FAQ

What is a natural language filter?

The user types “red sneakers under 80 dollars”; the UI shows chips for color, category, and max price they can adjust.

Chips editable individually?

Yes. Each chip should delete or open a control without clearing the whole query.

NL filter vs semantic search?

NL filter structures constraints. Semantic search ranks by meaning even when keywords differ.

How handle ambiguity?

Ask a clarifying chip or show multiple interpretations before applying hard filters.