Chat

Base UI (Angular) chat is a product primitive for AI threads: message list, streaming cursor, tool-call rows, and a prompt box. Copy it in, bind messages and streaming, and point send at your model API. Nothing in the kit calls a vendor LLM — you own the transport.

When to use

In-app assistants, support bots, and tool-using agents that stream tokens.
When you need a tool row (role tool) between user and assistant messages.

When not to use

A simple comment thread with no streaming — a list plus input is enough.
SMS-style 1:1 chat without AI chrome — build a lighter message list.

Install with npx base-ui-cli add chat.

freenew

Playground

Send a message to see a fake tool call and a streamed assistant reply. Stop cancels the timer.

You are chatting with a demo assistant. Nothing leaves this page.

You

Summarize Base UI in one sentence.

Base UI is a copy-in Angular + Tailwind kit: add only the components you need, then own the source.

Enter to send · Shift+Enter for a new line

Playground

Placeholder

Disabled

HTML

<base-chat
  [messages]="messages()"
  [streaming]="streaming()"
  placeholder="Ask about Base UI…"
  [disabled]="false"
  (send)="onSend($event)"
  (stop)="stop()">
</base-chat>

Usage

HTML

<base-chat
  [messages]="messages()"
  [streaming]="streaming()"
  (send)="onSend($event)"
  (stop)="abort()">
</base-chat>

typescript

messages = signal<ChatMessage[]>([]);
streaming = signal(false);

onSend(text: string) {
  this.messages.update((list) => [
    ...list,
    { id: crypto.randomUUID(), role: 'user', content: text },
  ]);
}

Empty, error, disabled

An empty messages array shows the built-in empty state. Failed turns are just assistant messages. Disable the composer while a request cannot be retried.

How can I help?

Send a message to start the conversation.

Enter to send · Shift+Enter for a new line

The last reply failed. The thread below keeps the error in context.

You

What is in the Pro license?

The assistant could not reach the model. Retry in a moment.

Enter to send · Shift+Enter for a new line

Keyboard & accessibility

Role: The transcript is a live log. The composer is a text field with send and stop.
Focus: Focus stays in the prompt. Streaming does not move focus. Disabled locks the composer.

Shortcuts

EnterSend the prompt
ShiftEnterInsert a new line

Site-wide VPAT-style notes live on the accessibility report.

Installation

Run the following command to add this component to your project:

bash

npx base-ui-cli add chat

API Reference

For AI agents

Copy a prompt with the registry name, CLI install, and import — or add the Base UI MCP server.

bash

npx -y base-ui-mcp

Base UI provides standalone components. Import the exact elements you want to use into your component.

typescript (Example)

// Install: npx base-ui-cli add chat
// Paths are relative to aliases.components (default: src/app/components)
import { ChatMessageComponent } from './chat/chat-message.component';
import { ChatPromptComponent } from './chat/chat-prompt.component';
import { ChatComponent } from './chat/chat.component';

@Component({
  selector: 'app-your-component',
  imports: [
    ChatComponent,
    ChatMessageComponent,
    ChatPromptComponent
  ],
  template: `...`
})
export class YourComponent {}

API for chat — generated from JSDoc in the library source.

API reference for chat
API	Member	Type	Default	Description
`base-chat`	`class`	`string`	`''`	Additional host classes.
`base-chat`	`messages`	`ChatMessage[]`	`[]`	Ordered conversation turns.
`base-chat`	`streaming`	`boolean`	`false`	True while an assistant reply is streaming.
`base-chat`	`placeholder`	`unknown`	`'Send a message…'`	Composer placeholder.
`base-chat`	`disabled`	`boolean`	`false`	Disables the composer.
`base-chat`	`emptyTitle`	`unknown`	`'How can I help?'`	Empty-state title when `messages` is empty.
`base-chat`	`emptyDescription`	`unknown`	`'Send a message to start the conversation.'`	Empty-state description.
`base-chat`	`(send)`	`string`	—	Emits the user prompt.
`base-chat`	`(stop)`	`void`	—	Emits when the user stops generation.
`base-chat-message`	`class`	`string`	`''`	Additional host classes.
`base-chat-message`	`message`	`ChatMessage`	—	Message to render.
`base-chat-prompt`	`class`	`string`	`''`	Additional host classes.
`base-chat-prompt`	`placeholder`	`unknown`	`'Send a message…'`	Placeholder for the composer.
`base-chat-prompt`	`streaming`	`boolean`	`false`	When true, Enter sends Stop instead of Send.
`base-chat-prompt`	`disabled`	`boolean`	`false`	Disables the composer.
`base-chat-prompt`	`(send)`	`string`	—	Emits the trimmed message when the user sends.
`base-chat-prompt`	`(stop)`	`void`	—	Emits when the user stops a streaming response.