Primitives

AI Assistant

Build a customizable AI chat assistant by composing multiple primitives. These primitives provide accessible, flexible building blocks for chat threads, message display, prompt input, dictation, and submission—allowing you to create rich conversational interfaces tailored to your application's needs.

Note: The AI Assistant primitives are currently experimental. The API may change in future releases.

Hello! I'm ChatNGP, your AI assistant. How can I help you today?

Choose a suggestion below or type your own message to get started.

ChatNGP can make mistakes. Check important info.

Import

Import the AI primitives from ng-primitives/ai.

import {
  NgpThread,
  NgpThreadViewport,
  NgpThreadMessage,
  NgpThreadSuggestion,
  NgpPromptComposer,
  NgpPromptComposerInput,
  NgpPromptComposerSubmit,
  NgpPromptComposerDictation,
} from 'ng-primitives/ai';

Usage

Assemble the AI directives in your template.

<div ngpThread>
  <div ngpThreadViewport>
    <div ngpThreadMessage>
      <div>Message content</div>
    </div>
  </div>

  <div ngpThreadSuggestion>...</div>

  <div ngpPromptComposer>
    <textarea ngpPromptComposerInput></textarea>
    <button ngpPromptComposerDictation>Mic</button>
    <button ngpPromptComposerSubmit>Send</button>
  </div>
</div>

API Reference

The following directives are available to import from the ng-primitives/ai package:

NgpThread

The NgpThread directive is wrapper around the thread viewport, messages and composer in the AI assistant chat.

  • Selector: [ngpThread]
  • Exported As: ngpThread

NgpThreadViewport

The NgpThreadViewport directive creates a scrollable container for displaying the messages in the AI assistant chat thread.

  • Selector: [ngpThreadViewport]
  • Exported As: ngpThreadViewport
ngpThreadViewportThreshold
number
default: "70"

The distance in pixels from the bottom of the scrollable container that is considered "at the bottom". When the user scrolls within this threshold, the thread is treated as being at the bottom. This value is used to determine whether automatic scrolling to the bottom should occur, for example when new content is added or the container is resized.

ngpThreadViewportAutoScroll
boolean

Whether the thread should automatically scroll to the bottom when new content is added.

NgpThreadMessage

The NgpThreadMessage directive represents an individual message within a thread in the AI assistant chat.

  • Selector: [ngpThreadMessage]
  • Exported As: ngpThreadMessage

NgpThreadSuggestion

The NgpThreadSuggestion directive displays suggested text that the user can click to populate the prompt input field.

  • Selector: button[ngpThreadSuggestion]
  • Exported As: ngpThreadSuggestion
ngpThreadSuggestion
string

The suggested text to display in the input field.

ngpThreadSuggestionSetPromptOnClick
boolean

Whether the suggestion should populate the prompt when clicked.

NgpPromptComposer

The NgpPromptComposer directive creates a container for composing and submitting prompts to the AI assistant.

  • Selector: [ngpPromptComposer]
  • Exported As: ngpPromptComposer
ngpPromptComposerSubmit
string

Emits whenever the user submits the prompt.

Data Attributes

Attribute Description
data-prompt Added when there is text content in the prompt.
data-dictating Added when speech dictation is active.
data-dictation-supported Added when speech dictation is supported by the browser.

NgpPromptComposerInput

The NgpPromptComposerInput directive is used for the text input field where users type their messages.

  • Selector: input[ngpPromptComposerInput], textarea[ngpPromptComposerInput]
  • Exported As: ngpPromptComposerInput

NgpPromptComposerSubmit

The NgpPromptComposerSubmit directive handles the submission of composed prompts to the AI assistant.

  • Selector: button[ngpPromptComposerSubmit]
  • Exported As: ngpPromptComposerSubmit
disabled
boolean

Whether the submit button should be disabled

Data Attributes

Attribute Description
data-prompt Added when there is text content in the prompt.
data-dictating Added when speech dictation is active.
data-dictation-supported Added when speech dictation is supported by the browser.

NgpPromptComposerDictation

The NgpPromptComposerDictation directive enables voice input functionality for composing prompts using speech-to-text.

  • Selector: button[ngpPromptComposerDictation]
  • Exported As: ngpPromptComposerDictation
disabled
boolean

Whether the submit button should be disabled.

Data Attributes

Attribute Description
data-dictating Added when speech dictation is active.
data-dictation-supported Added when speech dictation is supported by the browser.
data-prompt Added when there is text content in the prompt.

Accessibility

Keyboard Interactions

  • Enter - Submits the prompt when focused on the input field.
  • Shift+Enter - Inserts a newline in the input field.

Copyright © 2025 Angular Primitives