Command Bar

A ⌘K palette that also asks the agent. Typing filters commands; the Ask row turns the same text into a question, and the answer replaces the list until Escape. Choose whether Enter asks or runs a command.

↑↓navigate↵select

Installation

pnpm dlx shadcn@latest add @jds/command-bar

Usage

import {
  CommandBar,
  CommandBarAnswer,
  CommandBarAsk,
  CommandBarDialog,
  CommandBarFooter,
  CommandBarInput,
  CommandBarList,
} from "@/components/ai/command-bar"
import { CommandGroup, CommandItem } from "@/components/ui/command"

<CommandBarDialog>
  <CommandBar onAsk={(question) => sendMessage({ text: question })}>
    <CommandBarInput />
    <CommandBarList>
      <CommandBarAsk />
      <CommandGroup heading="Actions">
        <CommandItem onSelect={newInvoice}>New invoice</CommandItem>
      </CommandGroup>
    </CommandBarList>
    <CommandBarAnswer actions={<Button onClick={openChat}>Continue in chat</Button>}>
      <Response>{answer}</Response>
    </CommandBarAnswer>
    <CommandBarFooter />
  </CommandBar>
</CommandBarDialog>

API Reference

CommandBar

Prop	Type	Default
`onAsk` Called when someone asks. Stream the reply into CommandBarAnswer.	(question: string) => void	–
`onBack` Called when leaving the answer, e.g. to cancel a stream.	() => void	–

CommandBarAsk

Prop	Type	Default
`label` Row text before the question. Place the row before your groups to make Enter ask, after them to make Enter run the best-matching command.	string	"Ask AI"

CommandBarAnswer

Prop	Type	Default
`actions` Buttons under the answer, like Copy or Continue in chat.	ReactNode	–

CommandBarDialog

Prop	Type	Default
`hotkey` Toggles with ⌘ or Ctrl plus this key.	string \| false	"k"
`open` Controlled open state. Leave out to let the hotkey manage it.	boolean	–

Branch Context Meter