Markdown renderer

MarkdownRenderer Component

A markdown renderer powered by Streamdown for streaming AI content.

Installation & Basic Usage

import { MarkdownRenderer } from 'cedar-os-components/chatMessages/MarkdownRenderer';

<MarkdownRenderer content='# Hello World\n\nThis is **bold** text.' />;

Props

Prop	Type	Default	Description
content	string	-	Markdown content to render (required)
processPrefix	boolean	false	Enable @@PREFIX@@ processing for chat interfaces
className	string	''	CSS class
inline	boolean	false	Inline rendering mode

Prefix Processing

For chat interfaces where you need special styling for prefixes:

<MarkdownRenderer
	content="@@PREFIX@@Assistant: @@ENDPREFIX@@Here's my response with **markdown**!"
	processPrefix={true}
/>

The prefix markers are styled with accent color and removed from final output.

Streaming AI Example

import { MarkdownRenderer } from 'cedar-os-components/chatMessages/MarkdownRenderer';
import { useChat } from '@ai-sdk/react';

export default function Chat() {
	const { messages } = useChat();

	return messages.map((message) => (
		<MarkdownRenderer
			key={message.id}
			content={message.content}
			processPrefix={true}
		/>
	));
}

Inline Mode

<p>
	Welcome to our platform!
	<MarkdownRenderer
		content='Read our **documentation** and try the `API`'
		inline={true}
	/>
	to get started.
</p>