Installation

Detailed setup guide for injectAgent() in your Angular application.

Requirements

Supported Angular majors: 20, 21, and 22.

Angular 20–22

injectAgent() uses Angular Signals and the modern injection context API. Angular 20, 21, or 22 is required.

Node.js compatibility

Use a Node.js version supported by the selected Angular major. Angular 22 supports Node.js ^22.22.3, ^24.15.0, or ^26.0.0. See the Angular compatibility matrix.

LangGraph Platform

A running LangGraph agent reachable over HTTP. Local (langgraph dev) or deployed (LangGraph Cloud) both work.

Install the package

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

@threadplane/langgraph provides injectAgent() and provideAgent(). @threadplane/chat provides the runtime-neutral chat UI consumed by the LangGraph adapter. The LangChain packages are required peers used by the adapter's message types and LangGraph SDK client.

Peer Dependencies

@threadplane/langgraph declares the following peer dependencies:

Package	Version
`@threadplane/chat`	`0.3.2`
`@threadplane/telemetry`	`^0.3.2`
`@angular/core`	`^20.0.0 \|\| ^21.0.0 \|\| ^22.0.0`
`@langchain/core`	`^1.1.33`
`@langchain/langgraph-sdk`	`^1.7.4`
`rxjs`	`~7.8.0`

The pin on @threadplane/chat is exact, because the two packages are released together; the other ranges are ordinary semver.

npm 7 and newer install peer dependencies automatically, so the command above is enough. It is worth knowing what arrives with it: @threadplane/chat declares its own peers — @threadplane/telemetry, @threadplane/render, @threadplane/a2ui, zod, @json-render/core, marked, the @angular/common, @angular/platform-browser, and @angular/router packages, and an optional katex for math rendering.

Configure the provider

Add provideAgent() to your application configuration. This is the single source of truth for the agent — injectAgent() consumes the config and takes at most a typed AgentRef.

// app.config.ts
import { ApplicationConfig } from '@angular/core';
import { provideAgent } from '@threadplane/langgraph';
import { environment } from '../environments/environment';
 
export const appConfig: ApplicationConfig = {
  providers: [
    provideAgent({
      apiUrl: environment.langgraphUrl,
      assistantId: 'chat',
    }),
  ],
};

Tip: Multiple agents in one app

Need more than one agent instance (e.g. a sidebar chat with a different assistant)? Use hierarchical DI: declare a component-scoped providers: [provideAgent({...})] array in the child component, and injectAgent() inside that subtree resolves to that override.

Environment setup

For local development, configure your environment and run a LangGraph server:

// src/environments/environment.ts
export const environment = {
  langgraphUrl: 'http://localhost:2024',
};

# Start LangGraph dev server
langgraph dev
 
# Your agent will be available at http://localhost:2024

Verify installation

Create a minimal component to verify the setup works. injectAgent() must be called in an injection context (a component field initializer or inside inject()).

import { Component } from '@angular/core';
import { injectAgent } from '@threadplane/langgraph';
 
@Component({ selector: 'app-test', template: '' })
export class TestComponent {
  protected readonly test = injectAgent();
 
  constructor() {
    console.log(this.test.status()); // 'idle' — setup is correct
  }
}

Troubleshooting

Warning: Common issues

Version mismatch -- If you see errors about missing APIs or unknown decorators, confirm your Angular version is 20, 21, or 22. Run ng version to check. Versions outside this range are not supported.

CORS errors -- If the browser console shows Access-Control-Allow-Origin errors, your LangGraph server is not configured for cross-origin requests. The LangGraph dev server allows all origins by default. For production, make sure your deployment's CORS policy includes your Angular app's domain.

Connection refused -- If you see ERR_CONNECTION_REFUSED, verify your LangGraph server is running and that the apiUrl matches the correct host and port. Run langgraph dev and confirm the server starts at the expected address (default http://localhost:2024).

Missing or incorrect API URL -- The runtime needs an API URL configured in provideAgent({ apiUrl }). If the URL is missing or points at the wrong origin, the SDK request will fail when you submit the first run.