AI Command Palette

Installation

This component relies on cmdk for robust keyboard navigation and accessibility.

Architecture

This component wraps the excellent cmdk library with Framer Motion animations and a premium, glowing aesthetic tailored for AI integrations.

When a user types a query, it dynamically injects an "Ask AI" command at the top of the list. Selecting this command triggers an internal generative state, which seamlessly animates the command list closed and expands a loading indicator, followed by the generated response.

Note: To make this a global shortcut (like Cmd+K), simply wrap the <Command> element inside a <Command.Dialog> as specified by the cmdk documentation. We've built this as an inline component so it renders safely inside this documentation page without hijacking your keyboard!

Usage Guide

1. Import the Component

Import the component into your React or Next.js page:

import { AiCommandPalette } from "@/components/creative/ai-command-palette";

2. Implementation Example

Render the component and customize its behavior by passing props:

import { AiCommandPalette } from "@/components/creative/ai-command-palette";

export default function Example() {
  return (
    <div className="w-full flex items-center justify-center p-8">
      <AiCommandPalette
      />
    </div>
  );
}