← All concepts

Concept 02 / 10

← Prev Next →

Concept 02

AI adds a second row below the existing quick filters

The current quick filter bar is preserved in row one; AI-derived chips appear in a clearly-labeled second row.

Why useful

Safe, additive behavior — power users keep the native bar, AI is a layer on top.

Key risk

Two rows can become visually busy and consume vertical space.

Example query

"Affordable hotel with free cancellation and wifi"

Section — Interactive demo · Click ✨ AI Filter to try

Interactive demo · Click ✨ AI Filter to try

All filtersHotel ratingHotel nameLoyalty & brandsIncludes breakfastPrice

Section A — End-to-end interaction flow

1 · Default

All filters✨ AI FilterHotel ratingHotel nameLoyalty & brandsIncludes breakfastPrice

›

2 · Click AI Filter

All filters✨ AI FilterHotel ratingHotel nameLoyalty & brandsIncludes breakfastPrice

›

3 · Compact input below bar

All filters✨ AI FilterHotel ratingHotel nameLoyalty & brandsIncludes breakfastPrice

Describe what you need…

›

4 · Typing

All filters✨ AI FilterHotel ratingHotel nameLoyalty & brandsIncludes breakfastPrice

Affordable hotel with free cancellation and wifi

›

5 · Applied — second row appears

All filters✨ AI FilterHotel ratingHotel nameLoyalty & brandsIncludes breakfastPrice

From your requestPrice ≤ $200×Free cancellation×Includes wifi×Edit requestClear

Section B — Static state breakouts

Default

All filters✨ AI FilterHotel ratingHotel nameLoyalty & brandsIncludes breakfastPrice

Input open

All filters✨ AI FilterHotel ratingHotel nameLoyalty & brandsIncludes breakfastPrice

Describe…

Applied — both rows

All filters✨ AI FilterHotel ratingHotel nameLoyalty & brandsIncludes breakfastPrice

From your requestPrice ≤ $200×Free cancellation×Wifi×Edit requestClear

AI row scrolls / wraps

All filters✨ AI FilterHotel ratingHotel nameLoyalty & brandsIncludes breakfastPrice

From your requestPrice ≤ $200×Free cancellation×Wifi×Breakfast×Parking×Fitness equipment×Restaurant×Edit requestClear

AI row collapsed

All filters✨ AI FilterHotel ratingHotel nameLoyalty & brandsIncludes breakfastPrice

✨ 3 AI filters appliedExpand ▾

Remove one chip

All filters✨ AI FilterHotel ratingHotel nameLoyalty & brandsIncludes breakfastPrice

From your requestPrice ≤ $200×Wifi×Edit requestClear

Clear AI → row removed

All filters✨ AI FilterHotel ratingHotel nameLoyalty & brandsIncludes breakfastPrice

Edit & regenerate

All filters✨ AI FilterHotel ratingHotel nameLoyalty & brandsIncludes breakfastPrice

Affordable with free cancellation, wifi, breakfast

No supported match

All filters✨ AI FilterHotel ratingHotel nameLoyalty & brandsIncludes breakfastPrice

✨ No supported filters matched your requestEdit · Clear

Section C — Notes & tradeoffs

What changes in the bar: Native bar untouched; a labeled second row appears below when AI is active.
Existing pills: Stay visible and interactive at all times.
AI representation: Dashed pills in a separate row prefixed 'From your request'.
Edit / remove: Per-chip remove, plus 'Edit request' and 'Clear' actions on the row.
Cross-LOB scaling: Same dual-row pattern works for flights (e.g., 'Direct + AM departures + WiFi') and cars.
Unsupported terms: Shown as a small italic note inside the AI row.

← Concept 01: AI replaces the quick filters

Concept 03: AI translates to standard pills →