Conversation

A turn-by-turn AI chat UI with rich text rendering, streaming responses, session management, feedback, and clipboard copy.

Basic Conversation

Type a message and receive a simulated assistant response after a 1-second delay.

Streaming Response

Token-by-token streaming with typing indicator. Type a message to trigger.

Rich Markdown Response

Pre-loaded conversation with tables, code blocks, lists, and formatted text rendered via Vditor.

Feedback System

Thumbs up/down on assistant messages with optional written feedback modal.

Feedback: —

Copy Functionality

Copy single messages or the entire conversation in Markdown, HTML, or plain text.

Copy: —

Session Management

New session, load session (with 5 historical messages), and clear context.

Session: —

Error Display

Inline error messages with expandable technical details.

Message Buffer Limit

maxMessages=5. Rapid message addition evicts the oldest.

Count: —

Disabled State & Programmatic Control

Toggle disabled, add messages programmatically, show/hide typing indicator.

Size Variants

Small, medium, and large size variants side by side.

md (default)

MCP App — Inline Data Table

An MCP App rendering a sortable data table within a message bubble. Check the message log below for JSON-RPC traffic.

MCP Message Log:

MCP App — Canvas Side Panel

An MCP App with an SVG chart. Starts inline — click the expand button (top-right on hover) to open in the canvas side panel. Drag the divider to resize.

MCP App — Bidirectional Communication

An MCP App with a form that sends data to the host and receives a response. Demonstrates full JSON-RPC round-trip.

MCP Message Log:

MCP App — Error Handling

An MCP App that intentionally throws an error after 3 seconds. The host detects it via the error bridge.

MCP Message Log: