Documentation

Getting Started

Learn how to install and use Angular AI Kit in your Angular v21+ application.

Prerequisites

Before you begin, ensure you have the following installed

Node.js >= 20.0.0
Angular v21 or higher
Tailwind CSS v4 (recommended)

Built With

Angular AI Kit leverages modern, well-tested libraries

Spartan UI

Built on top of Spartan UI primitives, a collection of accessible, unstyled Angular components. Spartan UI uses Angular CDK internally to provide proper accessibility (WCAG AA compliance), keyboard navigation, and screen reader support out of the box.

Modern Angular v21

Built with Angular v21 using signals, standalone components, new control flow syntax (@if, @for), and zoneless change detection for optimal performance.

Tailwind CSS v4

Styled with Tailwind CSS v4 using modern utility-first CSS, design tokens, and full dark mode support with no SCSS required.

Installation

Install Angular AI Kit packages

Install the core packages using npm:

1npm install @angular-ai-kit/core @angular-ai-kit/tokens @angular-ai-kit/utils

Setup Tailwind CSS v4

Angular AI Kit requires Tailwind CSS v4

1. Install Tailwind CSS v4

1npm install tailwindcss@^4.0.0 @tailwindcss/postcss

2. Create PostCSS config

Create .postcssrc.json in your project root:

1{2  "plugins": {3    "@tailwindcss/postcss": {}4  }5}

3. Import Tailwind in styles.css

Add to your global styles.css:

1@import 'tailwindcss';

Your First Component

Create a simple chat interface

Let's create a basic chat component using ChatInputComponent:

1import { Component } from '@angular/core';2import { ChatInputComponent } from '@angular-ai-kit/core';3 4@Component({5  selector: 'app-chat',6  imports: [ChatInputComponent],7  template: `8    <div class="flex min-h-screen items-center justify-center bg-background p-4">9      <div class="w-full max-w-2xl">10        <ai-chat-input11          placeholder="Send a message..."12          (messageSend)="handleMessage($event)"13        />14      </div>15    </div>16  `,17})18export class ChatComponent {19  handleMessage(content: string) {20    console.log('Message:', content);21  }22}

✅ That's it!

You now have a working chat input with auto-resize, keyboard shortcuts, and accessibility features.

Alternative: Using the CLI

Shadcn-style component installation

Angular AI Kit provides a CLI tool (similar to Shadcn UI) that copies components directly into your project:

1. Initialize

1npx @angular-ai-kit/cli init

This creates angular-ai-kit.config.json and sets up your project.

2. Add Components

1npx @angular-ai-kit/cli add ai-response chat-input

Components are copied to your project with all dependencies automatically resolved.

💡 Why use the CLI?

Full control over component code
Easy customization
No version lock-in
Tree-shakable by default

Using Multiple Components

Build a complete chat interface

Here's a more complete example using multiple components together:

1import { Component, signal } from '@angular/core';2import {3  ChatInputComponent,4  AiResponseComponent,5  TypingIndicatorComponent,6} from '@angular-ai-kit/core';7 8interface ChatMessage {9  role: 'user' | 'assistant';10  content: string;11  timestamp: Date;12}13 14@Component({15  selector: 'app-chat',16  imports: [ChatInputComponent, AiResponseComponent, TypingIndicatorComponent],17  template: `18    <div class="flex min-h-screen flex-col bg-background">19      <!-- Messages -->20      <div class="flex-1 overflow-y-auto p-4">21        <div class="mx-auto max-w-3xl space-y-4">22          @for (message of messages(); track message.timestamp) {23            @if (message.role === 'user') {24              <div class="flex justify-end">25                <div class="rounded-lg bg-primary px-4 py-2 text-primary-foreground">26                  {{ message.content }}27                </div>28              </div>29            } @else {30              <ai-response [content]="message.content" />31            }32          }33 34          @if (isLoading()) {35            <ai-typing-indicator />36          }37        </div>38      </div>39 40      <!-- Input -->41      <div class="border-t border-border bg-card p-4">42        <div class="mx-auto max-w-3xl">43          <ai-chat-input44            placeholder="Send a message..."45            [disabled]="isLoading()"46            (messageSend)="handleMessage($event)"47          />48        </div>49      </div>50    </div>51  `,52})53export class ChatComponent {54  messages = signal<ChatMessage[]>([]);55  isLoading = signal(false);56 57  handleMessage(content: string) {58    // Add user message59    this.messages.update((msgs) => [60      ...msgs,61      { role: 'user', content, timestamp: new Date() },62    ]);63 64    // Simulate AI response65    this.isLoading.set(true);66    setTimeout(() => {67      this.messages.update((msgs) => [68        ...msgs,69        {70          role: 'assistant',71          content: 'This is a simulated AI response!',72          timestamp: new Date(),73        },74      ]);75      this.isLoading.set(false);76    }, 1500);77  }78}

Next Steps

Continue learning

Need Help?

Check out the FAQ or browse the complete component documentation.

View FAQ Browse Components