Overview Since v4.1.0
BuilderKit AI Components are the building blocks of chat interfaces: the thread, its messages, streamed output, reasoning, agent activity and the prompt composer. They are built on Angular Material and Core, and compose with the rest of your application like any other component.
The components are provider agnostic. They take the accumulated text and a streaming flag, so any model, SDK or endpoint can drive them, and they never talk to a provider themselves. Some depend on third party packages, such as marked for markdown, Shiki for highlighting and Tiptap for the prompt editor. Each page lists its packages up front.
Source you own
Like the rest of Core, AI Components ship as source inside your project. There is no package to wrap or override: change their markup, styles and behavior directly to fit your product.
Primitives
- Message Scroller: the thread scroll container, following streaming replies and anchoring new turns to the top.
- Message: a user, assistant or system turn with content and actions.
- Streaming Text: plain text that fades in each chunk as it arrives.
- Streaming Markdown: markdown rendered as it streams, with incomplete syntax closed on every chunk.
- Thinking: a collapsible reasoning panel that opens while the model thinks and shows the elapsed time.
- Trace: compact rows for agent activity such as tool calls, commands and sources, with optional collapsible detail.
- Code Block: highlighted code with an optional header, copy button, line numbers and diff lines.
- Prompt Input: the chat composer, with a rich editor for references and commands or a plain textarea.
- Attachment: a preview card for an attached image or file.
Recipes
Recipes are patterns assembled from the primitives, Angular Material and application markup. They add no Core code, and each page shows them in context, inside a thread or a prompt input.
- Trace Patterns: agent steps, citations, tool calls, test runs and other activity built on Trace.
- Model Selector: a grouped menu for picking the model.
- Context: a popover that shows context window usage and its breakdown.
- Suggestions: a scrolling row of prompt suggestions above the prompt input.
- Questionnaire: a stepped set of questions inside an assistant message.