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.