AI command menu for React

Open source

Command.Chat. Execute.

better-cmdk combines fuzzy search, AI chat, and action approvals in one open-source menu. Hosted AI chat is included as a free trial endpoint (10 requests per 10 minutes), and you can bring your own provider for production.

Define actions onceSearch commands instantlyAI can call the same actionsTrial chat: 10 req / 10 minRequire approval for sensitive actionsUse any ExternalChat providerNo custom command plumbingDefine actions onceSearch commands instantlyAI can call the same actionsTrial chat: 10 req / 10 minRequire approval for sensitive actionsUse any ExternalChat providerNo custom command plumbing

Recommended Together

better-cmdk + ModifyWithAI

Use better-cmdk for command UX and ModifyWithAI for execution.

better-cmdk

Command UI

Search and launch commands quickly.

ModifyWithAI

Agent Runtime

Run actions, collect required inputs, and handle approvals.

Minimal Flow

Three blocks: actions, provider, command menu.

01

Define action contracts

Define each action with a name, label, options, and execute handler. Reuse the same actions for search and AI tools.

02

Use hosted chat by default

better-cmdk includes a free hosted trial chat endpoint with no signup (10 requests per 10 minutes). Use your own chat URL for production or modifywithai for agentic flows.

03

Search, ask, approve

Users can run actions by typing or asking in natural language. Add approval steps before sensitive actions run.

Provider Integration

Any Provider.Same Commands.

Hosted chat works by default as a trial service with no signup (10 requests per 10 minutes). For production, set a custom chat endpoint or use modifywithai for agentic capabilities.

modifywithai.comVercel AI SDKCustom ExternalChatSelf-hosted endpointBrowse All Integration Guides
1. Chat provider
↓
2. better-cmdk CommandMenu
↓
3. Shared action definitions
↓
4. User approves action run

Wire It Once

One action list powers command search and AI tool calls.

tsx
const actions = [
  {
    name: "setView",
    label: "Change dashboard view",
    description: "Switch dashboard to a specific view",
    inputSchema: { view: { type: "string", required: true } },
    execute: ({ view }) => setView(view),
  },
  {
    name: "toggleTheme",
    label: "Toggle theme",
    description: "Switch between light and dark mode",
    execute: () =>
      setTheme((theme) => (theme === "dark" ? "light" : "dark")),
  },
];

<CommandMenu actions={actions} />

Setup Options

Two Setup Methods

Fastest path: copy the agent prompt and run it in your coding agent. Manual path: follow the docs and wire each step yourself.

RecommendedAI Agent Prompt

Copy this prompt, paste it into your coding agent, then answer follow-up questions. The agent installs better-cmdk and follows AGENTS.md.

Prompt Text

Install better-cmdk in this project using the package manager already used here (npm, pnpm, yarn, or bun).

After installation, read and follow:
node_modules/better-cmdk/AGENTS.md

Use the instructions there to complete the integration.

Do NOT assume answers to any questions.
Manual Setup

Read The Docs

Use this path if you want to install, wire providers, and define commands manually.

Open Setup Docs

Best For

Teams with strict review flows or custom architecture decisions.

Copied