Installation

Prerequisites

Before installing, make sure you have:

• Bun 1.1+ or npm 10+ (Node.js 22+)
• Angular 19 or later (tested on 21)
• Tailwind CSS v4

Install Spartan UI

ngx-prompt-kit composes Spartan UI helm primitives. Install and initialize Spartan in your workspace first:

bun add -d @spartan-ng/cli
bun x ng g @spartan-ng/cli:init
bun x ng g @spartan-ng/cli:ui

npm install --save-dev @spartan-ng/cli
npx ng g @spartan-ng/cli:init
npx ng g @spartan-ng/cli:ui

# requires @angular/cli installed globally
ng add @spartan-ng/cli
ng g @spartan-ng/cli:init
ng g @spartan-ng/cli:ui

When prompted, select at minimum these helm components: avatar, button, textarea, tooltip.

Add ngx-prompt-kit

One-time bootstrap. Patches the universal runtime deps (clsx, tailwind-merge) and warns if Spartan isn't detected.

bun x ng add ngx-prompt-kit

npx ng add ngx-prompt-kit

ng add ngx-prompt-kit

Configure install path

Optional but recommended. Picks where component sources land and persists it to components.json so subsequent generates don't ask. Skip this and components will use the default libs/prompt-kit.

bun x ng generate ngx-prompt-kit:init

npx ng generate ngx-prompt-kit:init

ng generate ngx-prompt-kit:init

Add components

Generate any component into your project. The cn() utility lands alongside automatically. Component-specific deps (e.g. marked for markdown, shiki for code-block) are added to your package.json when needed.

bun x ng generate ngx-prompt-kit:message
bun x ng generate ngx-prompt-kit:prompt-input
bun x ng generate ngx-prompt-kit:markdown
# ...etc.

npx ng generate ngx-prompt-kit:message
npx ng generate ngx-prompt-kit:prompt-input
npx ng generate ngx-prompt-kit:markdown
# ...etc.

ng generate ngx-prompt-kit:message
ng generate ngx-prompt-kit:prompt-input
ng generate ngx-prompt-kit:markdown
# ...etc.

Components land at libs/prompt-kit/<name>/ by default. Override per command with --path, or set a workspace-wide path with ng g ngx-prompt-kit:init.

Bulk install (interactive)

Pick multiple components from a checklist instead of generating each one manually. The cn() utility and any component dependencies are still installed automatically.

bun x ng generate ngx-prompt-kit:ui

npx ng generate ngx-prompt-kit:ui

ng generate ngx-prompt-kit:ui

Skip the prompt with --components=message,prompt-input,markdown.

Usage

Import the component into a standalone Angular component and use it:

import { Component, signal } from '@angular/core';
import { PkPromptInputImports } from 'libs/prompt-kit/prompt-input';

@Component({
  selector: 'app-chat',
  imports: [PkPromptInputImports],
  template: `
    <pk-prompt-input [(value)]="value" (submitted)="onSubmit()">
      <pk-prompt-input-textarea placeholder="Ask anything..." />
    </pk-prompt-input>
  `,
})
export class Chat {
  protected readonly value = signal('');
  protected onSubmit(): void {
    console.log('submitted:', this.value());
  }
}