Angular Embedded AnalyticsChat UI Overview

AG Studio ships a chat panel. It reads a session's messages, status and artefacts from the harness and renders them.

It holds no conversation state and never talks to an agent, so you can replace the agents behind it without touching it, or replace it and keep everything else.

Showing and Hiding It Copy Link

The panel appears once ai is set. Control its initial state through initialState.panels:

<ag-studio
    [ai]="ai"
    [initialState]="initialState"
    /* other studio properties ... */ />

this.ai = myHarness;
this.initialState = {
    pages: [{ id: 'main', widgets: {}, widgetLayout: {} }],
    selectedPageId: 'main',
    panels: {
        ai: { collapsed: true },
    },
};

Users can toggle it from the toolbar whatever you start with. Set collapsed: true and never open it if your own UI is the chat surface - see Your own UI.

What It Renders Copy Link

Messages in the order things happened. A message is a list of parts, so text, reasoning and tool calls interleave rather than being grouped by kind.

Tool calls as a sequence of steps hanging off a vertical line, one marker each, so a long run reads as one thing rather than as many. A step shows the words the tool declared for it, and opens to a component of your own when the tool declares one. See Tool Components.

Delegations as a step whose body holds the sub-run's own sequence. A delegating tool call carries the child thread's id, and the panel renders that child conversation inside the parent transcript, which is how the built-in agents' hand-offs stay followable.

Artefacts as cards rather than transcript lines. A plan is the built-in example: durable, revised across turns, and rendered once rather than repeated.

Threads, with a roster and a new-conversation control. Threads belong to the harness; the panel only picks which is on screen.

Starting a new conversation creates nothing until its first message is sent, so a chat nobody spoke in leaves no thread behind. An unnamed conversation is labelled by the panel, in the reader's language, rather than carrying a stored title.

Streaming Copy Link

Text appears as it arrives. Tool calls appear as soon as the model starts writing their arguments, so a step is visible - and its label and detail are rendering - before the arguments are complete. Both get partial arguments during that phase; see Streaming arguments.

Localisation Copy Link

Every string the panel renders goes through the locale system, under keys prefixed ai. Override any of them with localeText, exactly as for the rest of Studio:

<ag-studio
    [localeText]="localeText"
    /* other studio properties ... */ />

this.localeText = {
    aiNewChat: 'New conversation',
    aiMessageInputPlaceholder: 'Ask about this dashboard',
};

See Localisation for the full mechanism.

The prose the model reads is separate, and lives on aiText:

<ag-studio
    [aiText]="aiText"
    /* other studio properties ... */ />

this.aiText = {
    'tools.add_widget.description': 'Add a widget to the grid. Position is 0-indexed.',
};

aiText is keyed by the name a tool advertises, so it works for tools you define yourself. It is not translated - it is prompt text, written in whatever language your model works in. See Change the Tool Set.

Replacing It Copy Link

The panel reads a session and nothing else, so anything that can read a session can replace it. There are two routes:

• Keep Studio's harness and render the session in your own components - Your own UI.
• Drop the conversation entirely and drive tools directly - Without a Harness.

Next Copy Link

• Panel Features - the model picker and prompt starters
• Tool Components - how a tool call appears in the transcript
• Built-in Harness - the session contract the panel reads