Markdown

Renders a string of Markdown content. When streaming is true the root element receives data-ak-streaming so you can animate incomplete text (e.g. a blinking cursor) without any inline styles.

The component is intentionally minimal — it renders the raw content string into a div. Wire a Markdown parser (e.g. react-markdown, marked) inside your own theme layer if you need HTML output.

#Props

#Example

import { Markdown } from '@agentskit/react'

export function AssistantBubble({ part }) {
  return (
    <Markdown
      content={part.text}
      streaming={part.streaming}
    />
  )
}

#data-ak-markdown

The root div always carries data-ak-markdown. When streaming is true it also receives data-ak-streaming="true".

[data-ak-markdown] {
  line-height: 1.6;
  white-space: pre-wrap;
}

[data-ak-markdown][data-ak-streaming="true"]::after {
  content: '▋';
  animation: blink 1s step-start infinite;
}

#Per-framework

#Related

• Message — hosts Markdown for assistant text parts
• CodeBlock — companion for fenced code blocks
• data-attributes — full data-ak-* reference
• Theming