{"$schema":"https://velocity-ui.com/schema/registry-item.json","name":"ai-command-palette","title":"AI Command Palette","description":"A command interface for prompts, tool calls, shortcuts, and generated component history.","type":"registry:component","version":"0.8.0","status":"beta","registryDependencies":[],"dependencies":{"lucide-react":"^0.563.0","zustand":"^5.0.8"},"devDependencies":{},"files":[{"path":"src/components/velocity/ai-command-palette.tsx","type":"component","target":"src/components/velocity/ai-command-palette.tsx","content":"\"use client\";\n\nimport { useMemo, useState } from \"react\";\nimport { Bot, Command, Search, WandSparkles } from \"lucide-react\";\nimport { Button } from \"@/components/ui/button\";\nimport { Input } from \"@/components/ui/input\";\nimport { cn } from \"@/lib/utils\";\n\nconst commands = [\n  \"Generate dashboard widget\",\n  \"Create registry manifest\",\n  \"Refactor into Server Component\",\n  \"Audit accessibility states\",\n  \"Draft MDX documentation\",\n];\n\nexport function AiCommandPalette() {\n  const [query, setQuery] = useState(\"\");\n  const filtered = useMemo(\n    () => commands.filter((command) => command.toLowerCase().includes(query.toLowerCase())),\n    [query],\n  );\n\n  return (\n    <div className=\"rounded-xl border bg-card p-4 shadow-sm\">\n      <div className=\"mb-4 flex items-center gap-3\">\n        <span className=\"flex size-10 items-center justify-center rounded-lg bg-primary text-primary-foreground\">\n          <Bot className=\"size-4\" />\n        </span>\n        <div>\n          <div className=\"font-medium\">AI command palette</div>\n          <div className=\"text-sm text-muted-foreground\">Search prompts, actions, and generated drafts.</div>\n        </div>\n      </div>\n      <div className=\"relative\">\n        <Search className=\"absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground\" />\n        <Input value={query} onChange={(event) => setQuery(event.target.value)} className=\"pl-9\" placeholder=\"Search commands\" />\n      </div>\n      <div className=\"mt-3 space-y-2\">\n        {filtered.map((command, index) => (\n          <button\n            key={command}\n            className={cn(\n              \"flex w-full items-center justify-between rounded-lg border px-3 py-2 text-left text-sm transition hover:bg-accent\",\n              index === 0 && \"border-primary/40 bg-accent/50\",\n            )}\n          >\n            <span className=\"flex items-center gap-2\">\n              <Command className=\"size-3.5 text-muted-foreground\" />\n              {command}\n            </span>\n            <WandSparkles className=\"size-3.5 text-muted-foreground\" />\n          </button>\n        ))}\n      </div>\n      <Button className=\"mt-4 w-full\">Run selected command</Button>\n    </div>\n  );\n}\n"}],"cssVars":{},"meta":{"category":"ai","tags":["command","ai","productivity"],"docs":"/docs/cli","preview":"/ai"}}