Quick Start

Let's build a streaming chat UI with @threadplane/chat in 5 minutes.

Prerequisites

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

No backend yet?

The provider steps below assume a running LangGraph server at http://localhost:2024. If you don't have one, jump to Run with no backend — mockAgent() drives the UI with canned messages so you can see <chat> render before wiring a real agent.

Do I need a license?

Evaluating? No license needed — the chat runs without a token (with a one-time advisory console warning). Shipping commercially? See Installation for license activation.

1

Install the package

npm install @threadplane/chat marked

marked is the markdown renderer used for assistant messages.

2

Configure providers

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

3

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. See the Multiple agents note in Installation for the full pattern.

That's 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 } 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' },
      { id: 'm2', role: 'assistant', content: 'Hi there — I am a mock agent.' },
    ],
  });
}

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