AI Prompt workspace

Generate and compare drafts before choosing content for your application.

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

Theme Fail next request

RELEASE STUDIOBrief → alternatives → chosen copy

Source notes

Saved queue views. Clearer empty states. No changes to existing order data.

Release note drafts

1 draft

01 · Brief

How should this read?

02 · Review drafts

A concise release summary

Queue review is now faster. Saved views keep common filters close at hand, and clearer empty states explain when no orders match. Existing order data stays unchanged.

03 · CHOSEN COPY

Release note preview

Choose “Use draft” on a candidate to place it here. Nothing is published.

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

      <ngb-ai-prompt
  [responses]="drafts()" [busy]="pending()" [error]="error()"
  (promptSubmit)="generate($event)" (stop)="cancel()"
  (responseApply)="useDraft($event)"
  (regenerate)="generate($event.prompt)"
  (responseDismiss)="removeDraft($event)" />

No action yet.

When to use it

Compare release-note drafts before choosing the final wording.
Compare alternative summaries while preserving earlier drafts.

Inputs and events

AI Prompt workspace public API
Member	Type	Behavior
`responses`	`readonly NgbAiResponse[]`	Objects with stable id, prompt, and text; caller controls order and history.
`suggestions`	`readonly string[]`	Draft instruction shortcuts.
`busy / disabled / error`	`boolean / boolean / string`	Generation and recoverable failures.
`label / promptLabel / emptyText`	`string`	Workspace copy.
`promptSubmit / stop`	`string / void`	Request or cancel generation.
`responseApply / regenerate`	`NgbAiResponse`	Reviewed selection or regeneration request.
`responseDismiss`	`string`	ID to remove from application history.

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.