Dependency injection

provideStream and provideStreamDefaults wire LangGraph streaming through Angular's dependency injection. Child components read a shared stream with injectStream.

Application defaults

Set apiUrl (and optional client / apiKey) once in app.config.ts:

import { ApplicationConfig } from "@angular/core";
import { provideStreamDefaults } from "@langchain/angular";

export const appConfig: ApplicationConfig = {
  providers: [
    provideStreamDefaults({
      apiUrl: "http://localhost:2024",
    }),
  ],
};

Any injectStream call in the app inherits those defaults unless overridden per call.

Shared stream at component level

Add provideStream to a parent component's providers array so descendants share one stream instance:

import { Component } from "@angular/core";
import { provideStream, injectStream } from "@langchain/angular";

@Component({
  providers: [provideStream({ assistantId: "agent" })],
  template: `
    <app-message-list />
    <app-message-input />
  `,
})
export class ChatContainer {}

@Component({
  template: `
    @for (msg of stream.messages(); track msg.id) {
      <div>{{ msg.content }}</div>
    }
  `,
})
export class MessageListComponent {
  readonly stream = injectStream();
}

Companion selectors (injectMessages, injectToolCalls, etc.) take the stream handle from injectStream():

import { Component, inject } from "@angular/core";
import { injectStream, injectMessages } from "@langchain/angular";

@Component({
  /* ... */
})
export class MessageListComponent {
  private readonly stream = injectStream();
  readonly messages = injectMessages(this.stream);
}

Type inference

Pass the agent brand to injectStream to flow state / tool-call / subagent inference through:

import type { agent } from "./agent";
import { injectStream } from "@langchain/angular";

readonly stream = injectStream<typeof agent>();

See Type safety.

Nested layouts (multi-agent)

Provide separate provideStream({ assistantId: "…" }) entries on different parent components — each injector subtree gets its own stream handle.

Custom adapters

provideStream accepts the same discriminated option bag as injectStream, including a custom AgentServerAdapter:

import { HttpAgentServerAdapter, provideStream } from "@langchain/angular";

const transport = new HttpAgentServerAdapter({
  apiUrl: "/api/chat",
  threadId: "thread-123",
});

@Component({
  providers: [provideStream({ transport })],
  /* ... */
})
export class ChatContainer {}

See Transports.

API reference