Inline AI Prompt

Request a contextual edit next to existing text and apply it only after review.

Available in ngbootstrap 2.2.0. All examples below simulate responses locally; no model or network request is used.

Theme Fail next request

queue-release-notes.mdLocal draft

PRODUCT UPDATE / DRAFT

A calmer start to every shift

Select a paragraph below, then ask for a focused revision.

Paragraph 1 selected

Review the proposal before applying. The other paragraph stays unchanged.

Core component binding. Task modes, document selection, source notes, and final output previews are application UI composed around these components.

      <ngb-inline-ai-prompt
  [context]="note()" [response]="suggestedEdit()"
  [busy]="pending()" [error]="error()"
  (promptSubmit)="requestEdit($event)" (stop)="cancel()"
  (responseApply)="note.set($event)" />

No action yet.

When to use it

Revise one paragraph while preserving the surrounding document.
Clarify the next action in an existing customer message.

Inputs and events

Inline AI Prompt public API
Member	Type	Behavior
`context / response`	`string`	Original text and a separately supplied proposed replacement.
`label / suggestions`	`string / readonly string[]`	Trigger label and edit instructions.
`busy / disabled / error`	`boolean / boolean / string`	Request lifecycle.
`promptSubmit`	`NgbInlineAiRequest`	Instruction and context together.
`responseApply`	`string`	Explicitly accepted replacement. Never mutates context.
`stop / closed`	`void`	Cancel work or observe closure; Escape restores trigger focus.

Use stable unique message, response, and field IDs. Update input arrays immutably for OnPush rendering. Model outputs render as plain text, including code and HTML; Markdown rendering and attachments are not part of this API.

Connect your backend

This request sketch belongs in your application service. Adapt its endpoint and response schema to your backend; it is not a built-in ngbootstrap endpoint. Set busy immediately, handle errors, and discard results from canceled or superseded requests.

      // Application-owned service call. Keep provider credentials on your server.
const controller = new AbortController();
const response = await fetch('/api/assistant', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ prompt }),
  signal: controller.signal,
});
if (!response.ok) throw new Error('Request failed');
const result: unknown = await response.json();
// Validate result before updating the component's messages or responses.
// On Stop or destruction: controller.abort(); ignore stale request IDs.
// Set busy/error from your request lifecycle; the components do not fetch.

Keyboard and review behavior

Controls use native buttons, labeled inputs, visible focus indicators, and status or error announcements. Tab and Shift+Tab move between controls; Enter or Space activates native buttons. Busy prompts keep the input read-only and the Stop action reachable without replacing the action button. Prompt Box supports Enter to submit and Shift+Enter for a new line, while respecting text composition. Inline Prompt closes with Escape and returns focus to its trigger. Generated drafts have a named, keyboard-focusable scroll region. Inline and paste proposals announce when they are ready. Smart Paste uses ordinary paste into a textarea and requires explicit selection and application of proposed values.