Visualize OpenTelemetry agent traces with Agent Prism
Add Agent Prism's React trace viewer to inspect LLM calls, tool executions, retries, and agent workflows from OpenTelemetry or Langfuse-style trace data.
npx skills add agentskillexchange/skills --skill visualize-opentelemetry-agent-traces-with-agent-prism
npx degit evilmartians/agent-prism/packages/ui/src/components src/components/agent-prism, install @evilmartians/agent-prism-data and @evilmartians/agent-prism-types, then render TraceViewer with converted trace spans.Use Agent Prism when a team building an agent product needs a custom trace viewer inside its own React interface. An agent or developer can copy the UI components, install the data and type packages, convert OpenTelemetry or Langfuse traces, and render a TraceViewer that exposes spans, LLM calls, tool executions, retries, and workflow hierarchy. This is scoped to building or debugging an agent trace visualization surface; it is not a generic React component listing, observability platform listing, or framework card.
What this skill actually does
Inputs and prerequisites: React 19, Tailwind CSS 3, npm, OpenTelemetry or Langfuse trace data.
Setup notes: Copy components with npx degit evilmartians/agent-prism/packages/ui/src/components src/components/agent-prism , install @evilmartians/agent-prism-data and @evilmartians/agent-prism-types , then render TraceViewer with converted trace spans.
Source and verification boundary: use https://storybook.agent-prism.evilmartians.io/ as the canonical reference before running the workflow; keep commands, API calls, CLI usage, and generated outputs reviewable against that upstream source.
Framework fit: publish this as a Multi-Framework workflow only when the operator can invoke the documented toolchain directly, rather than treating the upstream project as a generic product listing.