AIPrompt

A lighter, standalone prompt launcher — a single input plus a grid of suggested-prompt cards and an optional inline slash-command menu. For a full back-and-forth conversation, use Chat instead.

AIPrompt

Preview

Nothing submitted yet.

Usage

tsx

import { AIPrompt } from "@vesture/react";

function Example() {
  return (
    <AIPrompt
      placeholder='Ask anything, or type "/" for commands…'
      onSubmit={(prompt) => sendToMyBackend(prompt)}
      suggestions={[
        { id: "1", title: "Summarize", description: "Summarize the current page", prompt: "Summarize this page for me." },
        { id: "2", title: "Explain code", description: "Explain a selected snippet", prompt: "Explain this code snippet." },
      ]}
      commands={[
        { id: "1", label: "/summarize", template: "Summarize the following: " },
      ]}
    />
  );
}

Behavior

suggestions renders as a grid of cards (title + description), not just chips — clicking one fills the input with its prompt and, by default, submits immediately. Set autoSubmitOnSuggestionClick={false} to only fill the input and let the visitor review/edit before sending.
commands opens an inline menu when "/" is typed as the very first character of the input — not anywhere else in the text. Arrow keys move the highlight, Enter selects, and the input is replaced with the selected command's template.
Omit commands entirely to skip the feature — "/" then behaves as an ordinary typed character.

Props

PromptSuggestion

Prop	Type	Default	Description
id / title	string	—	Required.
description	string	—	Shown under the title on the card.
prompt	string	—	Required. Text used to fill (and, by default, submit) the input.

PromptCommand

Prop	Type	Default	Description
id / label	string	—	Required. label is what's shown and matched while filtering.
template	string	—	Required. Replaces the input's content when this command is selected.

AIPromptProps

Prop	Type	Default	Description
onSubmit	(prompt: string) => void	—	Required.
suggestions	PromptSuggestion[]	—	Rendered as a card grid above the input.
commands	PromptCommand[]	—	Enables the slash-command menu (see behavior above).
autoSubmitOnSuggestionClick	boolean	true	Set false to only fill the input on a suggestion click, not submit it.
placeholder / disabled	string / boolean	—	Passed to the input.