agent-prism

Installation

Copy the UI components to your project:

npx degit evilmartians/agent-prism/packages/ui/src/components src/components/agent-prism

Install the data and types packages:

npm install @evilmartians/agent-prism-data @evilmartians/agent-prism-types

Install required UI dependencies:

npm install @radix-ui/react-collapsible @radix-ui/react-tabs classnames lucide-react react-json-pretty react-resizable-panels

Quick Start

The simplest way to get started is with the TraceViewer component, which provides a complete trace visualization interface:

import { TraceViewer } from "./components/agent-prism/TraceViewer";
import { openTelemetrySpanAdapter } from "@evilmartians/agent-prism-data";

function App() {
  return (
    <TraceViewer
      data={[
        {
          traceRecord: yourTraceRecord,
          spans:
            openTelemetrySpanAdapter.convertRawDocumentsToSpans(yourTraceData),
        },
      ]}
    />
  );
}

The TraceViewer includes:

• Trace List: Browse multiple traces
• Tree View: Hierarchical span visualization with search and expand/collapse
• Details Panel: Inspect individual span attributes
• Responsive Design: Works on desktop and mobile