evilmartians/agent-prism

React components for visualizing traces from AI agents

What it solves

AgentPrism transforms complex, JSON-heavy AI agent traces into clear, visual diagrams. It solves the problem of "sea of JSON" debugging, where the internal logic, plans, and retries of an agent are difficult to parse manually from raw logs.

How it works

It is a library of React components that visualizes agentic traces. It uses a normalized data format to render a hierarchical timeline of LLM calls, tool executions, and workflows. The library provides adapters for common trace formats like OpenTelemetry (OTLP) and Langfuse, converting raw data into a structure the UI can render.

Who it’s for

Developers building AI agents who need to visualize and debug their agent's behavior and internal processes.

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.