AI

Build assistant workflows with provider-independent Angular controls for prompts, conversations, drafts, contextual edits, and reviewed form filling.

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

Assistance that fits the workflow

Keep people in control of generated content. Collect an instruction, display progress, let the application supply a response, then offer a clear review step before applying changes.

Prompt Box

Collect clear instructions with suggestions, keyboard submission, length limits, and cancellation.

AI Chat

Keep an operational conversation readable with streamed messages, retry actions, and response feedback.

AI Prompt workspace

Generate and compare drafts before choosing content for your application.

Inline AI Prompt

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

Smart Paste

Turn pasted notes into proposed field values, then review, edit, and select what to apply.

Standalone Angular imports

      import { NgbAiChatComponent } from '@angular-bootstrap/ngbootstrap';
// Add the standalone component to your component's imports.

Use Bootstrap 5 CSS for the base styles. To share colors, type, and radii across these controls, load the library theme stylesheet and add a data-ngb-theme wrapper. See the Themes guide.

The application owns the AI connection

Components emit typed events and render supplied data. They do not include a language model, send your content to a provider, execute generated actions, or store a conversation. Keep authentication, provider credentials, request cancellation, response validation, and persistence in your application.

These five controls handle the user interface. They do not provide semantic Grid search, AI data operations or WebMCP integration.

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.

Each component guide describes its submission, cancellation and review controls. Keep application-owned actions labeled and report backend failures visibly.