AI UI components

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.

This first release covers five UI components. Semantic Grid search, AI data operations, and WebMCP integrations are outside this implementation.

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.