Skip to main content
better-cmdk is a React command palette with built-in AI chat. Use it in three modes:
  1. Command palette only (actions, no chat).
  2. Command palette + hosted chat (default, no setup).
  3. Command palette + external agent (chat, recommended with modifywithai).
Hosted chat uses https://better-cmdk.com/api/chat by default as a developer trial service (free, no signup, rate-limited to 10 requests per 10 minutes). For production, set your own chatEndpoint or use modifywithai for agentic capabilities.

​
Core model: one actions array

Define one CommandAction[] list and reuse it everywhere.
  • better-cmdk uses UI fields (label, group, icon, shortcut, keywords) for search and rendering.
  • modifywithai uses agent fields (description, inputSchema, approvalRequired, execute) for action execution.
  • If a library does not use a field, it ignores it.
import { CommandMenu, type CommandAction } from "better-cmdk";
import { SettingsIcon } from "lucide-react";

const actions: CommandAction[] = [
  {
    name: "open-settings",
    label: "Open Settings",
    description: "Navigate to the settings page",
    group: "Navigation",
    icon: <SettingsIcon className="size-4" />,
    shortcut: "⌘,",
    execute: () => router.push("/settings"),
  },
  {
    name: "navigate-to",
    label: "Navigate to page",
    description: "Navigate to a specific route in the app",
    inputSchema: {
      path: { type: "string", description: "Destination path", required: true },
    },
    execute: ({ path }) => router.push(String(path)),
  },
];

<CommandMenu open={open} onOpenChange={setOpen} actions={actions} />;

​
Action types

TypeDefinitionBehavior
Command-likeNo inputSchemaRuns directly from search/select
Argument-requiringHas inputSchemaRouted through AI so arguments can be provided
Keep one entry per operation. Do not duplicate the same operation as separate “command” and “AI action” entries.

​
Integration options

OptionUse whenCommandMenu props
No chatYou want search + shortcuts onlyactions
Hosted chat (default)You want to quickly try AI chat during developmentactions
External agentYou want agentic action execution and approvalsactions, chat

​
What you get

Two modes in one UI

Users search actions in command mode and switch to chat mode only when needed.

Agent-compatible actions

The same action definitions work in better-cmdk and modifywithai.

Approval workflow UI

Built-in confirmation components handle allow/deny flows for sensitive actions.

Composable primitives

Use the declarative actions API or drop down to cmdk-style children rendering.

​
Next steps

Quickstart

Install better-cmdk and ship a working palette in minutes.

Extending

Learn action design rules, approvals, context hooks, and theming.