Inline Suggestion

Inline autocomplete suggestion. Pro · AI chat and agents › Prompts and models

Copilot-style ghost text for a textarea or input: a completion fetched as you pause typing appears after the caret. Tab accepts it, Ctrl/⌘ → accepts a word, Escape dismisses. className and style go to the field wrapper, other props to the native control.

Installation

npx valyro-cli@latest login
npx valyro-cli@latest add inline-suggestion

npm install valyro-ui-pro

import 'valyro-ui-pro/styles.css';
import { InlineSuggestion } from 'valyro-ui-pro';

Props

Prop	Type	Default
`value`	`string`		Controlled `value`; use with `onValueChange`.
`defaultValue`	`string`	`''`	Initial `value` when uncontrolled.
`onValueChange`	`(value: string) => void`		Called with the new `value` when it changes.
`getSuggestion` *	`(text: string, request: InlineSuggestionRequest) => Promise<string \| null \| undefined> \| string \| null \| undefined`		Returns the completion for `text` (what follows the caret), or nothing. Called after the user pauses typing with the caret at the end; may be async. Errors go to `onError`.
`debounce`	`number`	`350`	Pause in typing before asking, in ms.
`minLength`	`number`	`3`	Minimum text length before asking.
`multiline`	`boolean`	`true`	A textarea (default) or a single-line input.
`showHint`	`boolean`	`true`	Show the Tab key hint next to a suggestion.
`defaultSuggestion`	`string`		A suggestion shown from the first render, before focus: a static preview, or a completion the app already has for `defaultValue`. It stays until the field loses focus, is edited or dismissed; Tab and Ctrl/⌘ → accept it like a fetched one.
`onAccept`	`(accepted: string, kind: 'all' \| 'word') => void`		Called with the accepted text: all of it (Tab) or one word (Ctrl/⌘ →).
`onError`	`(error: unknown) => void`		A failed `getSuggestion`. Without it the error is logged to the console.
`ref`	`Ref<HTMLTextAreaElement \| HTMLInputElement>`		The text field: the `<textarea>`, or the `<input>` when `multiline` is off.
`labels`	`Partial<InlineSuggestionLabels>`		Overrides for the built-in English text; keys left out keep their defaults.

Related components

Prompt Composer — Prompt field with attachments
Model Selector — AI model picker
Model Comparison — Side-by-side answers from several models
Prompt Library — Prompt library with variables
AI Chat Window — AI chat window
Chat Message — Messages with streaming output
Message Branches — Message versions and a conversation branch tree
Streaming Text — Smooth token streaming
Markdown Preview — Rendered Markdown
Response Feedback — Answer rating and a rubric for reviewers
Chain of Thought — Model reasoning steps
Tool Call — Tool call with approval

Previous: Prompt Composer · Next: Model Selector · All AI chat and agents