Quick Start

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

Prerequisites

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

Install the package

npm install @ngaf/langgraph

Configure the provider

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

// app.config.ts
import { provideAgent } from '@ngaf/langgraph';
 
export const appConfig: ApplicationConfig = {
  providers: [
    provideAgent({
      apiUrl: 'http://localhost:2024',
    }),
  ],
};

Create a chat component

Use agent() 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 { agent } from '@ngaf/langgraph';
 
@Component({
  selector: 'app-chat',
  templateUrl: './chat.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ChatComponent {
  input = signal('');
 
  // 'chat_agent' maps to the key in your langgraph.json "graphs" config
  chat = agent({
    assistantId: 'chat_agent',
    threadId: signal(localStorage.getItem('threadId')),
    onThreadId: (id) => localStorage.setItem('threadId', id),
  });
 
  isStreaming = computed(() => this.chat.isLoading());
 
  send() {
    const msg = this.input();
    if (!msg.trim()) return;
    this.chat.submit({ message: msg });
    this.input.set('');
  }
}