A composer where / opens commands and @ opens context sources, with an inline ghost completion that Tab accepts. Picks become removable tokens in front of the text, and Backspace at the start removes the last one.
npx shadcn@latest add https://hyperblur.dev/r/prompt-slash-commands.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/prompt-slash-commands.tsx.
import { PromptSlashCommands } from "@/components/hyperblur/prompt-slash-commands"
<PromptSlashCommands menuPlacement="top" onSubmit={(p) => run(p)} />| Prop | Type | Default | Description |
|---|---|---|---|
| commands | { name: string; description: string }[] | six commands | Items offered after /. |
| mentions | { name: string; kind?: "doc" | "code" | "sheet" | "channel" }[] | five sources | Items offered after @. |
| defaultTokens | { type: "command" | "mention"; value: string }[] | one mention | Tokens already in the box. |
| defaultValue | string | "" | Initial text. A trailing /query or @query opens the menu. |
| placeholder | string | "Ask anything, / for commands, @ to add context" | Placeholder while there are no tokens. |
| menuPlacement | "top" | "bottom" | "bottom" | Opens the suggestions below or above the box. |
| onTokensChange | (tokens: SlashToken[]) => void | undefined | Called when tokens are added or removed. |
| onSubmit | (payload: { commands: string[]; mentions: string[]; text: string }) => void | undefined | Called on Enter or the send button. |
| accent | string | "#7fb3ff" | Accent color for focus rings, indicators and highlights. |
| className | string | undefined | Extra classes on the root element. |