Web Components
6 components for building AI chat interfaces. Import from @mcpsystem/ui and use as custom HTML elements.
Installation
npm install @mcpsystem/uiThen import and use components directly in HTML or any framework.
Chat Message
<mcp-chat-message>Displays user and assistant messages with customizable styling, avatars, and timestamps.
Typing Indicator
<mcp-typing-indicator>Animated indicator showing the AI assistant is processing or generating a response.
Code Block
<mcp-code-block>Code block component with copy button and optional line numbers. Optimized for AI chat interfaces.
Message Input
<mcp-message-input>Message input with auto-resizing textarea, send button, and keyboard shortcuts.
Streaming Text
<mcp-streaming-text>Typewriter effect for AI responses with configurable speed and cursor.
Token Counter
<mcp-token-counter>Token usage counter with visual progress indicator and warning states.
Framework Agnostic
Works with React, Vue, Svelte, or plain HTML. Built with Lit for native Web Component support.
Themeable
Customize with CSS custom properties. Automatic dark mode support with prefers-color-scheme.
Accessible
ARIA labels, keyboard navigation, and screen reader support built-in.