Generative UI

Generative UI lets your agent return structured JSON specs that render as Angular components in the chat. ChatComponent auto-detects JSON specs in AI messages and renders them — no manual wiring needed.

The detection and rendering are adapter-neutral: the same [views] path works whether the agent is driven by the LangGraph adapter or the AG-UI adapter. The examples below use @threadplane/langgraph, but only the provideAgent/injectAgent imports change for AG-UI.

How It Works

When AI messages stream token-by-token, the ChatComponent classifies each message's content automatically:

AI message content (token by token)
  → ContentClassifier (auto-detect per message)
    → First non-whitespace is { → JSON spec path
    → Anything else → Markdown path
  → ChatComponent template renders both:
    → Markdown prose via renderMarkdown()
    → JSON specs via RenderSpecComponent + your view registry

The JSON path uses @cacheplane/partial-json to parse incomplete JSON character-by-character, producing a live Spec signal with structural sharing — unchanged elements keep the same object reference so Angular skips re-rendering them.

Setup

Pass a ViewRegistry via the [views] input on ChatComponent:

import { Component, signal } from '@angular/core';
import { injectAgent, provideAgent } from '@threadplane/langgraph';
import { ChatComponent, views } from '@threadplane/chat';
import { WeatherCardComponent } from './weather-card.component';
import { ChartComponent } from './chart.component';
 
const myViews = views({
  weather_card: WeatherCardComponent,
  chart: ChartComponent,
});
 
@Component({
  selector: 'app-chat',
  standalone: true,
  imports: [ChatComponent],
  providers: [
    provideAgent({
      apiUrl: 'http://localhost:2024',
      assistantId: 'gen_ui_agent',
      threadId: signal(null),
    }),
  ],
  template: `
    <div style="height: 100vh;">
      <chat [agent]="chatRef" [views]="myViews" />
    </div>
  `,
})
export class ChatPageComponent {
  chatRef = injectAgent();
 
  myViews = myViews;
}

That's it. When the agent returns a JSON spec as a message, ChatComponent detects it and renders it through your view registry.

Creating View Components

Each view component receives its props as Angular inputs. The component name in the spec's type field maps to the key in your views() call.

// weather-card.component.ts
import { Component, input } from '@angular/core';
 
@Component({
  selector: 'app-weather-card',
  standalone: true,
  template: `
    <div class="p-4 rounded-lg border">
      <h3 class="font-bold">{{ city() }}</h3>
      <p>{{ temperature() }}°F — {{ condition() }}</p>
    </div>
  `,
})
export class WeatherCardComponent {
  readonly city = input.required<string>();
  readonly temperature = input.required<number>();
  readonly condition = input.required<string>();
}

When the agent returns:

{
  "root": "r1",
  "elements": {
    "r1": {
      "type": "weather_card",
      "props": {
        "city": "Seattle",
        "temperature": 62,
        "condition": "Cloudy"
      }
    }
  }
}

The render pipeline instantiates WeatherCardComponent with those props.

Streaming Behavior

Because the JSON is parsed character-by-character as tokens arrive:

Components render as soon as enough of the spec is available
String props grow visibly as tokens stream (e.g., a title filling in letter by letter)
Completed elements keep their object reference — only the currently-streaming element triggers re-renders
The loading input is true while the agent is still streaming

State Store

For interactive generative UI — forms, selections — pass a StateStore via the [store] input:

import { signalStateStore } from '@threadplane/render';
 
@Component({
  template: `
    <chat [agent]="chatRef" [views]="myViews" [store]="store" />
  `,
})
export class InteractiveChatComponent {
  store = signalStateStore({ selectedItem: null });
  // ...
}

The store enables two-way data binding between generative UI components and your application via $state and $bindState prop expressions in specs.

Event Handlers

When a spec wires an on event binding (for example a button's on: { click: 'submitForm' }), the named handler is looked up in the [handlers] map you pass to <chat>. The map is Record<string, (params) => unknown | Promise<unknown>> — each key is a handler name a spec can reference, and the value runs when the event fires.

import { Component, signal } from '@angular/core';
import { injectAgent, provideAgent } from '@threadplane/langgraph';
import { ChatComponent, views } from '@threadplane/chat';
import { ContactFormComponent } from './contact-form.component';
 
@Component({
  selector: 'app-chat',
  standalone: true,
  imports: [ChatComponent],
  providers: [
    provideAgent({
      apiUrl: 'http://localhost:2024',
      assistantId: 'gen_ui_agent',
      threadId: signal(null),
    }),
  ],
  template: `
    <div style="height: 100vh;">
      <chat [agent]="chatRef" [views]="myViews" [handlers]="handlers" />
    </div>
  `,
})
export class ChatPageComponent {
  protected readonly chatRef = injectAgent();
 
  protected readonly myViews = views({ contact_form: ContactFormComponent });
 
  // A spec's `on` binding referencing "submitForm" invokes this function,
  // passing the element's resolved params.
  protected readonly handlers = {
    submitForm: (params: Record<string, unknown>) => {
      console.log('form submitted', params);
    },
  };
}

Handlers can return a value or a Promise — async handlers let a spec await a result (such as a network call) before the UI advances.

A2UI Protocol

For agents that emit A2UI JSONL payloads, ChatComponent auto-detects content prefixed with ---a2ui_JSON---. Pass a2uiBasicCatalog() to [views] when you want those surfaces rendered with the built-in components. See the A2UI guide for details.

What's Next

zap

Streaming Guide

→

Deep dive into content classification, partial JSON parsing, and the streaming pipeline.

code

Specs & Elements

→

Full reference for the JSON spec format, prop expressions, and element types.

layers

A2UI Protocol

→

Render A2UI surfaces with the built-in 18-component catalog.