Message Input
<mcp-message-input>Message input with auto-resizing textarea, send button, and keyboard shortcuts.
AIWeb Component
Overview
Message input with auto-resizing textarea, send button, and keyboard shortcuts.
Preview
Preview
Loading components...
Import
javascript
// Import all components (recommended)
import '@mcpsystem/ui';
// Or import the class for TypeScript
import { McpMessageInput } from '@mcpsystem/ui';Basic Usage
html
<mcp-message-input placeholder="Ask Claude anything..."></mcp-message-input>API Reference
Properties(6)
| Property | Attribute | Type |
|---|---|---|
placeholder | placeholder | string |
disabled | disabled | boolean |
maxLength | max-length | number |
maxRows | max-rows | number |
value | value | string |
showCount | show-count | boolean |
Slots(3)
| Slot | Description |
|---|---|
prefix | Content before the textarea (e.g., attachment button) |
suffix | Content after the textarea (e.g., voice input button) |
send-icon | Custom icon for send button |
Events(4)
| Event | Detail |
|---|---|
mcp-submit | { value: string } |
mcp-input | { value: string } |
mcp-focus | - |
mcp-blur | - |
CSS Parts(4)
Style internal elements using ::part() selector.
| Part | Description |
|---|---|
::part(container) | The outer container |
::part(textarea) | The textarea element |
::part(send-button) | The send button |
::part(character-count) | The character count display |
CSS Custom Properties(5)
Customize appearance by setting these CSS variables.
| Property | Description |
|---|---|
--mcp-input-bg | Input background color |
--mcp-input-border | Input border color |
--mcp-input-radius | Input border radius |
--mcp-input-min-height | Minimum input height |
--mcp-input-max-height | Maximum input height before scroll |
Examples
Basic Usage
Preview
Loading components...
html
<mcp-message-input placeholder="Ask Claude anything..."></mcp-message-input>With Character Limit
Preview
Loading components...
html
<mcp-message-input max-length="500" show-count></mcp-message-input>Handle Submit
Preview
Loading components...
html
<mcp-message-input id="input"></mcp-message-input>
<script>
document.getElementById('input').addEventListener('mcp-submit', (e) => {
console.log('Submitted:', e.detail.value);
});
</script>