Documentation
FAQ
Frequently asked questions about Angular AI Kit.
Installation
Questions about installation
How do I install Angular AI Kit?
Install the core package and its peer dependencies:
1npm install @angular-ai-kit/core @angular-ai-kit/utils2# or3pnpm add @angular-ai-kit/core @angular-ai-kit/utilsWhat Angular version is required?
Angular AI Kit requires **Angular 17 or higher**. It's optimized for Angular 19+ with signals and standalone components.
Do I need Tailwind CSS?
Yes, Tailwind CSS is required for styling. Angular AI Kit uses Tailwind utility classes and CSS custom properties. Install Tailwind CSS v4 and configure it for your project.
How do I set up Tailwind CSS with Angular AI Kit?
Add Tailwind to your project and import the CSS variables:
1// styles.css2@import "tailwindcss";3 4:root {5 --background: theme('colors.white');6 --foreground: theme('colors.zinc.950');7 --card: theme('colors.zinc.50');8 --border: theme('colors.zinc.200');9 /* ... more variables */10}11 12.dark {13 --background: theme('colors.zinc.950');14 --foreground: theme('colors.zinc.50');15 /* ... dark mode values */16}Components
Questions about components
How do I display AI responses with markdown?
Use the AiResponseComponent which includes built-in markdown rendering:
1<ai-response2 [content]="message.content"3 [isStreaming]="isStreaming()"4/>How do I handle streaming responses?
Set the isStreaming input to true while streaming, and update the content as chunks arrive:
1// In your component2streamingContent = signal('');3isStreaming = signal(false);4 5async streamResponse() {6 this.isStreaming.set(true);7 8 for await (const chunk of api.stream()) {9 this.streamingContent.update(c => c + chunk);10 }11 12 this.isStreaming.set(false);13}14 15// In template16<ai-response17 [content]="streamingContent()"18 [isStreaming]="isStreaming()"19/>How do I add custom actions to messages?
Use content projection to add custom actions:
1<ai-response [content]="content">2 <div slot="actions">3 <button (click)="share()">Share</button>4 <button (click)="bookmark()">Bookmark</button>5 </div>6</ai-response>How do I customize component styles?
Use the customClasses input to add Tailwind classes, or override CSS variables for global theming:
1<!-- Using customClasses -->2<ai-chat-input3 customClasses="rounded-full border-2 border-primary"4/>5 6<!-- Using CSS variables (global) -->7:root {8 --primary: theme('colors.blue.600');9}Theming
Questions about theming
How does dark mode work?
Dark mode is controlled by adding the .dark class to the <html> element. CSS variables automatically switch values based on this class.
1// Toggle dark mode2document.documentElement.classList.toggle('dark');3 4// Or use the ThemeService5this.themeService.toggle();How do I create a custom color theme?
Override the CSS variables in your styles.css with your desired colors:
1/* Custom blue theme */2:root {3 --primary: theme('colors.blue.600');4 --primary-foreground: theme('colors.white');5 --accent: theme('colors.blue.100');6}7 8.dark {9 --primary: theme('colors.blue.400');10 --primary-foreground: theme('colors.blue.950');11 --accent: theme('colors.blue.900');12}API Integration
Questions about api integration
How do I connect to OpenAI?
Never expose API keys in the frontend. Create a backend proxy that handles API calls:
1// Frontend service2async sendMessage(content: string) {3 const response = await fetch('/api/chat', {4 method: 'POST',5 headers: { 'Content-Type': 'application/json' },6 body: JSON.stringify({ messages: [{ role: 'user', content }] }),7 });8 return response.json();9}10 11// Backend handles the actual OpenAI call with API keyHow do I implement streaming with fetch?
Use the Fetch API with ReadableStream to handle SSE streams:
1const response = await fetch('/api/chat', {2 method: 'POST',3 body: JSON.stringify({ messages, stream: true }),4});5 6const reader = response.body?.getReader();7const decoder = new TextDecoder();8 9while (true) {10 const { done, value } = await reader.read();11 if (done) break;12 13 const chunk = decoder.decode(value);14 // Parse SSE data and update UI15}Troubleshooting
Questions about troubleshooting
Components are not styled correctly
Make sure you have: 1. Tailwind CSS installed and configured 2. CSS variables defined in your styles.css 3. ViewEncapsulation.None on components using Tailwind
Markdown is not rendering
Check that: 1. The content is valid markdown 2. You're using the correct component (AiResponseComponent includes markdown) 3. The MarkdownService is available (provided in root by default)
Code highlighting is not working
Ensure you have: 1. Highlight.js styles imported 2. The language registered with highlight.js 3. The correct language specified in code blocks
1// Register additional languages2import { CodeHighlightService } from '@angular-ai-kit/core';3 4constructor() {5 const highlight = inject(CodeHighlightService);6 highlight.registerLanguage('rust', rustLanguage);7}Dark mode is not switching
Verify that: 1. The .dark class is being added to <html> 2. CSS variables have .dark values defined 3. You're not using explicit colors (use semantic classes like bg-background)
Performance
Questions about performance
How do I handle long conversations?
For conversations with many messages: 1. Use virtual scrolling (Angular CDK) 2. Lazy load older messages 3. Truncate message history before sending to API
How do I optimize streaming performance?
Tips for smooth streaming: 1. Batch DOM updates using requestAnimationFrame 2. Use OnPush change detection 3. Avoid re-rendering unchanged messages
Still have questions?
Can't find what you're looking for? Check out these resources: