[开源] 让 AI 真正看懂你的 Vue 页面:vite-plugin-vue-mcp-next

本帖使用社区开源推广,符合推广要求。我申明并遵循社区要求的以下内容: 我的帖子已经打上 开源推广 标签: 是 我的开源项目完整开源,无未开源部分: 是 我的开源项目已链接认可 LINUX DO 社区: 是 我帖子内的项目介绍,AI生成、润色内容部分已截图发出: 是 以上选择我承诺是永久有效的,接受社...
[开源] 让 AI 真正看懂你的 Vue 页面:vite-plugin-vue-mcp-next
[开源] 让 AI 真正看懂你的 Vue 页面:vite-plugin-vue-mcp-next
本帖使用社区开源推广,符合推广要求。我申明并遵循社区要求的以下内容:
  • 我的帖子已经打上 开源推广 标签:
  • 我的开源项目完整开源,无未开源部分:
  • 我的开源项目已链接认可 LINUX DO 社区:
  • 我帖子内的项目介绍,AI生成、润色内容部分已截图发出:
  • 以上选择我承诺是永久有效的,接受社区和佬友监督:

以下为项目介绍正文内容,AI生成、润色内容已使用截图方式发出


这个项目是一个 vite 插件帮助前端工程快速开发,欢迎佬们体验丫 :laughing:

面向 Vite + Vue 开发态的 Runtime DevTools MCP 插件。插件会在 Vite dev server 中挂载 MCP(Model Context Protocol,本地工具调用协议)服务,并注入浏览器 runtime,让 AI 客户端读取页面 DOM、Console 日志、Network 请求、Vue 组件树、Router、Pinia 状态,并在显式授权后执行控制台表达式。

适合哪些场景

  • 页面改动后,让 AI 用 DOM 和截图做快速巡检
  • 接口联调时,让 AI 直接看请求参数和响应值
  • 页面报错时,让 AI 读取 Console 日志和运行时状态
  • 组件状态异常时,让 AI 检查 Vue component tree、Router 和 Pinia
  • 多页面、多 tab 或桌面壳页面调试时,让 AI 先用 list_pages 定位目标
  • 团队希望把 AI 辅助调试接入日常本地开发流程
  • Electron 和 Tauri 页面调试使用

vite-plugin-vue-mcp-next 的核心价值,是把 Vue 本地开发页面变成 AI 可检查、可理解、可辅助调试的运行现场。

GitHub 地址:GitHub - xiaou66/vite-plugin-vue-mcp-next: Vite plugin template for Vue MCP runtime debugging. · GitHub

1 个帖子 - 1 位参与者

阅读完整话题

来源: LinuxDo 最新话题查看原文