AI Message Components

Dev Design Library indexes 20 ai message components from 9 open-source UI libraries, with the most coming from Notra, LocalMode, AI CSS, AI Elements (Svelte) and Halaska UI. Each one links to its page with the source code, a live preview where available, the library license and the install command. Ai message components belong to the AI group.

• Ai User MessageReact Spectrum · React
• Chat Chat ItemLobe UI · React
• Streaming ResponsebeUI · ReactProvides the active and completed response lifecycle.
• MessageAI Elements (Svelte) · SvelteA full chat message system with branching, attachments, actions, and markdown streaming responses.
• AI OverviewNotra · ReactThe AI Overview root, built on shadcn Collapsible and Button, with a collapsible Show more.
• Message ActionsAI CSS · React
• MessageLocalMode · ReactRole-aware chat message (data-role) rendering string or ContentPart[] — markdown text, image thumbnails with a…
• Streaming Answer PatternHalaska UI · React
• AI Answer 03ReactFrame · ReactAn agent-style AI answer card, a researching/reading/writing step tracker with a progress rail, markdown-style bold…
• ResponseAI Elements (Svelte) · SvelteA markdown response renderer for streamed AI content.
• ChatGPT MessageNotra · ReactUser bubbles and bubble-less assistant turns with reasoning and hover actions.
• Text ResponseAI CSS · React
• ResponseLocalMode · ReactStreaming markdown renderer for assistant output: shows a cursor while streaming, tolerates partial/unterminated…
• Claude Code MessageNotra · ReactUser turns on a full-width bar and assistant turns behind a white bullet, with inline code and bold.
• Structured Output ViewerLocalMode · ReactA result panel for useGenerateObject extending Response: pretty-printed JSON, an independently-usable inference-stats…
• Claude MessageNotra · ReactUser bubbles and serif assistant replies with slots for search, sources and actions.
• Codex MessageNotra · ReactUser turns on a full-width band and assistant turns behind a dim bullet.
• Gemini MessageNotra · ReactGemini's user pill and bubble-less assistant turn.
• OpenCode MessageNotra · ReactUser prompts on a blue-ruled panel and indented assistant replies with OpenCode's markdown colors.
• Perplexity MessageNotra · ReactUser pill and assistant answer turn with search and action slots.

Libraries with ai message components

• Notra
• LocalMode
• AI CSS
• AI Elements (Svelte)
• Halaska UI

Related categories

• React AI Message Components
• Tailwind CSS AI Message Components
• shadcn/ui AI Message Components
• AI Element Components
• Prompt Input Components
• AI Orb Components
• Conversation Components
• Attachment Components
• Thinking Indicator Components
• Voice Input Components
• Model Selector Components
• Tool Call Components
• Sources Components
• Streaming Text Components
• Reasoning Components
• Citation Components
• Suggestions Components
• Task Queue Components
• Agent Plan Components