The Complete Production SOP: How to Deploy and Run cmdk Fast Keyboard-Driven Command Menu Palette in Autonomous AI Agents

'use client';

import * as React from 'react';
import { Command } from 'cmdk';
import { useRouter } from 'next/navigation';

interface CommandItemAction {
  id: string;
  label: string;
  group: string;
  onSelect: () => void;
}

export function CommandMenu() {
  const [open, setOpen] = React.useState<boolean>(false);
  const router = useRouter();

  React.useEffect(() => {
    const down = (e: KeyboardEvent) => {
      if (e.key === 'k' && (e.metaKey || e.ctrlKey)) {
        e.preventDefault();
        setOpen((prev) => !prev);
      }
    };
    document.addEventListener('keydown', down);
    return () => document.removeEventListener('keydown', down);
  }, []);

  const actions: CommandItemAction[] = [
    { id: 'home', label: 'Go to Dashboard', group: 'Navigation', onSelect: () => router.push('/dashboard') },
    { id: 'settings', label: 'Account Settings', group: 'Navigation', onSelect: () => router.push('/settings') },
    { id: 'docs', label: 'Documentation', group: 'Help', onSelect: () => window.open('https://docs.askills.dev', '_blank') },
  ];

  return (
    <Command.Dialog open={open} onOpenChange={setOpen} label="Global Command Menu">
      <Command.Input placeholder="Type a command or search..." />
      <Command.List>
        <Command.Empty>No results found.</Command.Empty>
        <Command.Group heading="Navigation">
          {actions.filter(a => a.group === 'Navigation').map(item => (
            <Command.Item
              key={item.id}
              value={item.label}
              onSelect={() => {
                item.onSelect();
                setOpen(false);
              }}
            >
              {item.label}
            </Command.Item>
          ))}
        </Command.Group>
        <Command.Group heading="Help">
          {actions.filter(a => a.group === 'Help').map(item => (
            <Command.Item
              key={item.id}
              value={item.label}
              onSelect={() => {
                item.onSelect();
                setOpen(false);
              }}
            >
              {item.label}
            </Command.Item>
          ))}
        </Command.Group>
      </Command.List>
    </Command.Dialog>
  );
}

[cmdk-root] {
  max-width: 640px;
  width: 100%;
  background: var(--surface-bg, #ffffff);
  border-radius: 12px;
  box-shadow: 0 16px 70px rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(0, 0, 0, 0.1);
}

[cmdk-input] {
  width: 100%;
  border: none;
  padding: 16px;
  font-size: 16px;
  outline: none;
  background: transparent;
}

[cmdk-item] {
  padding: 12px 16px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
}

[cmdk-item][data-selected='true'] {
  background: #f0f4ff;
  color: #1a56db;
}