Quick Start

Give the trip planner a composer, a transcript, and a visible response while the agent works. The <chat> composition binds these pieces to an agent; your application supplies the backend connection and decides where the conversation belongs.

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

// app.config.ts
import { ApplicationConfig, signal } from '@angular/core';
import { provideAgent } from '@threadplane/langgraph';
 
export const appConfig: ApplicationConfig = {
  providers: [
    provideAgent({
      assistantId: 'chat',
      apiUrl: 'http://localhost:2024',
      threadId: signal(null),
    }),
  ],
};

// chat-page.component.ts
import { Component, ChangeDetectionStrategy } from '@angular/core';
import { injectAgent } from '@threadplane/langgraph';
import { ChatComponent } from '@threadplane/chat';
 
@Component({
  selector: 'app-chat-page',
  standalone: true,
  imports: [ChatComponent],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `<div style="height: 100vh"><chat [agent]="chatAgent" /></div>`,
})
export class ChatPageComponent {
  protected readonly chatAgent = injectAgent();
}

That is it — no Tailwind setup, no PostCSS config, no global stylesheet import. The chat ships with its own design tokens and component-scoped styles.

What happens when you send

Ask “Plan a weekend in Portland.” The composition submits the message through the injected agent, renders the messages signal as the answer arrives, and reflects loading or failure in the controls. The composer draft remains UI state; the accepted message becomes conversation state.

No model runs because the component renders. A new run starts when you submit an intention. Follow a conversation traces the same path through tools, generated UI, and saved history.

Run with no backend

No LangGraph server yet? Bind <chat> to mockAgent() from @threadplane/chat. It implements the same Agent contract with canned messages, so the UI renders exactly as it will against a real agent — only the responses are static.

// chat-page.component.ts
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { ChatComponent, mockAgent, staticDelivery } from '@threadplane/chat';
 
@Component({
  selector: 'app-chat-page',
  standalone: true,
  imports: [ChatComponent],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <div style="height: 100vh">
      <chat [agent]="chatAgent" />
    </div>
  `,
})
export class ChatPageComponent {
  protected readonly chatAgent = mockAgent({
    messages: [
      { id: 'm1', role: 'user', content: 'Hello', delivery: staticDelivery('m1') },
      {
        id: 'm2',
        role: 'assistant',
        content: 'Hi there — I am a mock agent.',
        delivery: staticDelivery('m2'),
      },
    ],
  });
}

With mockAgent() you can drop the provideAgent() call — the agent is constructed directly in the component, no DI wiring or apiUrl required. Swap it for injectAgent() once your backend is up.

What's Next