Overview
How might we design natural language filter so people can trust and act on AI output?
When this pattern fits
- 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 or lighten it
- 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.
States
State model coming soon
Key UX elements
Key UX elements coming soon
Anti-patterns to avoid
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.
How products use it
| Product | Implementation |
|---|---|
| Airbnb | Natural language search mapped to stay filters. |
| Amazon | Query understanding that surfaces category and attribute chips. |
| Etsy | Search bar that applies parsed filters to handmade catalog. |
| Booking.com | Trip intent phrases converted to date and amenity filters. |
Implementation
Copy this prompt to generate a production-ready implementation in Cursor, Claude Code, Lovable, or any AI coding agent.
Generate a production-ready implementation of the "Natural Language Filter" AI interface design pattern.
Pattern Definition:Frequently asked questions
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.