Streaming Text
<mcp-streaming-text>Typewriter effect for AI responses with configurable speed and cursor.
AIWeb Component
Overview
Typewriter effect for AI responses with configurable speed and cursor.
Preview
Preview
Loading components...
Import
javascript
// Import all components (recommended)
import '@mcpsystem/ui';
// Or import the class for TypeScript
import { McpStreamingText } from '@mcpsystem/ui';Basic Usage
html
<mcp-streaming-text text="Hello, I'm an AI assistant!"></mcp-streaming-text>API Reference
Properties(4)
| Property | Attribute | Type |
|---|---|---|
text | text | string |
speed | speed | number |
cursor | cursor | boolean |
autoStart | auto-start | boolean |
Events(3)
| Event | Detail |
|---|---|
mcp-stream-start | { text: string } |
mcp-stream-progress | { text, progress, total, current } |
mcp-stream-complete | { text: string } |
CSS Parts(2)
Style internal elements using ::part() selector.
| Part | Description |
|---|---|
::part(container) | The text container |
::part(cursor) | The blinking cursor |
CSS Custom Properties(2)
Customize appearance by setting these CSS variables.
| Property | Description |
|---|---|
--mcp-streaming-cursor-color | Cursor color |
--mcp-streaming-cursor-width | Cursor width |
Examples
Basic Usage
Preview
Loading components...
html
<mcp-streaming-text text="Hello, I'm an AI assistant!"></mcp-streaming-text>Slower Speed
Preview
Loading components...
html
<mcp-streaming-text text="Thinking carefully..." speed="20"></mcp-streaming-text>Programmatic Control
Preview
Loading components...
html
<mcp-streaming-text id="stream" auto-start="false"></mcp-streaming-text>
<script>
const stream = document.getElementById('stream');
stream.stream('Here is my response...');
// Later: stream.append(' more text');
// Or: stream.complete();
</script>