What is message-ui?

Message UI is a library for building rich, image based attachments that chat bots and agents can send through channels like iMessage and WhatsApp, instead of being limited to plain text. The README describes it as similar in spirit to React Email, but for message attachments rather than email templates. The core idea is that you write an attachment as a normal React component, using building blocks like Attachment, Text, and Row that the library provides, styled with regular inline styles or an included Tailwind wrapper. You can preview these components locally in a browser with a command line tool that supports hot reload, so you see your changes as you save the file. When you are ready to actually send an attachment, you export the same React component to a PNG image using a rendering function, which you can then upload, attach to a message, or write to disk from a script, a server route, or a background job. Under the hood, the export step converts the React template to SVG and then to a PNG using Satori and Resvg, which is meant to produce sharp images with predictable output paths. The project is split into several packages: one holding the attachment component primitives like charts, avatars, dividers, and lists, one that handles the actual rendering to SVG or PNG, one for the Tailwind styling wrapper, one running the local preview server, and a command line interface that provides the dev and export commands. Message UI is meant to be used as the attachment layer alongside whatever chat runtime, backend, and delivery system a project already has, and the README mentions it pairs well with the Chat SDK framework for multi channel chat apps. Installation is done through npm, and the project is released under the MIT license.