Quick Start

Build a streaming chat component with streamResource() 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 @cacheplane/stream-resource

Configure the provider

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

// app.config.ts
import { provideStreamResource } from '@cacheplane/stream-resource';
 
export const appConfig: ApplicationConfig = {
  providers: [
    provideStreamResource({
      apiUrl: 'http://localhost:2024',
    }),
  ],
};

Create a chat component

Use streamResource() 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 { streamResource } from '@cacheplane/stream-resource';
import type { BaseMessage } from '@langchain/core/messages';
 
@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 = streamResource<{ messages: BaseMessage[] }>({
    assistantId: 'chat_agent',
    threadId: signal(localStorage.getItem('threadId')),
    onThreadId: (id) => localStorage.setItem('threadId', id),
  });
 
  isStreaming = computed(() => this.chat.status() === 'loading');
 
  send() {
    const msg = this.input();
    if (!msg.trim()) return;
    this.chat.submit({ messages: [{ role: 'user', content: msg }] });
    this.input.set('');
  }
}