# AgentPrism — Visualize AI Agent Traces

> AgentPrism is an open-source set of React components for visualizing AI agent traces, turning OpenTelemetry spans into debuggable diagrams and timelines.

## Install

Save as a script file and run:

## Quick Use

```bash
# copy UI components (per README)
npx degit evilmartians/agent-prism/packages/ui/src/components src/components/agent-prism

# install data + types packages
npm install @evilmartians/agent-prism-data @evilmartians/agent-prism-types
```

## Intro

AgentPrism is an open-source set of React components for visualizing AI agent traces, turning OpenTelemetry spans into debuggable diagrams and timelines.

- **Best for:** Debugging complex tool-using agents with trace-first workflows
- **Works with:** React 19+; TypeScript; Tailwind CSS 3; OpenTelemetry data adapters (per README)
- **Setup time:** 20–50 minutes

## Practical Notes

- GitHub: 341 stars · 16 forks; pushed 2026-04-14 (verified via GitHub API).
- README provides a live demo and a Storybook site for component exploration.
- README suggests using `TraceViewer` plus an OpenTelemetry span adapter to convert raw trace docs into UI spans.

## Main

A trace debugging workflow that scales:

1. Add a trace ID to every user request, and propagate it through tools and agent retries.
2. Normalize spans so your UI always shows: plan → tool call → model call → result.
3. Annotate spans with costs (tokens/latency) so “slow” and “expensive” paths are obvious.
4. Keep a “known good” trace for each feature—use it as a regression fixture when prompts change.

The payoff is faster iteration: you can fix a broken agent by looking at one timeline instead of many logs.

### FAQ

**Q: Is it production-ready?**
A: README marks it as an alpha release; expect API changes and pin versions when adopting.

**Q: Do I need OpenTelemetry?**
A: No, but README shows adapters for OpenTelemetry spans; any trace format can be converted.

**Q: What is the simplest component to start with?**
A: README suggests `TraceViewer`, which provides a complete trace UI surface.

## Source & Thanks

> Source: https://github.com/evilmartians/agent-prism
> License: MIT
> GitHub stars: 341 · forks: 18

---

<!-- ZH -->

## 快速使用

```bash
# 复制 UI 组件（README）
npx degit evilmartians/agent-prism/packages/ui/src/components src/components/agent-prism

# 安装 data + types 包
npm install @evilmartians/agent-prism-data @evilmartians/agent-prism-types
```

## 简介

AgentPrism 是开源的 React 组件库：把 AI agent 的 trace（含 OpenTelemetry spans）变成可读的图形与时间线，便于调试规划、工具调用与重试链路。

- **适合谁：** 用 trace-first 的方式调试复杂 agent
- **可搭配：** React 19+；TypeScript；Tailwind CSS 3；可接 OpenTelemetry 数据适配（见 README）
- **准备时间：** 20–50 分钟

## 实战建议

- GitHub：341 stars · 16 forks；最近更新 2026-04-14（GitHub API 验证）。
- README 提供在线 demo 与 Storybook，用于浏览组件与交互行为。
- README 建议用 `TraceViewer` + OpenTelemetry 适配器，把原始 trace 文档转成可视化 spans。

## 主要内容

一个更可扩展的 trace 调试流程：

1. 每个用户请求都带 trace_id，并贯穿工具调用与重试链路。
2. 统一 span 结构：计划→工具→模型→结果，让 UI 永远可读。
3. 给 span 标注成本（tokens/latency），慢在哪里、贵在哪里一眼可见。
4. 为每个功能保留一条“金标 trace”，prompt 变更时用它做回归基准。

收益是迭代更快：看一条时间线就能定位问题，不必翻无数日志。

### FAQ

**能直接上生产吗？**
答：README 标注为 Alpha；建议锁定版本并预期 API 会变动。

**必须用 OpenTelemetry 吗？**
答：不必须。README 展示了 OTel 适配，但任何 trace 格式都可以转成 spans。

**从哪个组件开始最简单？**
答：README 建议从 `TraceViewer` 开始，它提供完整的 trace 可视化界面。

## 来源与感谢

> Source: https://github.com/evilmartians/agent-prism
> License: MIT
> GitHub stars: 341 · forks: 18


---
Source: https://tokrepo.com/en/workflows/agentprism-visualize-ai-agent-traces
Author: Agent Toolkit