AgentPrism — Visualize AI Agent Traces

简介

AgentPrism 是开源的 React 组件库：把 AI agent 的 trace（含 OpenTelemetry spans）变成可读的图形与时间线，便于调试规划、工具调用与重试链路。

• 适合谁： 用 trace-first 的方式调试复杂 agent
• 可搭配： React 19+；TypeScript；Tailwind CSS 3；可接 OpenTelemetry 数据适配（见 README）
• 准备时间： 20–50 分钟

实战建议

• GitHub：341 stars · 16 forks；最近更新 2026-04-14（GitHub API 验证）。
• README 提供在线 demo 与 Storybook，用于浏览组件与交互行为。
• README 建议用 TraceViewer + OpenTelemetry 适配器，把原始 trace 文档转成可视化 spans。

主要内容

一个更可扩展的 trace 调试流程：

1. 每个用户请求都带 trace_id，并贯穿工具调用与重试链路。
2. 统一 span 结构：计划→工具→模型→结果，让 UI 永远可读。
3. 给 span 标注成本（tokens/latency），慢在哪里、贵在哪里一眼可见。
4. 为每个功能保留一条“金标 trace”，prompt 变更时用它做回归基准。

收益是迭代更快：看一条时间线就能定位问题，不必翻无数日志。

FAQ

能直接上生产吗？ 答：README 标注为 Alpha；建议锁定版本并预期 API 会变动。

必须用 OpenTelemetry 吗？ 答：不必须。README 展示了 OTel 适配，但任何 trace 格式都可以转成 spans。

从哪个组件开始最简单？ 答：README 建议从 TraceViewer 开始，它提供完整的 trace 可视化界面。