Documentation
Full Chat Example
A complete chat implementation with all Angular AI Kit features.
Live Demo
Try the interactive chat demo
Chat Demo
How can I help you today?
Start a conversation or choose a suggestion below
This is a demo with simulated AI responses. No real AI is connected.
Press Enter to send, Shift+Enter for new line, Escape to clear
Features Demonstrated
What this example includes
Prompt Suggestions
Empty state with clickable starter prompts
Streaming Responses
Character-by-character text streaming
Markdown Rendering
Full markdown with code highlighting
Message Actions
Copy, regenerate, and feedback buttons
Typing Indicator
Visual feedback while AI is thinking
Input Handling
Disabled state during response generation
Implementation
How to build this chat interface
1// Full Chat Component Example2import { Component, signal, computed } from '@angular/core';3import {4 AiResponseComponent,5 UserMessageComponent,6 ChatInputComponent,7 TypingIndicatorComponent,8 PromptSuggestionsComponent,9} from '@angular-ai-kit/core';10 11@Component({12 selector: 'app-chat',13 imports: [14 AiResponseComponent,15 UserMessageComponent,16 ChatInputComponent,17 TypingIndicatorComponent,18 PromptSuggestionsComponent,19 ],20 template: `21 <div class="flex h-screen flex-col">22 <!-- Messages -->23 <div class="flex-1 overflow-y-auto p-4 space-y-4">24 @if (isEmpty()) {25 <ai-prompt-suggestions26 [suggestions]="suggestions"27 (selectPrompt)="handleSubmit($event)"28 />29 }30 31 @for (message of messages(); track message.id) {32 @if (message.role === 'user') {33 <ai-user-message [content]="message.content" />34 } @else {35 <ai-response36 [content]="message.content"37 (copy)="handleCopy($event)"38 />39 }40 }41 42 @if (streamingContent()) {43 <ai-response44 [content]="streamingContent()"45 [isStreaming]="true"46 />47 }48 49 @if (isLoading() && !streamingContent()) {50 <ai-typing-indicator />51 }52 </div>53 54 <!-- Input -->55 <div class="border-t border-border p-4">56 <ai-chat-input57 [disabled]="isLoading()"58 (messageSubmit)="handleSubmit($event)"59 />60 </div>61 </div>62 `,63})64export class ChatComponent {65 messages = signal<Message[]>([]);66 isLoading = signal(false);67 streamingContent = signal('');68 69 isEmpty = computed(() => this.messages().length === 0);70 71 // ... implementation72}Try It Live
Experience the full chat interface with all features working together.