OPEN SOURCE · REACT + VUE

Markdown for AI,
built for the stream.

Render streaming Markdown in React and Vue. GFM, math and multilingual text, with your own components or Mantine for code highlighting and diagrams.

Get started Try the examples

STREAMING / MATH / MULTILINGUAL

AI MarkdownStreaming illustration

Turn this idea into a clear answer.

A good answer takes shape.

From the first sentence, keep your answer clear and structured.

Give ideas structure with headings and lists
Make code and links fit your interface
Make room for English, 中文 and 日本語

Try your Markdown in the playground

01 / FROM TEXT TO INTERFACE

One string. A growing response.

Append incoming text to one string and pass it to your renderer. Your application handles the connection; AI Markdown handles the content.

Explore streaming →

React
Vue

import AIMarkdown, {
  AIMarkdownStreamingCursor,
} from '@ai-markdown/react';
import '@ai-markdown/react/typography/default.css';
import 'katex/dist/katex.min.css';

type Props = { text: string; streaming: boolean };

export function Message({ text, streaming }: Props) {
  return (
    <AIMarkdown
      content={text}
      streaming={streaming}
      streamingCursor={AIMarkdownStreamingCursor}
    />
  );
}

Pass the accumulated text and producer state from your parent component. See the quick start for dependencies and framework setup.

Set up React →

<script setup lang="ts">
import AIMarkdown from '@ai-markdown/vue';
import '@ai-markdown/vue/styles.css';
import 'katex/dist/katex.min.css';

defineProps<{ text: string; streaming: boolean }>();
</script>

<template>
  <AIMarkdown :content="text" :streaming="streaming" />
</template>