Overview
How might we let people search, jump, and run AI actions from one keyboard-first palette without leaving the page?
When power users need speed everywhere
- Apps where Cmd+K already means “find anything” — pages, settings, and now AI actions in one place.
- Products with many destinations and AI transforms that should stay off the main canvas.
- Desktop-first workflows where typing beats hunting menus.
- Surfaces that also expose slash commands in a composer — the bar is global; slash is in-input.
When a few visible buttons are enough
- Mobile-only products where keyboard shortcuts and palettes are awkward.
- Simple apps with fewer than a handful of actions, where a visible button is clearer.
- Audiences that never discover shortcut UX and get no on-screen hint.
States
Design open → filter across Search / Jump to / Actions → run → return.
Closed
The canvas is calm. A ⌘K hint in the chrome makes search, navigation, and AI actions discoverable.
Open
Shortcut or button opens the palette. Focus lands in the query field immediately.
Filtering
Typing narrows results across Search, Jump to, and Actions. Groups stay labeled so the job stays clear.
Highlighting
Arrow keys or hover move the active row. Enter runs the highlighted item.
Running
Search highlights a hit, Jump opens a page, or an AI action rewrites the current doc. The palette closes so the result is visible.
Done
Focus returns to the canvas. Status shows what ran; reset or ⌘K again continues the loop.
Key UX elements
Three jobs in one palette — keep them grouped so people know what they are about to do.
Bind a global shortcut and show it.
Cmd+K / Ctrl+K plus an on-screen ⌘K control so the feature is not keyboard-only folklore.
Focus search the moment it opens.
One field filters across search hits, destinations, and AI actions.
Group Search, Jump to, and Actions.
Labeled sections beat a flat list. AI rows should say they apply to the current page.
Make Enter, arrows, and Esc first-class.
Power users should never need the mouse. Escape closes without applying.
Show the outcome on the canvas.
Search highlights, Jump changes the page, Actions rewrite in place — then close the palette.
Mirror critical commands in visible UI.
Menus or tooltips that show the same actions keep newcomers from depending on shortcuts alone.
Anti-patterns to avoid
Cmd+K with no empty-state hint or first-run tip, so the feature stays invisible.
Mixing unrelated navigation, settings, and destructive actions without grouping.
No fuzzy search, forcing users to remember exact command names.
Command bar and slash menu that diverge in available actions with no shared model.
How products use it
| Product | Implementation |
|---|---|
| Cursor | Cmd+K inline AI edits and command palette for agent and editor actions. |
| Notion | Quick find / AI command surfaces for pages and generation. |
| Linear / modern SaaS | Cmd+K navigation and actions, increasingly with AI entries. |
| VS Code / GitHub Copilot | Command palette and inline AI invoke from the keyboard. |
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 "Command Bar" AI interface design pattern.
Pattern Definition:Frequently asked questions
What is an AI command bar?
An AI command bar is a keyboard-activated palette (often Cmd+K) for running prompts, tools, and navigation from anywhere in the app without hunting through menus.
How is a command bar different from slash commands?
Slash commands open from inside the composer while typing. A command bar is usually a global overlay from a shortcut, available even when the composer is not focused.
How do I make Cmd+K discoverable?
Show the shortcut in empty states, tooltips, and a first-run tip. Mirror important commands in visible menus so keyboard-only UX is not the only path.