Inline prompt
A Ctrl+K bar that opens over a paragraph, takes an instruction and shows the rewrite to accept or discard.
Loading preview…
Install
- 1
Run this command in your Tailwind CSS project. It adds
components/ai/inline-prompt.tsxand installs its dependencies.$ npx shadcn@latest add https://gradientdeck.com/ai-components/r/inline-prompt.json
Usage & API
Example
import { InlinePrompt } from "@/components/ai/inline-prompt"
<InlinePrompt
value="…"
onChange={() => {}}
onSubmit={() => {}}
onAccept={() => {}}
onDiscard={() => {}}
onClose={() => {}}
status={status}
/>Props InlinePrompt
| Prop | Type & description | Required |
|---|---|---|
value | string | Required |
onChange | (value: string) => void | Required |
onSubmit | (instruction: string) => void | Required |
onAccept | () => void | Required |
onDiscard | () => void | Required |
onClose | () => void | Required |
status | InlinePromptStatus | Required |
placeholder | string | Optional |
Dependencies
- React
- Tailwind CSS
- motion
- lucide-react
Implementation notes
Default is the bar, not the whole note. The note, the shortcut hint, the green draft, and the double-click handler live in the preview around it. The bar's idle input is borderless and focuses when idle. Generate is the arrow button. Generating hides both the input and Accept, and shows Rewriting plus the cancel icon. Review hides the shine and shows Discard, with an X, and Accept, with a check. The shortcut that accepts is meta or ctrl plus Enter, and only in review. The preview's first run opens on the second paragraph. Later opens clear the instruction and return to idle. Closing returns focus to the paragraph that was active. There is no second visual variant and no attachment picker on the bar.
Choosing a layout
Use it when the person already knows the paragraph and wants to give one instruction: friendlier, shorter, translate, or a sentence of their own. The bar is small enough to sit in the document instead of sending them to a chat thread. Idle, generating, and review are the whole conversation. There is no history of instructions inside the component. If they discard, you close or reset. If they accept, you commit the text you generated and unmount the bar. Ghost completion is the sibling for text they did not ask for, offered after a pause. This bar is only for an instruction they submitted.
Use Selection toolbar when the entry point is a highlight and the common edits are buttons, not a blank field. Use Prose diff when the rewrite should land as separate insertions and deletions inside the sentence, each with its own accept. Inline prompt treats the reply as one block: Accept or Discard, not a per-word review. Version history is what you reach for after several of those accepts, when the question is which draft to return to. Do not mount the bar with no paragraph. Nothing in the component highlights a target. The preview does that by tinting the active paragraph and swapping in the draft.
What do the three statuses show?
Idle is the instruction field and Generate. Generating replaces the field with Rewriting and a cancel control that calls onClose. Review shows the instruction text, Discard, and Accept. The bar does not move itself from one status to another. The preview does, after a canned rewrite finishes streaming into the paragraph.
Which keys close, discard, or accept?
Escape calls onDiscard during review and onClose otherwise. In review, Ctrl+Enter or Command+Enter calls onAccept. Generate submits on Enter while idle, and only if the instruction is not blank. The preview also listens for Ctrl K or Command K on the note to open the bar, and for a double-click on a paragraph. Those two are not part of the bar component.