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.