LLM应用专属的Vue3 Markdown组件 🚀重磅开源!

大家好,今天揣着激动的心宣布:agent-markdown-vue 正式开源啦!这是一个专为大模型应用设计 的Vue3 Markdown渲染组件,解决了我开发LLM产品时踩过的N多坑,目前已经在生产环境稳定使用,日均 uv有 10W+,现在终于能和大家见面了~ 😭😭😭😭😭😭😭😭

为啥要做这个组件?🤔

前阵子开发企业级大模型对话产品,试了一圈现有组件后我 emo了:

  • 自定义可交互式组件,无法实现

  • 大模型返回的超长文本+流程图,重绘重排起来卡得像PPT

当我禁止获取缓存时,会发生下面的效果:页面图片抖动、闪动

  • mermaid流程图、复杂公式这些LLM高频输出格式,支持得稀碎

忍无可忍之下,花了3个月死磕出这个组件------专注LLM场景的Markdown渲染解决方案,现在把它开源出来,希望能帮到同样踩坑的同学!

🌟 这组件到底牛在哪?

⚡️ 性能炸裂

别家组件渲染长文本时像在加载大型游戏?我们直接基于Markdown生成VNode,实现增量渲染

🔧 灵活到离谱:想用啥样式就用啥样式

插槽覆盖全场景自定义,举例几个高频用法:

  • 自定义行内 vue组件 :通过 htmlInline插槽可捕获 markdown 中的行内 HTML 标签(如span),并基于标签属性(attrs)自定义交互逻辑,适用于实现引用标注、动态提示等功能。,完美解决DOM直接插入导致的不可进行交互的弊端
html 复制代码
<template>
  <AgentMarkdown
    :content="content"
    :md-options="{
      breaks: true,
      html: true,
    }"
    :sanitize="true"
  >
    <template #htmlInline="{ tags, attrs }">
      <span v-if="tags === 'span' && attrs[0].type === 'quote'" class="quote-tag">{{
        attrs[0].title
      }}</span>
    </template>
  </AgentMarkdown>
</template>

<script setup lang="ts">
import { AgentMarkdown } from 'agent-markdown-vue';

const content = `
地铁 6 号线串联虎丘、拙政园、平江路等景点,建议优先使用<span data-type="quote" data-title="苏州市人民政府" data-content=""五一"假期,古城旅游交通出行攻略"> </span> 。苏州地铁 6 号线在苏州中心区域,连接了苏州中心、虎丘、拙政园、平江路等景点。
`;
</script>
  • 自定义块级 vue组件 :通过 htmlBlock插槽可处理块级 HTML 标签(如div),结合标签属性实现复杂的块级交互组件,例如带标题和元数据的自定义卡片。
html 复制代码
<template>
  <AgentMarkdown :content="content" :md-options="{ breaks: true, html: true }" :sanitize="true">
    <template #htmlBlock="{ tags, attrs }">
      <div v-if="tags === 'div' && attrs[0].type === 'code'" class="code-block">
        <div class="top">{{ attrs[0].title }}</div>
        <div class="bottom">创建时间:{{ attrs[0].time }}</div>
      </div>
    </template>
  </AgentMarkdown>
</template>

<script setup lang="ts">
import { AgentMarkdown } from 'agent-markdown-vue';
const content = `
根据你的要求,我调整了代码结构:
<div data-type="code" data-title="javascript快速排序的示例" data-time="2023-08-01" data-content="function quickSort(arr) {
  if (arr.length <= 1) {
    return arr;
  }
  const pivot = arr[0];
  const left = [];
  const right = [];
  for (let i = 1; i < arr.length; i++) {
    if (arr[i] < pivot) {
      left.push(arr[i]);
    } else {
      right.push(arr[i]);
    }
  }
  return [...quickSort(left), pivot, ...quickSort(right)];
}">  </div>
`;
</script>
  • 代码块:想换高亮风格?随便插!
html 复制代码
<agent-markdown :content="md">
    <template #javascript="{ rawCode }">
        <MyHighlight :code="rawCode" theme="dark" />
    </template>
</agent-markdown>
  • mermaid流程图:自带平滑渲染效果(附核心代码)
html 复制代码
<template #mermaid="{ rawCode }">
    <MyMermaid :content="rawCode" />
    <!-- 内置防抖+交替渲染,避免闪烁 -->
</template>
  • 图片:懒加载、预览、水印可根据自己的需求进行封装组件
html 复制代码
<template #image="{ src, alt }">
    <MyImage :src="src" :alt="alt" lazy />
</template>

🛡️ 企业级安全:防XSS就像戴了金钟罩

用户输入的内容不敢直接渲染?开启sanitize: true就行:

  • 基于dompurify自动过滤危险HTML

  • 白名单机制严格限制允许的标签/属性

  • 公式、代码块等特殊内容单独处理,安全不打折

🚀 5分钟上手教程

1. 安装

bash 复制代码
# npm
npm install agent-markdown-vue --save-dev
# yarn
yarn add agent-markdown-vue --save-dev
# pnpm
pnpm add agent-markdown-vue --save-dev

2. 基础用法

html 复制代码
<template>
    <agent-markdown
        :content="llmResponse"
        :sanitize="true" 
        @link-click="handleLink"
    />
</template>
<script setup>
import { AgentMarkdown } from 'agent-markdown-vue'

// 大模型返回的markdown内容
const llmResponse = `
# 这是LLM生成的内容
- 支持**加粗**、*斜体*
- 代码块:
\`\`\`javascript
console.log('agent-markdown-vue')
\`\`\`
- 公式:$E=mc^2$
`
const handleLink = (e: Event, href: string, title: string) => { window.open(href, '_blank'); };
</script>

🌱 开源地址 & 贡献指南

👉 在线文档

👉 GitHub仓库 求个star🌟🌟🌟!

目前还在快速迭代中,欢迎大家:

  • 提issue反馈bug/需求

  • 提交PR参与开发(新手友好,有详细贡献指南)

  • 用它开发项目后告诉我,我会收录到案例库~

最后说句掏心窝子的话:做这个组件时踩了无数坑,现在把解决方案开源出来,就是希望大家能少走弯路。如果它帮到了你,欢迎转发给更多有需要的同学,咱们一起让LLM应用开发更简单!💪

相关推荐
家里有只小肥猫10 小时前
css中的v-bind 动态变化
前端·css
NULL Not NULL11 小时前
ES6+新特性:现代JavaScript的强大功能
开发语言·前端·javascript
小高00711 小时前
🚄 前端人必收:5 分钟掌握 ES2025 超实用语法
前端·javascript·面试
gogou11 小时前
在Vite项目中实现Excel快速导入数据到数据库
vue.js
程序员海军11 小时前
2025年上半年前端技术圈生态总结分享
前端·vue.js·react.js
记忆怪 bug12 小时前
2025前端面试题及答案(详细)
前端
群联云防护小杜12 小时前
服务器异常负载排查手册 · 隐蔽进程篇
运维·服务器·前端·数据库·笔记·sql·tcp/ip
小小菜鸡ing12 小时前
简单爬一个小说页面 HTML 的title和内容
前端·html
IT_陈寒12 小时前
Spring Boot 3 + GraalVM:5个实战技巧让Java应用启动速度提升300%
前端·人工智能·后端