Agent Prism: React components for visualizing traces from AI agents (github.com)

AgentPrism is an open‑source library of React components for visualizing "agentic" traces—detailed logs of an AI agent’s plans, LLM calls, tool executions and retries—so developers can turn dense JSON traces into interactive, hierarchical timelines for debugging and observability. It ships a ready-to-use TraceViewer (trace list, tree view with search/expand, and details panel), is responsive for desktop/mobile, and supports copying UI components into your project (npx degit ...). It’s built for React 19+, Tailwind CSS 3 and TypeScript, and integrates with standard UI libs (Radix, lucide-react, react-json-pretty). Technically, AgentPrism normalizes trace data via adapters (OpenTelemetry, Langfuse, etc.), e.g. openTelemetrySpanAdapter.convertRawDocumentsToSpans(otlpDoc) or convertRawSpansToSpanTree for tree views, and exposes type packages (@evilmartians/agent-prism-data, @evilmartians/agent-prism-types). It recognizes semantic conventions (gen_ai.* for model/tokens/costs, llm.* and retrieval.*, plus HTTP/DB spans) and lets you add custom attributes. That makes it easy to embed a visual trace explorer into agent platforms, accelerate root‑cause analysis, surface token/cost info, and standardize UI rendering across observability backends — a practical tool for teams building and debugging complex, multi‑tool AI agents. Contributions welcome.