evilmartians/agent-prism

React components for visualizing traces from AI agents

What it solves

AgentPrism 将复杂、充满 JSON 的 AI 代理追踪转换为清晰的可视化图表。它解决了“JSON 海洋”调试的问题，使得开发者不必手动从原始日志中解析代理的内部逻辑、计划和重试。

How it works

它是一个 React 组件库，用于可视化代理追踪。使用标准化的数据格式渲染 LLM 调用、工具执行和工作流的层级时间线。库提供 OpenTelemetry (OTLP) 和 Langfuse 等常见追踪格式的适配器，将原始数据转换为 UI 能渲染的结构。

Who it’s for

构建 AI 代理的开发者，需要可视化和调试代理行为及内部过程的人。

Highlights

  • Complete Visualization Suite: Includes a TraceViewer for quick setup, or individual components like TraceList, TreeView, and DetailsView for custom layouts.
  • Broad Data Support: Built-in adapters for OpenTelemetry and Langfuse data formats.
  • Semantic Convention Support: Recognizes standard GenAI semantic conventions (e.g., gen_ai.*, llm.*, retrieval.*) to display model info, tokens, and costs.
  • Customizable Theming: Uses Oklch semantic tokens and Tailwind CSS for flexible styling.
  • React 19+ Integration: Designed for modern React and TypeScript environments.