Quick Start

Build a streaming chat UI with @threadplane/chat in 5 minutes.

Note: Prerequisites

Angular 20–22 project with an agent provider configured. See Agent Installation if you need help.

Note: No backend yet?

Try without a backend renders the same <chat> with a fake agent — no server, no key. The provider steps below assume a running LangGraph server at http://localhost:2024.

Note: Can I use this commercially?

Yes. Every Threadplane package is MIT-licensed for commercial and noncommercial use, with no token, activation step, or runtime check.

Install the package

npm install @threadplane/chat @threadplane/langgraph @langchain/core @langchain/langgraph-sdk marked

@threadplane/langgraph provides the adapter used by the provider snippet below. The LangChain packages are required peers for that adapter, and marked is the markdown renderer used for assistant messages.

Configure providers

// app.config.ts
import { ApplicationConfig, signal } from '@angular/core';
import { provideAgent } from '@threadplane/langgraph';
 
export const appConfig: ApplicationConfig = {
  providers: [
    provideAgent({
      assistantId: 'chat',
      apiUrl: 'http://localhost:2024',
      threadId: signal(null),
    }),
  ],
};

provideAgent() is the only provider <chat> requires. There is no separate chat provider: everything <chat> renders is driven by its inputs.

Render the chat

// chat-page.component.ts
import { Component, ChangeDetectionStrategy } from '@angular/core';
import { injectAgent } from '@threadplane/langgraph';
import { ChatComponent } from '@threadplane/chat';
 
@Component({
  selector: 'app-chat-page',
  standalone: true,
  imports: [ChatComponent],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `<div style="height: 100vh"><chat [agent]="chatAgent" /></div>`,
})
export class ChatPageComponent {
  protected readonly chatAgent = injectAgent();
}

injectAgent() returns the singleton wired up in Step 2 — no extra provider needed here. To host several <chat> surfaces that share a backend URL but target different graphs, re-provide provideAgent({...}) in a component's providers: [] array; Angular's hierarchical DI scopes that override to the subtree.

That is it — no Tailwind setup, no PostCSS config, no global stylesheet import. The chat ships with its own design tokens and component-scoped styles.

Run with no backend

No LangGraph server yet? Bind <chat> to mockAgent() from @threadplane/chat. It implements the same Agent contract with canned messages, so the UI renders exactly as it will against a real agent — only the responses are static.

// chat-page.component.ts
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { ChatComponent, mockAgent, staticDelivery } from '@threadplane/chat';
 
@Component({
  selector: 'app-chat-page',
  standalone: true,
  imports: [ChatComponent],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <div style="height: 100vh">
      <chat [agent]="chatAgent" />
    </div>
  `,
})
export class ChatPageComponent {
  protected readonly chatAgent = mockAgent({
    messages: [
      { id: 'm1', role: 'user', content: 'Hello', delivery: staticDelivery('m1') },
      {
        id: 'm2',
        role: 'assistant',
        content: 'Hi there — I am a mock agent.',
        delivery: staticDelivery('m2'),
      },
    ],
  });
}

With mockAgent() you can drop the provideAgent() call — the agent is constructed directly in the component, no DI wiring or apiUrl required. Swap it for injectAgent() once your backend is up.