The AI agent UI framework for Angular.

import { ApplicationConfig } from '@angular/core';
import { provideAgent } from '@threadplane/langgraph';

export const appConfig: ApplicationConfig = {
  providers: [
    provideAgent({ apiUrl: 'http://localhost:2024', assistantId: 'agent' }),
  ],
};

import { Component } from '@angular/core';
import { ChatComponent, type Agent } from '@threadplane/chat';

@Component({
  imports: [ChatComponent],
  template: `<chat [agent]="agent" />`,
})
export class SupportAgentComponent {
  // injectAgent() comes from the adapter you chose above;
  // the component only depends on the runtime-neutral Agent contract.
  protected readonly agent: Agent = injectAgent();
}

Not every backend emits every capability. Interrupts, subagents and checkpoints depend on what the runtime sends. Choose an adapter →

1. Choose an adapter

   Connect LangGraph or an AG-UI endpoint, or start with a fake agent. This is the only file that knows which runtime you run.

   import { ApplicationConfig } from '@angular/core';
   import { provideAgent } from '@threadplane/langgraph';
   
   export const appConfig: ApplicationConfig = {
     providers: [
       provideAgent({ apiUrl: 'http://localhost:2024', assistantId: 'agent' }),
     ],
   };

2. Inject signal-shaped state

   provideAgent() once, injectAgent() where the UI needs messages, status, errors, tool progress and thread actions.

   import { Component } from '@angular/core';
   import { injectAgent } from '@threadplane/langgraph';
   import { ChatComponent } from '@threadplane/chat';
   
   @Component({
     imports: [ChatComponent],
     template: `<chat [agent]="agent" />`,
   })
   export class SupportAgentComponent {
     protected readonly agent = injectAgent();
   }

3. Render the experience you own

   Use the chat compositions, the headless primitives, or register your own design-system components for generated UI.

   import { ApplicationConfig } from '@angular/core';
   import { provideViews, views } from '@threadplane/render';
   import { KpiCardComponent } from './kpi-card.component';
   import { DisruptionsTableComponent } from './disruptions-table.component';
   
   export const appConfig: ApplicationConfig = {
     providers: [
       // Generated UI can render these components and nothing else.
       provideViews(views({
         KpiCard: KpiCardComponent,
         DisruptionsTable: DisruptionsTableComponent,
       })),
     ],
   };

Add Threadplane to this Angular application.

1. Read https://threadplane.ai/AGENTS.md and the current Threadplane quickstart.
2. Inspect this repository's Angular version, application configuration, design
   system, test runner, and existing agent/backend code.
3. Begin with Threadplane's provideFakeAgent() path so the UI can be verified
   without a server or LLM.
4. Render the smallest accessible <chat> experience using the app's existing
   layout and styles.
5. Add a focused test for the integration.
6. After the fake path passes, explain the exact configuration needed for
   either LangGraph or AG-UI. Do not invent credentials, endpoint URLs, or
   backend capabilities.
7. Run the repository's relevant lint, test, and build commands and report
   every changed file.