开源 · REACT + VUE

让 AI 回答，
边生成边呈现

在 React 和 Vue 中呈现持续生成的 Markdown。支持 GFM、数学公式与中文排版，可用自己的组件或 Mantine 接入代码高亮与图表。

快速开始体验交互示例

流式渲染 / 数学公式 / 中文排版

AI Markdown流式效果示意

把这个想法写成清晰的回答。

好的回答，逐渐成形。

从第一句话开始，让内容保持清晰、有条理。

用标题与列表组织思路
用自己的组件呈现代码与链接
自然呈现中文、English 与日本語

打开交互示例，试试你的 Markdown

01 / 从文本到界面

一条消息，持续呈现

把收到的文本追加到同一个字符串，再交给渲染组件。应用负责网络连接，AI Markdown 负责内容呈现。

了解流式渲染 →

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}
    />
  );
}

父组件传入当前完整文本和生成状态。安装依赖与框架配置见快速开始。

接入 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>