You know what separates apps that feel professional from apps that feel like homework projects? The search experience. Specifically, that cmd+k command palette that Notion, Linear, and VS Code all have—the one that makes you feel like a power user.
Here's the problem: most AI prompts for search components generate garbage. A basic input field with no keyboard support. Maybe a dropdown that breaks on mobile. And definitely no debouncing because apparently the AI wants to DDoS your own API.
I spent two weeks testing AI search bar prompts and command palette prompts across every major AI coding tool. Most failed. But some? Some generated the kind of search UIs that make users go "wait, this is actually good."
Let me show you what worked.
Key Takeaways:
- Generic "create a search bar" prompts fail—you need to specify keyboard shortcuts, debouncing, and result categories
- The cmd+k pattern requires specific instructions for modal focus trapping and escape handling
- Always ask for debounced API calls (300-500ms) or your search will hammer servers
- Spotlight-style global search needs explicit z-index and overlay specifications
In This Article
- Why Most Search Prompts Fail
- Basic Search Bar Prompts
- Command Palette (Cmd+K) Prompts
- Keyboard Shortcuts Integration
- Search with Filters
- Spotlight-Style Global Search
- Real-time Search with Debouncing
- Common Mistakes
- FAQ
Why Most Search Prompts Fail
Here's the uncomfortable truth: AI doesn't understand what makes search feel good.
When you write "create a search bar," the AI thinks you want an input field with maybe a magnifying glass icon. But real search components need:
| Feature | What AI Gives You | What You Actually Need |
|---|---|---|
| Keyboard support | None | Cmd+K to open, Escape to close, arrow keys for results |
| Performance | Instant API calls on every keystroke | Debounced requests (300ms minimum) |
| Results display | Basic list | Categorized, keyboard-navigable, highlighted matches |
| Focus management | Broken or missing | Proper focus trap in modal, return focus on close |
| Accessibility | Afterthought | ARIA labels, live regions for results, screen reader support |
The difference between a mediocre prompt and a great one is specificity. You need to spell out each of these features, or the AI will skip them.
Basic Search Bar Prompts (That Don't Suck)
Let's start simple. Here's a prompt that actually generates a usable search bar:
Create a search bar component with: - Input with search icon on left, clear button on right (shows when text exists) - Placeholder: "Search..." - Focus ring with blue highlight - Results dropdown that appears when typing (minimum 2 characters) - Results show title and subtitle, highlight matching text - Click outside closes dropdown - Loading spinner while fetching - "No results found" empty state - Keyboard: Enter selects first result, Escape clears and closes - Debounce input by 300ms before triggering search callback Use Tailwind CSS, React, and TypeScript.
That's 12 specific requirements. And honestly? That's the minimum for a search bar that doesn't feel broken.
Want to try this yourself?
Variant: Search Bar in Header
Create a search bar for a site header: - Compact by default (icon only on mobile, expands on focus) - Max width 400px on desktop - White background with subtle shadow - Results dropdown aligned to right edge - Recent searches section at top of results - Keyboard shortcut hint (⌘K) shown when collapsed Use shadcn/ui components with Tailwind.
This one's great for landing pages and marketing sites where you want search available but not dominating the UI.
Command Palette (Cmd+K) Prompts
This is where it gets interesting. The command palette pattern—that modal that opens when you press cmd+k—has become the gold standard for power-user navigation. Every serious SaaS app has one now.
But the prompts for this are tricky. Here's one that works:
Create a command palette component (cmd+k menu): - Opens with Cmd+K (Mac) or Ctrl+K (Windows) keyboard shortcut - Modal with backdrop blur overlay - Search input auto-focused on open - Commands organized in categories: "Navigation", "Actions", "Settings" - Each command shows: icon, label, optional keyboard shortcut badge - Arrow keys navigate between items, Enter executes - Escape closes modal, returns focus to previous element - Fuzzy search matching on command labels - Recent commands section at top - No results state with helpful suggestions - Smooth fade-in animation (150ms) Use cmdk library, React, TypeScript, Tailwind.
The magic ingredient here is specifying the cmdk library. It handles a ton of edge cases—keyboard navigation, focus management, the fuzzy search algorithm—that would take forever to build from scratch.
Want to try this yourself?
Variant: Command Palette with Nested Commands
Create a command palette with nested navigation: - Top level shows main categories - Selecting a category reveals sub-commands (breadcrumb navigation) - Back button or Backspace returns to parent level - Current path shown as breadcrumb at top - Each level maintains independent search filtering Example structure: - "Go to..." > Pages, Projects, Settings - "Create..." > New Page, New Project, New Task - "Toggle..." > Dark Mode, Sidebar, Notifications
This nested pattern is what Notion uses, and it's surprisingly effective for apps with lots of commands.
Adding Keyboard Shortcuts to Search
Here's the hill I'll die on: if your search doesn't have keyboard shortcuts, it's not really search. It's a form input cosplaying as search.
Create a search component with full keyboard support: - Cmd+K or Ctrl+K opens search modal - Escape closes (at any level) - Arrow Up/Down navigates results - Enter selects highlighted result - Tab moves between result categories - Cmd+Enter opens result in new tab (if applicable) - Numbers 1-9 select results directly (like Alfred) - Keyboard hint badges shown next to actions - Focus visible indicators for accessibility React, TypeScript, Tailwind.
The number shortcuts are what separate good search from great search. Watch someone who uses Alfred or Raycast—they almost never touch their mouse.
If your AI outputs don't include proper keyboard navigation, check out our modal prompts guide for focus management patterns that actually work.
Search with Filters and Categories
Plain search is fine for simple apps. But the moment you have different content types—docs, users, projects—you need filters.
Create a search interface with filters: - Search input at top - Filter row below: content type tabs (All, Docs, People, Projects) - Each tab shows result count badge - Results grouped by type with headers - Each result type has custom display template: - Docs: title, excerpt, last updated - People: avatar, name, role, department - Projects: icon, name, status badge, member count - Filters persist when typing - Clear all filters button - URL params sync for shareable filtered searches Tailwind, React, TypeScript. Include sample data.
The URL sync is crucial and often forgotten. Users expect to share a link to their filtered search results.
Variant: Faceted Search
Create a faceted search component: - Main search input - Sidebar with filter facets: - Date range picker - Multi-select checkboxes for categories - Price range slider - Toggle for "Active only" - Applied filters shown as removable chips above results - "X results" count that updates in real-time - Reset all filters button - Responsive: filters collapse to modal on mobile
This pattern is everywhere in e-commerce and enterprise apps. If you're building something like a product catalog, this is the prompt. Combine it with our data table prompts for a complete search-and-browse experience.
Spotlight-Style Global Search
You know that macOS Spotlight feeling? Search anything from anywhere? That's what we're building here.
Create a global spotlight search: - Triggered by Cmd+Space or Cmd+K - Centers on screen with 40% top margin - Large search input (24px font) - Instant results as you type (debounced 200ms) - Result categories: - Quick Actions (at top) - Pages - Recent Items - Files - People - Each category shows max 3 items with "View all" link - Selected item shows preview pane on right (on desktop) - Animations: fade in backdrop, slide down panel - z-index: 9999 to overlay everything - Portal render to body to escape parent positioning React, TypeScript, Tailwind. Use Radix Dialog for accessibility.
Two things worth noting: the portal render and z-index are easy to forget but cause major headaches. Without them, your spotlight can get clipped or hidden by other positioned elements.
Real-time Search with Debouncing
Here's what nobody tells you about search prompts: the debouncing is more important than the UI.
Create a real-time search with proper performance: - Search triggers on input change (not on submit) - Debounce delay: 300ms for typing, 500ms for slow connections - Cancel previous request when new input arrives - Loading states: - Subtle spinner in input after 200ms - Skeleton placeholders for results - Never block UI while loading - Cache recent searches (localStorage, max 50) - Show cached results instantly, then update when API returns - Error state with retry button - Rate limiting: max 2 requests per second Use React Query for data fetching, React, Tailwind.
The caching pattern here is what makes search feel instant. Show the user something immediately—even if it's slightly stale—then update when fresh data arrives.
This is honestly more important than any visual polish. A beautiful search that lags 2 seconds on every keystroke is worse than an ugly search that responds instantly.
Common Mistakes and How to Avoid Them
After testing dozens of search prompts, here are the patterns that consistently fail:
Mistake 1: No Debouncing
Bad prompt: "Create a search that shows results as you type" What happens: API called on every keystroke. Hello, rate limiting. Fix: Always specify debounce timing (300ms minimum).
Mistake 2: Forgetting Mobile
Bad prompt: "Create a cmd+k command palette" What happens: Works great on desktop, completely inaccessible on mobile. Fix: Add "Include mobile trigger button in header" or responsive handling.
Mistake 3: Missing Focus Management
Bad prompt: "Create a search modal" What happens: Focus escapes modal, keyboard navigation broken, accessibility nightmare. Fix: Use Dialog components from Radix or Headless UI. Specify focus trap behavior.
Mistake 4: No Empty States
Bad prompt: "Show results in a dropdown" What happens: User types, nothing matches, sees a blank dropdown. Confusion ensues. Fix: Always include "No results" state and helpful suggestions.
Mistake 5: Ignoring Accessibility
This one's a big deal. 96% of AI-generated UIs have accessibility issues. For search, that means:
- Missing ARIA labels
- No screen reader announcements for results
- Poor contrast on selected items
- No keyboard navigation
Check out our accessibility prompts guide to make sure your search doesn't exclude users.
For more prompt patterns that actually generate usable components, our complete prompt collection has 300+ templates across every UI category.
Frequently Asked Questions
What's the best library for building command palettes with AI?
The cmdk library (by Pacos from Vercel) handles most edge cases out of the box. It's what Vercel, Linear, and other top apps use. When prompting, specify "use cmdk library" and the AI will scaffold the component correctly.
How do I make my AI-generated search accessible?
Add explicit accessibility requirements to your prompt: ARIA labels, keyboard navigation, focus visible indicators, and screen reader announcements for result counts. Better yet, tell the AI to use Radix Dialog or Headless UI—these handle accessibility patterns by default.
Why does my command palette open behind other elements?
Two common causes: missing z-index (specify z-50 or higher) or not rendering as a portal. Add "portal render to body" to your prompt so the modal escapes parent stacking contexts.
Should I debounce search on input or on submit?
Depends on your app. For real-time search-as-you-type, debounce 300-500ms. For explicit search (user clicks button or presses Enter), no debounce needed. Specify which pattern you want in your prompt.
Can AI build fuzzy search matching?
Yes, but specify it explicitly. "Fuzzy search matching" or "typo-tolerant search" in your prompt. For complex fuzzy matching, ask for Fuse.js integration—it handles ranking and scoring well.
You Might Also Like
- AI Modal Prompts: 30+ Templates That Convert - Focus management patterns for overlays and dialogs
- AI Navbar & Footer Prompts: 40+ Templates - Navigation components that complement your search
- AI Sidebar Prompts: 30+ Templates That Work - Drawer navigation for SaaS apps
Written by the Fardino Team. We build AI tools for frontend developers. Try Fardino free →
