Installation

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

#Requirements

1
Angular 20+

agent() uses Angular Signals and the modern injection context API. Angular 20 or later is required.

2
Node.js 18+

Required for the build toolchain and package installation.

3
LangGraph Platform

A running LangGraph agent accessible via HTTP. Can be local (langgraph dev) or deployed (LangGraph Cloud).

#Install the package

npm install @ngaf/langgraph @ngaf/chat

@ngaf/langgraph provides agent() and provideAgent(). @ngaf/chat provides the runtime-neutral chat UI consumed by the LangGraph adapter.

#Peer Dependencies

@ngaf/langgraph declares the following peer dependencies:

PackageVersion
@ngaf/chat*
@ngaf/licensing*
@angular/core^20.0.0 || ^21.0.0
@langchain/core^1.1.33
@langchain/langgraph-sdk^1.7.4
rxjs~7.8.0

#Configure the provider

Add provideAgent() to your application configuration. This sets global defaults for all agent instances. It is recommended when most agents share the same LangGraph URL, but it is not required if each agent() call passes its own apiUrl.

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

Any option passed to agent() directly overrides the global provider config. You can set a default apiUrl globally and override it for specific agents.

#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. agent() must be called in an injection context (a component field initializer or inside inject()).

// In a component field initializer (injection context)
const test = agent({
  apiUrl: 'http://localhost:2024',
  assistantId: 'chat_agent',
});
console.log(test.status()); // 'idle' - setup is correct

If you already configured provideAgent({ apiUrl }), you can omit apiUrl from individual agents.

#Troubleshooting

Common issues

Version mismatch -- If you see errors about missing APIs or unknown decorators, confirm your Angular version is 20 or later. Run ng version to check. Earlier versions do not support the injection context APIs that agent() relies on.

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 -- provideAgent() is optional, but the runtime still needs an API URL from either provideAgent({ apiUrl }) or agent({ apiUrl }). If the URL is missing or points at the wrong origin, the SDK request will fail when you submit the first run.

#Next steps