Installation

Install @threadplane/chat, a runtime adapter, and the markdown parser. Every Threadplane package is MIT-licensed; setup requires no registration, activation, or runtime key.

Prerequisites

Supported Angular majors: 20, 21, and 22.

Angular 20–22

@threadplane/chat uses Angular Signals, input(), and contentChildren(). Run ng version to confirm that your project uses Angular 20, 21, or 22.

Node.js compatibility

Use a Node.js version supported by the selected Angular major. Angular 22 supports Node.js ^22.22.3, ^24.15.0, or ^26.0.0. See the Angular compatibility matrix.

A running agent backend (or a mock)

The chat UI needs something to talk to. Two officially supported adapters cover virtually every backend:

@threadplane/langgraph — pick this if your backend is LangGraph or LangGraph Platform.
@threadplane/ag-ui — pick this for an AG-UI-compatible backend such as CrewAI, Mastra, Microsoft Agent Framework, AG2, Pydantic AI, or AWS Strands.

Both adapters expose the same Agent contract to @threadplane/chat, so swapping later is a one-line change. If you do not have a backend yet, use mockAgent() from @threadplane/chat to wire up the UI first.

1. Install the packages

# LangGraph backend
npm install @threadplane/chat @threadplane/langgraph @langchain/core @langchain/langgraph-sdk marked
 
# AG-UI-compatible backend
npm install @threadplane/chat @threadplane/ag-ui @ag-ui/client @ag-ui/core marked

@threadplane/chat also uses @threadplane/telemetry, @threadplane/render, @threadplane/a2ui, @json-render/core, RxJS, and Zod as peer dependencies. npm 7 and later install required peers automatically. KaTeX is optional.

Note: Full peer dependency list

These are the peers @threadplane/chat@0.0.66 declares. npm 7 and later install every required peer for you, so the install command above is enough.

Peer	Range	Required
`@angular/core`	`^20.0.0 \|\| ^21.0.0 \|\| ^22.0.0`	yes
`@angular/common`	`^20.0.0 \|\| ^21.0.0 \|\| ^22.0.0`	yes
`@angular/platform-browser`	`^20.0.0 \|\| ^21.0.0 \|\| ^22.0.0`	yes
`@angular/router`	`^20.0.0 \|\| ^21.0.0 \|\| ^22.0.0`	yes
`@threadplane/telemetry`	`^0.0.66`	yes
`@threadplane/render`	`0.0.66`	yes
`@threadplane/a2ui`	`0.0.66`	yes
`@json-render/core`	`^0.16.0`	yes
`rxjs`	`~7.8.0`	yes
`marked`	`^15.0.0 \|\| ^16.0.0`	yes
`zod`	`^3.25.0`	yes
`katex`	`^0.16.0 \|\| ^0.17.0`	optional

Installing @threadplane/chat therefore also brings in @threadplane/telemetry, @threadplane/render, @threadplane/a2ui, @json-render/core, rxjs, marked, and zod.

2. Configure the runtime

import {
  ApplicationConfig,
  provideZonelessChangeDetection,
} from '@angular/core';
import { provideAgent } from '@threadplane/langgraph';
 
export const appConfig: ApplicationConfig = {
  providers: [
    provideZonelessChangeDetection(),
    provideAgent({
      apiUrl: 'http://localhost:2024',
      assistantId: 'chat',
    }),
  ],
};

That is the only provider <chat> needs. There is no separate chat provider: everything the built-in components render is driven by their inputs, and their appearance by the --tplane-chat-* custom properties.

3. Render your first chat

import { Component } from '@angular/core';
import { ChatComponent } from '@threadplane/chat';
import { injectAgent } from '@threadplane/langgraph';
 
@Component({
  selector: 'app-root',
  imports: [ChatComponent],
  template: `<chat [agent]="agent" />`,
})
export class AppComponent {
  protected readonly agent = injectAgent();
}

If you do not have a backend yet, use mockAgent() from @threadplane/chat to exercise the UI. The @threadplane/chat/testing entry point is separate: it carries the conformance runners and fixtures, not mockAgent().

Troubleshooting

Confirm the backend URL is reachable from the browser.
Confirm the adapter's assistant or graph identifier exists.
Check peer-dependency warnings after installation.
If dependency injection fails, verify the matching runtime provider is registered before the component is created.