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

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('');
  }
}