Powered by modifywithai.com

The command palette
your app deserves

A drop-in ⌘K palette with built-in AI that can actually do things in your app. Search commands, chat with AI, approve actions — one interface.

How it works

Define actions once. They become searchable commands and AI tools — automatically.

Step 1

Define your actions

Declare what your app can do. Each action gets a name, parameters, and an execute function. Actions serve double duty — they appear as searchable commands and as AI tools.

Define your actions
The toggle dark mode action on this page — defined once, available as both a ⌘K command and an AI tool.

Step 2

Connect any AI provider

Pass an ExternalChat object from modifywithai.com, Vercel AI SDK, or your own backend. Your actions become AI tools automatically — no extra config.

Step 3

Users search or ask AI

Actions show up as fuzzy-searchable commands. Or users type natural language and the AI picks the right action to run.

Extensible

Plug in any AI provider

Pass a chat prop with the ExternalChat interface and you're done. Your provider sends messages, streams responses, and passes available actions — better-cmdk handles the UI.

modifywithai.com
Full-stack AI actions with zero config
Vercel AI SDK
Just pass a chatEndpoint string
Custom backend
Implement ExternalChat and plug in
modifywithai.comor any AI provider
Vercel AI SDKchatEndpoint
CustomExternalChat
better-cmdk
Commands
Fuzzy search
AI Chat
Streaming
Approvals
User control
Your React App

Add it in minutes

One component. One provider. Actions that work as both commands and AI tools.

tsx
// 1. Define actions — they become both commands and AI tools
const actions = [
  {
    name: "updateTheme",
    label: "Change app theme",
    options: { theme: { type: "string", required: true } },
    execute: (opts) => setTheme(opts.theme),
  },
];

// 2. Connect any provider
<CommandMenu chat={provider} open={open} onOpenChange={setOpen}>
  {({ mode }) => (
    <>
      <CommandInput placeholder="Search or ask AI..." />
      <CommandList actions={actions}>
        {mode === "command" && (
          <CommandGroup heading="Navigation">
            <CommandItem>Dashboard</CommandItem>
            <CommandItem>Settings</CommandItem>
          </CommandGroup>
        )}
      </CommandList>
    </>
  )}
</CommandMenu>

Ready to ship?

Give your users the command palette they've been waiting for. Search, chat, and act — all from ⌘K.

View on GitHub