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, assistant id, and thread persistence wiring.

// app.config.ts
import { signal } from '@angular/core';
import { provideAgent } from '@threadplane/langgraph';
 
export const appConfig: ApplicationConfig = {
  providers: [
    provideAgent({
      apiUrl: 'http://localhost:2024',
      // 'chat_agent' maps to the key in your langgraph.json "graphs" config
      assistantId: 'chat_agent',
      threadId: signal(localStorage.getItem('threadId')),
      onThreadId: (id) => localStorage.setItem('threadId', id),
    }),
  ],
};

3

Create a chat component

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