BuilderKit Logomark
BuilderKit
Get full access
AI COMPONENTS

Angular AI components for chat and agent interfaces

Everything a chat or agent interface needs, from streaming replies and reasoning panels to the prompt composer. Part of the same design system as the rest of BuilderKit, so it looks and behaves like the rest of your app.

Documentation

Works with any model, by design

The components only render what your app gives them, nothing more. There is no provider code inside, so Anthropic, any OpenAI compatible endpoint or a local Ollama model drive them the same way.

The same approach as the rest of BuilderKit. The components ship as source inside your project and share the design system of everything else in BuilderKit, so they look like the rest of your app and you change them directly instead of working around them.

They also build on each other. Thinking is built on Trace and Streaming Markdown on Code Block, so a thread is composed from parts you already know.

Primitives

Nine components that every chat or agent thread is built from, from the scroll container to the composer. Each one ships as source in the same design system as the rest of BuilderKit.

The thread scroll container, following streaming replies and anchoring new turns to the top.
Message Scroller
A user or assistant turn with content and actions.
Message
Plain text that fades in each chunk as it arrives.
Streaming Text
Markdown rendered as it streams, with incomplete syntax closed on every chunk.
Streaming Markdown
A collapsible reasoning panel that opens while the model thinks and shows the elapsed time.
Thinking
Compact rows for agent activity such as tool calls, commands and sources, with optional collapsible detail.
Trace
Highlighted code with an optional header, copy button, line numbers and diff lines.
Code Block
The chat composer, with a rich editor for references and commands or a plain textarea.
Prompt Input
A preview card for an attached image or file.
Attachment

Recipes

Patterns assembled from the primitives, Angular Material and your own markup. They add no new components, and each one ships as a docs page with a working demo in context.

Agent steps, citations, tool calls, test runs and other activity built on Trace.
Trace Patterns
A grouped menu for picking the model.
Model Selector
A popover that shows context window usage and its breakdown.
Context
A scrolling row of prompt suggestions above the prompt input.
Suggestions
A stepped set of questions inside an assistant message.
Questionnaire

Frequently Asked Questions

Answers to the most common questions about the AI components, which providers they work with, and what they add to your project.

Yes. AI Components are part of the BuilderKit design system and use the same colors, spacing and conventions as the restyled Angular Material components. They ship as source inside your project, so you change their markup, styles and behavior directly.
Any of them. The components only render what your app gives them and never talk to a provider themselves. Anthropic, any OpenAI compatible endpoint and a local Ollama model all drive them the same way.
Some do. Markdown rendering, code highlighting and the rich prompt editor rely on a few well known open source packages. Each docs page lists what it needs up front, and the plain textarea prompt input needs none.
Templates ship only the components their pages use. Any component can be added to any project, since everything ships as source.
AI Components follow the same design system as the rest of BuilderKit. Colors, spacing and typography come from your theme, so light and dark modes and runtime theme changes work out of the box.
Yes. Like the rest of BuilderKit, they render on the server and take over in the browser without a flash. Streaming starts once the page is interactive.

Build your AI product on Angular

Chat and agent interfaces from the same system as the rest of your app, with components that stream, ship as source and look like BuilderKit.

Get lifetime access