Quick Start

Build a streaming chat component with injectAgent() in 5 minutes.

Prerequisites

Angular 20+ project with Node.js 18+. If you need setup help, see the Installation guide.

1

Install the package

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

Most npm clients install peer dependencies automatically. Listing the LangChain peers explicitly keeps strict package managers quiet. They may still ask you to install the Angular and RxJS peers listed in the Installation guide if your app does not already provide them.

2

Configure the provider

Add provideAgent() to your application config with your LangGraph Platform URL and assistant id.

// app.config.ts
import { provideAgent } from '@threadplane/langgraph';
 
export const appConfig: ApplicationConfig = {
  providers: [
    provideAgent({
      apiUrl: 'http://localhost:2024',
      // 'chat' maps to the key in your langgraph.json "graphs" config
      assistantId: 'chat',
    }),
  ],
};

Threads are optional here

Persisting a threadId so conversations survive a page refresh is opt-in — leave it out for the minimal path and add it later. See Persistence.

3

Create a chat component

Now let's wire up the UI. Call injectAgent() in a component field initializer — every property on the returned ref is an Angular Signal.

// chat.component.ts
import { Component, ChangeDetectionStrategy, signal, computed } from '@angular/core';
import { injectAgent } from '@threadplane/langgraph';
 
@Component({
  selector: 'app-chat',
  templateUrl: './chat.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ChatComponent {
  input = signal('');
 
  protected readonly chat = injectAgent();
 
  isStreaming = computed(() => this.chat.isLoading());
 
  send() {
    const msg = this.input();
    if (!msg.trim()) return;
    this.chat.submit({ message: msg });
    this.input.set('');
  }
}