AI-focused UI components for Angular v21 - Chat interfaces, streaming text, markdown rendering, and more
npm install @angular-ai-kit/coreAI-focused UI components for Angular v21. Build beautiful chat interfaces with markdown rendering, code highlighting, and more.
``bash`
ng add @angular-ai-kit/core
That's it! Everything is configured automatically:
- All dependencies installed
- Tailwind CSS v4 configured
- PostCSS configured
- Styles and theming set up
- Dark mode auto-detects your system preference
`typescript
import {
AiResponseComponent,
UserMessage,
UserMessageComponent,
} from '@angular-ai-kit/core';
import { Component, signal } from '@angular/core';
@Component({
selector: 'app-chat',
imports: [UserMessageComponent, AiResponseComponent],
template:
,
})
export class ChatComponent {
userMessage = signal({
id: '1',
role: 'user',
content: 'Hello! How can you help me?',
timestamp: new Date(),
}); aiContent = signal(
## Welcome!I can help you with many things:
- Answer questions
- Write code
- Explain concepts
\\\typescript\
const greeting = "Hello, World!";
console.log(greeting);
\\
);`
}
| Component | Selector | Description |
| ---------------------------- | ------------------------- | ---------------------------------- |
| ChatContainerComponent | | Main layout wrapper for chat |MessageListComponent
| | | Scrollable message display |UserMessageComponent
| | | User message bubble with edit/copy |MessageActionsComponent
| | | Copy and edit action buttons |PromptSuggestionsComponent
| | | Suggested prompt badges |ConversationListComponent
| | | Conversation history sidebar |
| Component | Selector | Description |
| --------------------------- | ------------------------ | ------------------------------------ |
| AiResponseComponent | | AI response with markdown rendering |CodeBlockComponent
| | | Syntax highlighting with copy button |MarkdownRendererComponent
| | | Parse and render markdown |FeedbackButtonsComponent
| | | Thumbs up/down toggle buttons |ResponseActionsComponent
| | | Copy, regenerate, feedback buttons |
| Directive | Selector | Description |
| -------------------------- | --------------------- | ----------------------------- |
| CopyToClipboardDirective | [aiCopyToClipboard] | Copy text to clipboard |AutoResizeDirective
| | [aiAutoResize] | Auto-resize textarea |ClickOutsideDirective
| | [aiClickOutside] | Detect clicks outside element |FocusTrapDirective
| | [aiFocusTrap] | Trap focus within element |
- Signal-based: Built with Angular v21 signals for optimal performance
- Standalone: No NgModules required
- Tailwind CSS v4: Modern styling with CSS variables
- Dark Mode: Auto-detects system preference (or use class="dark" on html)
- Accessible: WCAG AA compliant with keyboard navigation
- SSR Compatible: Works with Angular SSR/Hydration
- Zoneless: Compatible with zoneless change detection
If you prefer manual setup:
`bash``
npm install @angular-ai-kit/core @angular-ai-kit/utils @angular-ai-kit/tokens
npm install tailwindcss@^4 @tailwindcss/postcss highlight.js marked dompurify
npm install @ng-icons/core @ng-icons/lucide
Then see the full setup guide for CSS configuration.
- Demo & Docs: https://angular-ai-kit.vercel.app
- GitHub: https://github.com/hassantayyab/angular-ai-kit
MIT