AgentPrism: React Components for Visualizing AI Agent Traces

What AgentPrism Solves and Who It Is For

An AI agent run produces a trace: a record of every LLM call, tool invocation, retrieval step, and retry, along with timing, token counts, and costs. That information exists as deeply nested JSON in OpenTelemetry or Langfuse format. Reading raw JSON to debug a multi-step agent run is slow and error-prone.

AgentPrism renders that trace data as a hierarchical timeline in a React application. Spans appear as nested rows with durations. A details panel lets you inspect individual span attributes. The tree view supports search and collapse/expand controls for large traces.

The library is from Evil Martians, a design and engineering consultancy. It is aimed at teams building developer tooling, debugging dashboards, or LLM observability products where trace visualization needs to live inside a React application the team controls, rather than in a separate hosted tool. The repository links to a live demo at agent-prism.evilmartians.io where developers can paste in their own traces to evaluate the UI.

Installation: Two Packages and a Component Copy

AgentPrism splits into three parts. The UI components are distributed as source files rather than a compiled npm package, copied with degit:

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

The data transformation and type packages are installable from npm:

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

The UI components have peer dependencies that must also be installed:

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

The copy-as-source approach means the UI code lives directly in your project. You can modify any component without forking the repository. The trade-off is that upstream changes do not reach your copy automatically; you must re-run the degit command to pull updates and reconcile any local modifications.

The TraceViewer Component and Custom Layouts

The simplest entry point is the TraceViewer component, which provides a complete UI with a trace list, a tree view, and a details panel:

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 input data shape requires a traceRecord object (trace metadata: id, timestamp, status) and a spans array (hierarchical span tree). An optional badges array adds metadata badges to the trace header.

For teams that need more control, the individual components can be assembled manually. TraceList handles trace selection, TreeView renders the span hierarchy with search and expand/collapse controls, and DetailsView handles individual span inspection. The component architecture documented in the README follows a straightforward hierarchy with SearchInput and CollapseAndExpandControls nested inside TreeView.

Data Adapters for OpenTelemetry and Langfuse

AgentPrism normalizes trace data before rendering. Each backend has an adapter in @evilmartians/agent-prism-data.

For OpenTelemetry OTLP format:

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

const spans = openTelemetrySpanAdapter.convertRawDocumentsToSpans(otlpDocument);

For Langfuse observations:

import { langfuseSpanAdapter } from "@evilmartians/agent-prism-data";

const spans = langfuseSpanAdapter.convertRawDocumentsToSpans(langfuseDocument);

All adapters implement the same interface. Beyond full document conversion, each adapter provides convertRawSpanToTraceSpan for single spans, convertRawSpansToSpanTree for the tree view, and getSpanCategory for categorizing a single observation.

The normalized TraceSpan type exposes computed fields through helper functions: getDurationMs for millisecond duration from startTime and endTime, getTotalTokens and getTotalCost for aggregated usage, and getTokenUsageEntries for per-type breakdowns. The span also carries a reasoning field for a thinking tab and a todos field for a task list tab.

Supported Attribute Conventions and OTLP Input Shape

AgentPrism recognizes several standard semantic conventions for extracting span data. The OpenTelemetry GenAI convention uses gen_ai.* attributes for model name, token counts, and costs. OpenInference uses llm.* and retrieval.* attributes. Standard OTEL HTTP and database span attributes are also supported. Custom attributes like gen_ai.usage.cost can be added beyond the standard conventions.

The expected OTLP input follows the resourceSpans structure:

{
  "resourceSpans": [{
    "scopeSpans": [{
      "spans": [{
        "traceId": "abc123...",
        "spanId": "def456...",
        "name": "openai.chat",
        "attributes": [
          {"key": "gen_ai.request.model", "value": {"stringValue": "gpt-4"}},
          {"key": "gen_ai.usage.input_tokens", "value": {"intValue": "150"}}
        ]
      }]
    }]
  }]
}

The live demo at agent-prism.evilmartians.io accepts pasted trace data for visual inspection without any local setup.

Alpha Status, Prerequisites, and Known Limitations

The README marks the library as alpha and states APIs may change. The package.json confirms it requires Node.js 24 or later and pnpm 10 or later for development. The peer dependencies for the UI components require React 19 and Tailwind CSS 3.

The copy-as-source distribution model creates a version management challenge. When the upstream components change, your local copy does not update automatically. There is no version pinning available for the UI components since they are source files, not a versioned package.

The Storybook at storybook.agent-prism.evilmartians.io shows all components with their props and states. This is the primary reference for understanding each component's API while the library is in alpha and in-code documentation may be incomplete.

AgentPrism Compared to Hosted Observability Tools

LangSmith is the trace observability product from the LangChain team. It is a hosted service: you instrument your agent to send traces to LangSmith's servers, and LangSmith handles the storage, visualization, filtering, and comparison. It supports OpenTelemetry and LangChain native instrumentation. The visualization is web-based, maintained by the LangSmith team, and does not require embedding components in your application.

AgentPrism takes the opposite approach. It is an embeddable library. You own the data pipeline: your application receives or stores trace data, passes it through an adapter, and renders it with the TraceViewer. There is no external service, no data leaving your infrastructure, and no dependency on a third-party SaaS product's availability.

For teams building developer tooling where the trace UI needs to live inside their own product, or for teams with data residency constraints that preclude sending trace data to an external service, AgentPrism's embedded model is the relevant choice. For teams that want trace visualization without building and maintaining a UI layer, LangSmith or a similar hosted product is faster to integrate.

Editorial conclusion

AgentPrism is worth adopting for a React application that needs embedded, self-hosted trace visualization with OpenTelemetry or Langfuse data. It requires React 19 and Tailwind CSS 3, and the alpha designation means APIs may break between releases. Teams who need trace visualization as a hosted service, or who need to support React 18 or earlier, will find the hosted solutions like LangSmith a better fit. Verify that your trace format is supported by checking the adapter list before building a UI around AgentPrism. The last push was on 2026-09-25.

Frequently asked questions

Official sources

1. evilmartians/agent-prism on GitHub
2. Issues
3. License: MIT
4. Project website
5. README