Quick Start

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

Note: Prerequisites

Angular 20–22 project using a Node.js version supported by that Angular major. If you need setup help, see the Installation guide.

Note: No backend yet?

Try without a backend renders the same <chat> with a fake agent — no server, no key.

Install the package

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

npm 7 and newer install peer dependencies automatically, so this command also brings in @threadplane/telemetry and the peers @threadplane/chat declares — @threadplane/render, @threadplane/a2ui, zod, @json-render/core, and marked. Listing the LangChain peers explicitly keeps stricter package managers quiet; the full contract is in the Installation guide.

Configure the provider

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

// app.config.ts
import type { ApplicationConfig } from '@angular/core';
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',
    }),
  ],
};

Note: 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.

Create a chat component

Now 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 { FormsModule } from '@angular/forms';
import { injectAgent } from '@threadplane/langgraph';
 
@Component({
  selector: 'app-chat',
  standalone: true,
  imports: [FormsModule],
  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('');
  }
}