React AI Message

Message preview

This is the big one—the message component that handles everything in a chat UI. User messages, assistant messages, file attachments, image previews, conversation branching (like when you regenerate a response and want to flip between versions), streaming markdown, action buttons for copy/like/retry. It's a lot, but it's all composable so you pick what you need. User messages go right with a subtle background, assistant messages go left and render markdown. The markdown rendering uses Streamdown which is optimized for streaming—no weird flashing as tokens come in. We've battle-tested this on production chat apps with thousands of messages. It handles the edge cases.

Install with AI

If you've connected the shadcn.io MCP server to Claude Code, Cursor, Windsurf, or any MCP-ready AI editor, prompt your agent to install this AI component for you — no copy-paste, no CLI:

use shadcnio to install the message AI component into my project

Related Components

FAQ