Installation

A complete walkthrough for installing @threadplane/chat in an Angular 20+ application, activating a commercial license, and rendering your first chat in under 30 minutes.

This guide goes deeper than the Quick Start: license activation, peer dependencies, and the warnings you'll see in the console.

#Prerequisites

#1. Install the packages

Install @threadplane/chat, your chosen runtime adapter, and the marked markdown parser:

# LangGraph backends
npm install @threadplane/chat @threadplane/langgraph marked
 
# AG-UI compatible backends
npm install @threadplane/chat @threadplane/ag-ui marked

marked is a required peer dependency used to render assistant message markdown (code blocks, tables, headings). The chat components ship with their own design tokens and component-scoped styles — no Tailwind, PostCSS, or global stylesheet import is required.

#2. Add your license token

After purchase, Threadplane emails a signed token that looks like:

eyJzdWIiOiJjdXN0QGV4YW1wbGUuY29tIiwidGllciI6ImRldmVsb3Blci1zZWF0IiwiaWF0IjoxNzM…

The token is signed with Ed25519. Verification is offline and advisory — a missing or expired token logs one console.warn line on first boot and the chat keeps working. There is no kill switch, no network call, no telemetry.

So how you store the token is a matter of secret-management preference, not runtime correctness. Pick whichever flow fits your team.

#Option A: .env file (recommended for local dev)

Create .env at the project root (add it to .gitignore):

# .env
THREADPLANE_LICENSE=eyJzdWIi…

Wire the variable into your Angular environment file or read it directly in app.config.ts via your build's env-var mechanism (Vite/esbuild define, Angular CLI fileReplacements, etc.). For a typical Angular CLI setup:

// src/environments/environment.ts
export const environment = {
  production: false,
  threadplaneLicense: process.env['THREADPLANE_LICENSE'] ?? '',
};

#Option B: CI secret / secret manager (recommended for production)

Set THREADPLANE_LICENSE as a build-time secret in GitHub Actions, Vercel, Netlify, CircleCI, AWS Secrets Manager, Doppler, or whatever you already use. Reference it the same way as Option A — the token is baked into the bundle at build time.

# .github/workflows/deploy.yml
- run: npm run build
  env:
    THREADPLANE_LICENSE: ${{ secrets.THREADPLANE_LICENSE }}

#Option C: Commit to a private repo

The token is signed — it cannot be forged. If your repository is private and you accept distributing the token to everyone with repo access, it's safe to commit. Paste the literal string into app.config.ts:

provideChat({
  license: 'eyJzdWIi…',
});

For me, this is the lowest-friction path for a small team — the tradeoff is that everyone with repo access also gets the token. Do not commit it to a public repository — anyone with the token can use the seats it grants.

#3. Wire provideChat() and provideAgent()

Register both providers in your application config. Below is a minimal app.config.ts for a LangGraph backend (swap @threadplane/langgraph for @threadplane/ag-ui if you picked that adapter — the API surface is identical).

// src/app/app.config.ts
import { ApplicationConfig, provideZonelessChangeDetection } from '@angular/core';
import { provideAgent } from '@threadplane/langgraph';
import { provideChat } from '@threadplane/chat';
import { environment } from '../environments/environment';
 
export const appConfig: ApplicationConfig = {
  providers: [
    provideZonelessChangeDetection(),
    provideAgent({
      apiUrl: environment.langgraphApiUrl, // e.g. 'http://localhost:2024'
      assistantId: 'chat',                 // The graph/agent ID exposed by your backend
    }),
    provideChat({
      license: environment.threadplaneLicense,
      assistantName: 'Assistant',
    }),
  ],
};

provideChat() accepts the license as a plain string — you can also inline a typeof guard if your build defines the token as a global:

declare const THREADPLANE_LICENSE: string | undefined;
 
provideChat({
  license: typeof THREADPLANE_LICENSE === 'string' ? THREADPLANE_LICENSE : undefined,
});

provideChat() itself is optional — chat components fall back to sensible defaults — but you'll want it once you start passing a license, an assistantName, or any other global config.

#4. Render your first chat

Add assistantId and threadId to the same root provideAgent({...}) from step 3, then bind <chat> to the result of injectAgent() in your component. Extend the config from step 3 rather than declaring a second provider:

// src/app/app.config.ts
import { ApplicationConfig, provideZonelessChangeDetection, signal } from '@angular/core';
import { provideAgent } from '@threadplane/langgraph';
import { provideChat } from '@threadplane/chat';
import { environment } from '../environments/environment';
 
export const appConfig: ApplicationConfig = {
  providers: [
    provideZonelessChangeDetection(),
    provideAgent({
      apiUrl: environment.langgraphApiUrl, // e.g. 'http://localhost:2024'
      assistantId: 'chat',                 // The graph/agent ID exposed by your backend
      threadId: signal(null),              // null = new thread on first send
    }),
    provideChat({
      license: environment.threadplaneLicense,
      assistantName: 'Assistant',
    }),
  ],
};

The component just injects that agent — no second provider:

// src/app/chat-page.component.ts
import { ChangeDetectionStrategy, Component } 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();
}

Add the route, run ng serve, and open the page. You should see the chat surface mount, an input at the bottom, and streaming responses as the agent replies.

#5. Verify the license activated

Open the browser DevTools console and look for messages prefixed with [threadplane].

Each warning fires at most once per package per status, so the console stays quiet on subsequent renders. There is no UI badge, no banner, and no rate limit — verification is purely a one-time advisory.

#Troubleshooting

console.log('license length:', environment.threadplaneLicense?.length ?? 0);

#What's next