A slash command dropdown for selecting tools and actions with categorization and search.
Command Palette
Search for a command to run...
Search for a command to run...
A slash command dropdown for selecting tools and actions with categorization and search.
Click the button to open the tool menu
Power user heaven. Trigger tools and workflows right from the input.
The Slash Command Dropdown provides an intuitive way for users to select tools and actions in AI chat interfaces. It supports categorization, filtering, and keyboard navigation.
npx shadcn@latest add https://ui.heygaia.io/r/slash-command-dropdown.jsonimport { SlashCommandDropdown } from "@/components/ui/slash-command-dropdown";
const tools = [
{ name: "send_email", category: "email", description: "Send an email" },
{ name: "create_event", category: "calendar", description: "Create event" },
{ name: "create_todo", category: "todos", description: "Create a todo" },
];
const matches = tools.map((tool) => ({
tool,
score: 1.0,
}));
export default function Example() {
return (
<SlashCommandDropdown
matches={matches}
selectedIndex={0}
onSelect={(match) => console.log("Selected:", match.tool.name)}
onClose={() => console.log("Closed")}
position={{ top: 100, left: 50 }}
isVisible={true}
/>
);
}| Prop | Type | Default | Description |
|---|---|---|---|
| matches | SlashCommandMatch[] | - | Array of matched tools with scores |
| selectedIndex | number | - | Currently selected item index |
| onSelect | (tool: SlashCommandMatch) => void | - | Callback when a tool is selected |
| onClose | () => void | - | Callback when dropdown should close |
| position | object | - | Position of the dropdown |
| isVisible | boolean | - | Whether the dropdown is visible |
| openedViaButton | boolean | false | Whether opened via button (affects focus) |
| selectedCategory | string | "all" | Currently selected category filter |
| categories | string[] | [] | Available categories for filtering |
| onCategoryChange | (category: string) => void | - | Callback when category filter changes |
interface Tool {
name: string;
category: string;
description?: string;
icon?: React.ReactNode;
}interface SlashCommandMatch {
tool: Tool;
score: number; // Relevance score (0-1)
}