Docs idea: generative UI in Angular with json-render

[shteynu]

TanStack AI's Angular package covers chat UIs well: injectChat, createChatHook, and widgets as standalone components. One pattern the docs don't show yet is generative UI. In generative UI, the model composes an interface from a catalog of your own components instead of answering in text: a form, a card, or a small dashboard that builds up while the response streams.

I maintain ngx-json-render, an Angular renderer for json-render specs. I tried it with TanStack AI, and the two fit together without any glue package:

Server: a plain chat() call. catalog.prompt() teaches the model the catalog and json-render's streaming format, which is JSONL patches in plain text.

import { chat, toServerSentEventsResponse } from "@tanstack/ai";
import { openaiText } from "@tanstack/ai-openai";
import { catalog } from "./catalog";

export async function POST(request: Request) {
  const { messages } = await request.json();
  const stream = chat({
    adapter: openaiText("gpt-5.5"),
    messages,
    systemPrompts: [catalog.prompt()],
  });
  return toServerSentEventsResponse(stream);
}

Client: injectChat from @tanstack/ai-angular. The client compiles the assistant text that has arrived so far into a spec and hands it to <json-render>:

import { Component, computed } from "@angular/core";
import { compileSpecStream } from "@json-render/core";
import { injectChat } from "@tanstack/ai-angular";
import { fetchServerSentEvents } from "@tanstack/ai-client";
import { JsonRenderer, type Spec } from "ngx-json-render";
import { registry } from "./registry";

@Component({
  selector: "app-generative-ui",
  imports: [JsonRenderer],
  template: `
    <button (click)="chat.sendMessage('A login form')">Generate</button>
    @if (spec(); as spec) {
      <json-render [spec]="spec" [registry]="registry" [loading]="chat.isLoading()" />
    }
  `,
})
export class GenerativeUIComponent {
  chat = injectChat({ connection: fetchServerSentEvents("/api/ui") });
  registry = registry;

  spec = computed<Spec | null>(() => {
    const last = this.chat.messages().filter((m) => m.role === "assistant").at(-1);
    const text = last?.parts.map((p) => (p.type === "text" ? p.content : "")).join("");
    if (!text) return null;
    const spec = compileSpecStream<Partial<Spec>>(text);
    return spec.root && spec.elements ? (spec as Spec) : null;
  });
}

I checked this end to end on an Angular 21 app with @tanstack/ai 0.67.0, @tanstack/ai-angular 0.13.2, and @tanstack/ai-openai 0.29.0. The model was aimock, the same mock your E2E suite uses, replaying a login-form spec in small chunks. The UI built up component by component as the chunks arrived.

Why plain text and not outputSchema: the OpenAI adapter sends structured output with strict: true. OpenAI's strict mode needs additionalProperties: false on every object, but a json-render spec keeps its elements in a map keyed by element id. Plain text works the same on every adapter.

Would a page like this be welcome in the docs? If yes, where should it go? The chat UI recipes are React and built on createChatHook, so a section in the Angular guide or a separate tutorial might fit better. I'm happy to write it as a PR whichever way you prefer.