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

Tab and Shift+Tab move between controls. Enter or Space activates buttons. Inputs have labels, actions show focus, and status or error changes are announced.

Escape closes the prompt and restores focus to its trigger. Review the announced proposal before applying it to your document.