Back to projects

2026 · Creator & Maintainer

ng-agentic

Agent UI your compliance team can sign off on.

The problem

In fintech, KYC, legal and health, an AI feature comes with three extra expectations: a human can step in, AI content is distinguishable from human content, and every decision is traceable. Most agent UI kits treat those as edge cases, and very few of them are built for Angular. Teams end up hand-rolling chat, tool-call views and approval dialogs for every product.

The solution

An open-source library of signal-driven, standalone Angular components for AI and agent interfaces, published on npm under MIT as @ng-agentic/core and @ng-agentic/themes.

  • Chat: streaming with smooth markdown reveal, syntax-highlighted code, a collapsible reasoning trace and a live cursor.
  • Tool Call: cards that make every tool the agent uses visible.
  • Plan: execution plans that show the agent's work step by step.
  • Approval: human-in-the-loop gates to approve, edit or reject an action, with full state tracking.
  • Provenance: one consistent visual language for what the AI wrote, suggested or summarized, across chat, summaries and form fields.
  • Suggestion, Summary and Sidebar: the supporting pieces to place an assistant inside an existing product.

It is backend-agnostic: you bring your own transport through an AG-UI-compatible contract. Theming runs on three layers of design tokens (primitive, semantic, component) with light and dark presets, AA contrast and keyboard-first interaction.

Why I built it

I spent years at Ontop working on two things: a shared component library and the KYB and KYC onboarding around it. When I started building with AI agents I noticed the UI side of regulated products was missing in Angular, so I put both experiences together. I own the whole thing: scope, semantic versioning, release strategy and documentation.

See it working: KYC Vetted

KYC Vetted is a live demo of AI-assisted KYC onboarding built on @ng-agentic/core and the Claude Agent SDK, using synthetic data. Documents are extracted automatically with per-field confidence, forms are auto-filled, and a contextual assistant helps the reviewer. The agent flags high-risk cases and recommends a decision, but nothing closes without a human, and the audit log separates what the AI did from what a person did.

Tech stack

  • Angular 21
  • Signals
  • Standalone Components
  • TypeScript
  • RxJS
  • SCSS
  • Design tokens
  • AG-UI
  • npm
  • Claude Agent SDK (demo)

Challenges

Streaming without jank

Revealing markdown token by token (including code blocks) while keeping the layout stable and the reasoning trace collapsible.

Approvals as state, not a confirm()

Modeling approve, edit and reject as tracked state so the product always knows who decided what, and when.

Themeable without forking CSS

Three token layers so a team can swap a preset or restyle a single component without touching the library's styles.

A contract instead of a backend

Keeping the components independent from any model or server through an AG-UI-compatible transport.

Performance & metrics

2npm packages (core and themes)MITOpen-source licenseAAContrast, keyboard-firstAngular 21Signals and standalone