Start with the task the user needs to finish
An assistant in an operations app can help with several different jobs: explaining a delayed order, drafting a customer update, revising a paragraph, or extracting details from a supplier email. Those jobs need different interfaces. A conversation makes sense when each answer leads to another question. A review panel works better when the outcome is a piece of text that someone must approve. ngbootstrap 2.2.0 provides five Angular AI UI components so you can choose the interaction that fits the task, while your application remains responsible for the model and business logic.
Use Prompt Box for a focused instruction
Choose Prompt Box when you need one clear request inside an existing screen. In an order workspace, a user might ask for a short delivery update without opening a full conversation. Suggestions can help them start, but selecting one fills the draft rather than submitting it. The composer supports Enter to submit, Shift+Enter for another line, and a Stop action while busy. In this template, instruction and pending are application state; requestUpdate handles the submitted text, and cancelUpdate aborts your request. Import NgbPromptBoxComponent into the host standalone component.
<ngb-prompt-box
label="Delivery update brief"
[(value)]="instruction"
[busy]="pending"
[suggestions]="['Explain the revised delivery window']"
(promptSubmit)="requestUpdate($event)"
(stop)="cancelUpdate()"
/>Use Chat when the next question depends on the previous answer
A chat transcript is useful for an investigation: first identify delayed shipments, then ask which customers need an update. Supply messages with stable IDs and update their content as your backend returns text. AI Chat renders the conversation and emits submit, retry, stop, and feedback events. It does not store the transcript or decide which request a retry should replay. Keep that history in application state, and decide what context to send to your backend. The component renders plain text; plan any richer response format separately.
Use the AI Prompt workspace to compare drafts
When a user needs to choose an outcome, several messages in a transcript can make review harder. The AI Prompt workspace keeps the instruction beside candidate responses. For example, an account manager can compare two renewal summaries before applying one to a customer record. Supply the responses array, then handle responseApply, regenerate, and responseDismiss to update your state. Applying a draft is an explicit user action. The library does not save it to a database or replace the input history for you.
Keep small text changes beside the original with Inline AI Prompt
For a short edit, keep the source paragraph visible. Inline AI Prompt accepts context and emits an instruction together with that context. Your application generates a proposed replacement and passes it back as the response. A user can inspect it before selecting Apply; the component never changes the original text automatically. Use this pattern for adjusting the tone of a delivery notice or shortening a handover note. If the source changes during generation, clear the old proposal so a response based on outdated context cannot be applied accidentally.
Use Smart Paste for proposed field values, not silent form changes
A supplier email may contain a contact name, an order reference, and a delivery address. Smart Paste lets the user paste that text and request a mapping to a field schema supplied by your application. Your extraction service returns suggestions. The user can edit the proposed values and exclude fields before applying them. The component ignores unknown field keys, but your application must still validate selected values against its form rules. Keep the final save action separate when the form changes a real customer or order record.
Connect the UI to your backend and handle the full request lifecycle
These controls do not include a model SDK or call an AI provider. Route their events through your own backend and keep provider credentials there. Set busy when work starts, surface failures through the relevant error input, and clear busy when the request finishes. Stop should cancel the underlying request, not just remove a loading indicator. Track request IDs so a late response from a cancelled request cannot replace a newer result. The docs examples simulate responses locally; a production integration needs its own transport, validation, permissions, and persistence.
Match the rest of the app, then test the complete workflow
Load Bootstrap 5 CSS and the library theme stylesheet to use the shared theme tokens. A scoped data-ngb-theme wrapper lets an assistant panel follow your selected palette without adding an AI provider or Angular Material dependency. Before shipping, test the whole journey with a keyboard: write a multiline instruction, stop a pending request, recover from an error, review a result, and apply it. Component keyboard behavior is one part of that journey; labels, surrounding forms, focus order, and backend outcomes also need verification in your application.