LLM 消息/对话分析工具 — 一个基于 Vue 3 开发的 AI 对话协议可视化分析平台。
在线演示: https://ibadoo.github.io/llm-msg-analysis/
在与大语言模型（LLM）交互的过程中，开发者经常需要调试和分析 SSE 流式响应、对话历史和 API 返回结果。不同的 LLM 提供商（Claude、OpenAI、Gemini）使用各自不同的协议格式，这给调试工作带来了不小的挑战。
llm-msg-analysis 旨在提供一个统一的可视化分析平台，帮助开发者快速理解和调试 LLM 的通信协议，支持 SSE 流解析、对话历史还原和 API 响应检查。
工具能够自动识别粘贴内容的格式类型，无需手动选择：
- SSE 流式文本 — 自动进入 SSE 解析模式
- 对话历史 JSON — 自动进入对话可视化模式
- API 响应 JSON — 自动进入响应预览模式
同时自动检测 LLM 提供商（Claude / OpenAI / Gemini），并以不同颜色标识。
| 提供商 | SSE 流解析 | 对话历史 | API 响应 |
|---|---|---|---|
| Claude (Anthropic) | ✅ | ✅ | ✅ |
| OpenAI (ChatGPT) | ✅ | ✅ | ✅ |
| Gemini (Google) | ✅ | ✅ | ✅ |
将原始 SSE 文本流解析为结构化的事件序列，左侧展示每个事件的类型和数据，右侧实时重构最终消息内容。支持 Claude 的 thinking 块、text 块、tool_use 块等多种内容类型的可视化展示。
将完整的多轮对话 JSON 数据渲染为直观的对话界面，按角色（user / assistant / system）分组显示。支持系统指令折叠、工具定义展示、长内容展开/收起等交互功能。
统一展示三种提供商的非流式 API 响应，包括模型信息、停止原因、内容块列表以及 Token 使用统计（input / output / cache）。
所有文本内容支持 Markdown 渲染和原始文本之间的一键切换，方便开发者查看格式化后的效果或检查原始数据。支持全局批量切换。
集成实时翻译功能，支持中英文互译。智能检测文本语言，中文内容自动翻译为英文，其他语言自动翻译为中文。
界面支持中文和英文两种语言，点击右上角语言按钮即可切换。
- Node.js >= 18
- pnpm 或 npm
# 克隆项目
git clone git@github.com:ibadoo/llm-msg-analysis.git
cd llm-msg-analysis
# 安装依赖
pnpm install
# 或
npm install
# 启动开发服务器
pnpm dev
# 或
npm run dev- 打开浏览器访问
http://localhost:3000 - 在左侧输入区域粘贴 SSE 流文本、对话历史 JSON 或 API 响应 JSON
- 工具会自动检测格式并切换到对应的可视化模式
- 也可以点击「加载示例」按钮快速体验各提供商的示例数据
- Vue 3 — 前端框架，使用 Composition API +
<script setup>语法 - TypeScript — 类型安全，严格模式
- Vite — 构建工具
- Tailwind CSS — 原子化 CSS 样式方案
- markdown-it — Markdown 渲染
├── App.vue # 主应用组件
├── main.ts # 应用入口
├── types.ts # TypeScript 类型定义
├── i18n.ts # 国际化配置
├── components/ # Vue 组件
│ ├── ChatHistory.vue # 对话历史
│ ├── MessagePreview.vue # SSE 消息预览
│ ├── ResponsePreview.vue # API 响应预览
│ ├── EventItem.vue # SSE 事件项
│ ├── MarkdownText.vue # Markdown 渲染
│ └── chat/ # 对话子组件
├── composables/ # Vue Composables
│ └── useLanguage.ts # 国际化
├── services/ # 业务逻辑
│ └── sseParser.ts # SSE 解析核心
├── utils/ # 工具函数
│ └── translate.ts # 翻译服务
└── constants/ # 常量数据
└── examples.ts # 示例数据
本项目已配置 GitHub Actions，推送代码到 master 分支后会自动构建并部署到 GitHub Pages。
Fork 后部署步骤：
- Fork 本仓库到你的 GitHub 账号
- 进入你的 Fork 仓库 → Settings → Actions → General，确认 Actions 已启用
- 进入 Settings → Pages → Source 选择 GitHub Actions
- 进入 Actions 标签页，选择 Deploy to GitHub Pages workflow，点击 Run workflow 手动触发
- 后续每次推送
master分支都会自动构建部署
访问地址格式：
https://<你的用户名>.github.io/llm-msg-analysis/
例如 Fork 本项目后，你的访问地址为：https://<your-username>.github.io/llm-msg-analysis/
MIT