> ## Documentation Index
> Fetch the complete documentation index at: https://docs.cedarcopilot.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Markdown renderer

# MarkdownRenderer Component

A markdown renderer powered by [Streamdown](https://github.com/vercel/streamdown) for streaming AI content.

## Installation & Basic Usage

```tsx theme={null}
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:

```tsx theme={null}
<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

```tsx theme={null}
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

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