React Chat UI: Message Bubbles, Composer & Model Switcher

Claude-style React chat UI components: message bubbles, thinking collapse, composer, / and @ commands, model switcher, MCP tool card. 6 live demos.

Conversation and input are the core of the Claude chat interface. This React chat UI page covers message bubbles, the collapsible thinking process, the composer, slash commands and @ mentions, the model switcher, and the authorization card for MCP tool calls. The 6 demos on this page correspond to Chapter 3 of the v1 handbook; the composer radius uses the 2.0 value of 14px.

Key values

Item	Value	Source
Composer radius	`2.0 comfortable 14px · compact 12px (20px in 1.x)`	v2/03 §3.3
Thinking expansion	`CSS Grid 0fr → 1fr`	v1/03 §3.2
IME composition guard	`ignore Enter within 500ms after compositionend`	v1/03 §3.3.2
MCP authorization buttons	`Allow once / Always allow / Deny`	v1/03 §3.5

Message bubbles

User messages use a bubble; assistant replies have no background and sit directly on the canvas.

config.js

2 KB

Convert this config to TypeScript and explain each field.

10:24

Claudemodel-name•10:24

> Read config.js

> Infer field types

> Write the TS version

Here is the converted version. Every field has a type, and optional fields use `?`.

export interface Config {
  port: number;
  host?: string;
}

</>

config.ts

v1 • TypeScript config

User bubble radius = --cds-radius + .25rem, max width 85%, long text can collapse; the reply text is inset 4px and enters with message-fade-up, 450ms overshoot. The avatar is a neutral placeholder (lucide Bot), not an official icon.Source: v1/03 §3.1 · code-examples/ChatMessageBubbles.tsx

Thinking collapse panel

While the model is thinking it shows a timer and a three-dot wave; when it finishes, the panel collapses and can be opened to read the full text.

Thinking…

First, pin down the request: a documentation site. Check how the repo components are written, then decide whether to import them directly or port the CSS. The components are React + Tailwind, so they can be imported directly.

While thinking it shows a quiet three-dot wave and a timer; when done it can be expanded. Expansion uses CSS Grid 0fr→1fr, so it doesn't jitter.Source: v1/03 §3.2 · code-examples/ThinkingAccordion.tsx

Composer

The composer is the most rounded element in the interface; 2.0 tightens its radius from 20px to 14px.

Radius 14px (2.0 comfortable density, v2/03 §3.3; 20px in v1), three-state dual-ring shadow (default / hover / focus-within); field-sizing auto height 48–384px; Enter sends, Shift+Enter adds a line, nothing is sent during IME composition.Source: v1/03 §3.3 · v2/03 §3.3 · code-examples/ChatComposer.tsx

Command and mention input

Type / to open commands and @ to reference files; pressing Enter while choosing a candidate in a Chinese (or other CJK) input method does not send the message by mistake.

Type / to open the command list and @ to reference a file; use the arrow keys to choose and Enter to confirm. Enter within 500ms after compositionend is ignored (WebKit composition guard).Source: v1/03 §3.3.2 · code-examples/RichComposerWithMentions.tsx

Model switcher and token gauge

Next to the model dropdown is a ring gauge that shows progress by context usage and separates cache reads from cache writes.

Model tier dropdown + ring SVG context gauge (strokeDashoffset computed from usage), separating cache reads and writes. Drag the slider to simulate usage.Source: v1/03 §3.4 · code-examples/ModelSwitcherWithTokenGauge.tsx

MCP tool decision card

Before an agent calls a tool through MCP, an authorization card appears. Its status goes from awaiting approval to running, then to success, denied or failed.

read_filemcp://filesystem

等待授权 (Pending)

2 fields

{
  "path": "~/projects/app/README.md",
  "encoding": "utf-8"
}

Three-state authorization: awaiting approval (clay outline) → running → success / denied / failed; three decision buttons: Allow once / Always allow / Deny.Source: v1/03 §3.5 · code-examples/McpToolDecisionCard.tsx

How do I use these React chat components in a project?

Copy the matching file from code-examples/ and import cds-theme.css. For example:

import { ChatComposer } from './ChatComposer';

<ChatComposer onSendMessage={(text) => console.log(text)} />

Note: some labels inside the demo components themselves are still in Chinese (they come straight from the repository's components); the behavior and specs are the same.

Sources

The specs on this page come from v1 Chapter 3 and v2 Chapter 3 of the handbook, the component code comes from the repository's code-examples/, and browser events and protocols follow their official documentation.

open-claude-ui · code-examples/: ChatMessageBubbles.tsx, ThinkingAccordion.tsx, ChatComposer.tsx, RichComposerWithMentions.tsx, ModelSwitcherWithTokenGauge.tsx, McpToolDecisionCard.tsx.
MDN: compositionend event: the event the IME composition guard listens for.
MDN: grid-template-rows: the property behind the 0fr → 1fr thinking expansion.
Model Context Protocol specification: Tools: the official definition of MCP tool calls.
React docs: API reference: the React APIs these chat UI components are built on.

When Chinese, Japanese, or Korean users press Enter on an IME candidate floating list to confirm phonetic characters, the unfinished message is erroneously sent.

— open-claude-ui README · CJK IME Composition Double-Interlock Guard

React Chat UI: Conversation & Input Components