ngx-prompt-kit

About

Port of ibelick/prompt-kit to Angular. Components for building AI chat UIs — message threads, prompt input, streaming responses, markdown rendering, code blocks, and more.

Distributed via Angular schematics: ng add and ng generate copy source into your project, where you own and edit the code. No runtime dependency on this package after generation.

Features

• Schematic-based — Source lands in your project, no version-pinning hell
• Spartan UI native — Composes with the helm primitives you already use
• Signal-based — input(), output(), model(), viewChild() throughout
• OnPush by default — Every component uses ChangeDetectionStrategy.OnPush
• SSR-safe — All browser APIs guarded with isPlatformBrowser / afterNextRender
• Tailwind v4 — Utility-first styling, no CSS-in-JS
• Accessible — ARIA labels, keyboard navigation, focus management
• Standalone — No NgModules, just import and use
• Tree-shakeable — Add only the components you use

Prerequisites

• Angular 19+ (tested on Angular 21)
• Tailwind CSS v4
• Spartan UI installed in your workspace

Installation

ng add ngx-prompt-kit

Configure install path (optional)

ng generate ngx-prompt-kit:init

Prompts for an install path and persists it to components.json under promptKit.componentsPath. Skip this step and components default to libs/prompt-kit.

Add components

ng generate ngx-prompt-kit:message
ng generate ngx-prompt-kit:prompt-input
ng generate ngx-prompt-kit:markdown

Components land at libs/prompt-kit/<name>/ by default. Override per command with --path=<dir> or set a workspace-wide path via ng generate ngx-prompt-kit:init. The cn() utility lands alongside automatically.

Bulk install

Pick from a checklist:

ng generate ngx-prompt-kit:ui

Or skip the prompt:

ng generate ngx-prompt-kit:ui --components=message,prompt-input,markdown

Helm prerequisites must be installed separately via Spartan's CLI:

ng g @spartan-ng/cli:ui

Usage

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());
  }
}

See the live demo for every component with code snippets.

Notes

• Re-running a component schematic overwrites the existing files. If you've customized them, commit your changes first.
• You own the generated source — edit freely. Updates to this package won't push changes to your code.
• image uses Angular's NgOptimizedImage directive when given a real src URL; falls back to a native <img> for base64/blob payloads.
• cost-display does not bundle model pricing tables — those drift constantly. Pass inputPricePer1M / outputPricePer1M from your own source of truth.

Credit

Original React implementation by Julien Thibeaut (ibelick) — MIT-licensed.

License

MIT