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.