OpenViSTAI · Agents · Blockchain · Crypto
Submit a project
Menu
Agent Evaluation & Observability

AgentPrism

AgentPrism is an open-source TypeScript library of React components that converts supported agent trace data into hierarchical visual views for debugging, including LLM calls, tool executions and workflows.

Explore the practical guide ↓

Independent OpenViST project profile, based on linked sources.

AgentPrism — OpenViST project profile in Agent Evaluation & Observability.
OpenViST project illustration. See the linked sources for product details.
Understand the project

Practical overview

When it fits

Use AgentPrism when an application already produces trace data and developers need an embedded interface to examine its workflow and individual spans.

Who it is for

  • Developers building React interfaces to inspect AI-agent traces.
  • Teams that want to explore OpenTelemetry or Langfuse trace data through a visual timeline and span details.

Documented uses

  • Turn agent traces into a visual hierarchy of workflow steps.
  • Browse multiple traces and expand or search spans.
  • Inspect attributes for an individual span while debugging an agent.
Before you choose

Requirements & limits

The repository describes AgentPrism as open source and lists an MIT license. The documented implementation prerequisites are React 19 or later, Tailwind CSS 3 and TypeScript.

  • The library is in alpha, and its APIs may change.
  • The documented OpenTelemetry adapter converts raw documents into spans; the README also names Langfuse adapters and helper functions.
  • The UI components are copied into the application rather than described as a hosted observability service.

Check current requirements in the official documentation. Source-based guidance does not mean OpenViST has run or independently tested this project.

Source-based practical guide

Set up AgentPrism’s documented TraceViewer

Add the TraceViewer interface to a React project and connect it to OpenTelemetry trace data.

Before you start

  • React 19 or later
  • Tailwind CSS 3
  • TypeScript
  • OpenTelemetry trace data

Steps

  1. Copy the AgentPrism UI components into the project with the documented degit command.

  2. Install @evilmartians/agent-prism-data and @evilmartians/agent-prism-types.

  3. Install the listed UI dependencies: @radix-ui/react-collapsible, @radix-ui/react-tabs, classnames, lucide-react, react-json-pretty and react-resizable-panels.

  4. Import TraceViewer and openTelemetrySpanAdapter, convert the raw trace data into spans, and pass the spans and trace record to the viewer.

Expected outcome

A TraceViewer interface for browsing traces, exploring spans in a hierarchical tree, and inspecting selected span attributes.

Guide limitations

  • The library is identified as an alpha release, and its APIs may change.
  • The guide covers the documented setup and component wiring; it does not establish that a particular project’s trace data will work without adaptation.
Documentation 1 ↗
Evidence and transparency

Sources & review

Official repository ↗
Source record details
Source availability
Active
Sources checked
14 October 2026
Original website title
evilmartians/agent-prism · Official homepage title · retained in its source language
How we review sourcesSuggest a correction