---
product: "AG Studio"
title: "Chat UI Overview"
description: "Learn what the built-in chat panel renders, how to show or hide it, how to translate its strings, and how to replace it."
framework: vue
version: "3.0.0"
related:
    - title: "Panel Features"
      url: "https://www.ag-grid.com/studio/archive/3.0.0/vue/ai-chat-features/"
    - title: "Tool Components"
      url: "https://www.ag-grid.com/studio/archive/3.0.0/vue/ai-tool-components/"
llms: "https://www.ag-grid.com/studio/archive/3.0.0/llms.txt"
---

# Chat UI Overview

AG Studio ships a chat panel. It reads a session's messages, status and artefacts from the [harness](https://www.ag-grid.com/studio/archive/3.0.0/vue/ai-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

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

```ts
<ag-studio
    :ai="ai"
    :initialState="initialState"
    /* other studio properties ... */>
</ag-studio>

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](https://www.ag-grid.com/studio/archive/3.0.0/vue/ai-custom-harness/#your-own-ui).

## What It Renders

**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](https://www.ag-grid.com/studio/archive/3.0.0/vue/ai-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'](https://www.ag-grid.com/studio/archive/3.0.0/vue/ai-builtin-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.

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| `id` | `string` |  | Identifies this message within its thread. |
| `role` | `"user" \| "system" \| "assistant"` |  | Who the message is from. |
| `parts` | `readonly AgAiChatMessagePart[]` |  | The message's content, in the order it is shown. Grows as the content streams in. |
| `createdAt` | `number` |  | When the message was created, in milliseconds since epoch. |

## Streaming

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](https://www.ag-grid.com/studio/archive/3.0.0/vue/ai-tool-components/#streaming-arguments).

## Localisation

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:

```ts
<ag-studio
    :localeText="localeText"
    /* other studio properties ... */>
</ag-studio>

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

See [Localisation](https://www.ag-grid.com/studio/archive/3.0.0/vue/localisation/) for the full mechanism.

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

```ts
<ag-studio
    :aiText="aiText"
    /* other studio properties ... */>
</ag-studio>

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](https://www.ag-grid.com/studio/archive/3.0.0/vue/ai-custom-agents/#change-the-tool-set).

## Replacing It

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](https://www.ag-grid.com/studio/archive/3.0.0/vue/ai-custom-harness/#your-own-ui).
- Drop the conversation entirely and drive tools directly - [Without a Harness](https://www.ag-grid.com/studio/archive/3.0.0/vue/ai-tools/#without-a-harness).

## Next

- [Panel Features](https://www.ag-grid.com/studio/archive/3.0.0/vue/ai-chat-features/) - the model picker and prompt starters
- [Tool Components](https://www.ag-grid.com/studio/archive/3.0.0/vue/ai-tool-components/) - how a tool call appears in the transcript
- [Built-in Harness](https://www.ag-grid.com/studio/archive/3.0.0/vue/ai-builtin-harness/#sessions) - the session contract the panel reads