Chat Message
<mcp-chat-message>Displays user and assistant messages with customizable styling, avatars, and timestamps.
AIWeb Component
Overview
Displays user and assistant messages with customizable styling, avatars, and timestamps.
Preview
Preview
Loading components...
Import
javascript
// Import all components (recommended)
import '@mcpsystem/ui';
// Or import the class for TypeScript
import { McpChatMessage } from '@mcpsystem/ui';Basic Usage
html
<mcp-chat-message role="user">
How do I center a div?
</mcp-chat-message>
<mcp-chat-message role="assistant" name="Claude">
Use flexbox with justify-content and align-items set to center.
</mcp-chat-message>API Reference
Properties(4)
| Property | Attribute | Type |
|---|---|---|
role | role | 'user' | 'assistant' | 'system' |
timestamp | timestamp | string |
name | name | string |
animated | animated | boolean |
Slots(3)
| Slot | Description |
|---|---|
(default) | Message content (supports HTML/markdown) |
avatar | Custom avatar element to replace default |
actions | Action buttons (copy, regenerate, etc.) |
CSS Parts(6)
Style internal elements using ::part() selector.
| Part | Description |
|---|---|
::part(container) | The message container |
::part(avatar) | The avatar wrapper |
::part(content) | The message content wrapper |
::part(timestamp) | The timestamp element |
::part(name) | The display name element |
::part(actions) | The actions container |
CSS Custom Properties(8)
Customize appearance by setting these CSS variables.
| Property | Description |
|---|---|
--mcp-message-user-bg | User message background color |
--mcp-message-user-fg | User message text color |
--mcp-message-assistant-bg | Assistant message background color |
--mcp-message-assistant-fg | Assistant message text color |
--mcp-message-system-bg | System message background color |
--mcp-message-system-fg | System message text color |
--mcp-message-radius | Border radius |
--mcp-message-max-width | Maximum content width |
Examples
Basic Usage
Preview
Loading components...
html
<mcp-chat-message role="user">
How do I center a div?
</mcp-chat-message>
<mcp-chat-message role="assistant" name="Claude">
Use flexbox with justify-content and align-items set to center.
</mcp-chat-message>With Timestamp
Preview
Loading components...
html
<mcp-chat-message role="assistant" timestamp="2:34 PM">
Here's your answer...
</mcp-chat-message>