Components
Streaming AI Message
A dynamic message component that smoothly renders streaming AI text and automatically formats Markdown as they generate.
Hello AI!
Thinking ...
Searching Web
Extracting Relevant Info
Generating Answer
Thinking ...
Installation
bunx --bun shadcn@latest add https://komaui.iamkunal.in/r/ai-message.jsonUsages
"use client"
import AiMessage from "@/components/ai-message"
const MARKDOWN_CONTENT = `Hi there! 👋 How can I help you today?\n\nHere is a quick example of some **Markdown formatting**:\n- We built a custom \`AiMessage\`\n- We are streaming text\n- It looks great!`;
export default function AiMessageDemo() {
return (
<div className="flex w-full max-w-3xl flex-col items-start p-4">
<AiMessage content={MARKDOWN_CONTENT} className="w-full" />
</div>
)
}Props
| Property | Type | Required | Description |
|---|---|---|---|
| content | string | Yes | The Markdown-formatted text string to be rendered. It seamlessly handles streaming updates and automatically parses GitHub-flavored markdown. |
| className | string | No | Additional Tailwind CSS classes to apply to the outer wrapper container. |