agent-prism

把 AI Agent 执行轨迹变成可嵌入的 React 可视化组件

开源 🏷️完全免费 ✅ 目前可打开 基础设施 🍴 复刻 25 🐛 待处理 15 👀 关注 3
访问官网 ↗ GitHub ↗
GitHub 星标 ★ 408
维护状态 维护中
是否开源 开源
定价模式 🏷️完全免费 支持限时试用 · 开源免费，Storybook在线演示可免费体验

项目预览

agent-prism 项目界面预览图
图片来源：GitHub 官方仓库名片

项目数据

分类基础设施
开发团队evilmartians
官网地址https://storybook.agent-prism.evilmartians.io/?utm_source=github&utm_medium=social
GitHubhttps://github.com/evilmartians/agent-prism
定价模式🏷️完全免费
价格说明开源免费，Storybook在线演示可免费体验
访问状态✅ 目前可打开
是否开源是
开源协议MIT
主要语言TypeScript
技术栈/模型ai-agents,ai-monitoring,component-library,developer-tools,distributed-tracing,generative-ai,langchain,llm,llm-observability,monitoring,observability,open-source,opentelemetry,react,react-components,tailwindcss,trace-visualization,tracing,typescript,ui-components
GitHub 星标★ 408
上线时间2025-07-22 00:00:00
代码更新2026-10-08
仓库体积15.4 MB
本站数据更新2026-11-13
维护状态维护中
收录时间2026-09-30
浏览次数2

项目介绍

agent-prism 是一套基于 React 的组件库，专门用来可视化 AI Agent 的执行轨迹（trace）。随着 LLM 应用从单次问答走向多步骤、多工具调用的智能体，开发者很难直观看到每一步发生了什么、耗时多少、调用了哪些工具、哪一步出错。agent-prism 把这些 trace 数据渲染成可复用的 UI 组件，让开发者能像看链路追踪一样查看 Agent 的推理与工具调用过程。核心能力包括：以 React 组件形式嵌入任意前端，展示步骤、层级、状态与耗时；面向 LLM 可观测性场景设计，可与 LangChain 等框架的 trace 数据配合；作为组件库而非完整平台，方便集成进已有调试面板或监控后台。它解决的是 AI Agent 调试与可观测性中“看得见”的问题，适合需要自建调试界面的团队。

Star 增长趋势

本站每日记录该项目 GitHub 星标变化，观测越久曲线越完整

数据来源：GitHub API 逐日快照 · 收录于 2026-09-30 · 当前星标 ★ 408

使用教程

难度：进阶 约 30 分钟 部署方式：依赖集成 5 步

环境要求

  • React 项目
  • Node.js 18+
  • 已有 agent 轨迹数据

安装与启动步骤

  1. 1拉组件源码

    它走的是复制源码进项目的方式，不是纯 npm 包。

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

  2. 2装数据与类型包

    渲染依赖这两个包的类型定义。

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

  3. 3补对等依赖

    Radix 与几个渲染依赖要一起装。

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

  4. 4喂一份 trace

    按它的数据结构把你的 agent 轨迹转过去。

  5. 5嵌进页面

    先单独做个调试页，确认能看清每一步与重试。

如何确认成功

能把一段真实 agent trace 渲染出来，并看到每一步的输入、输出与重试标记

注意事项

  • 只做可视化，不含采集与存储，trace 要你自己产出。
  • 数据结构必须符合它的类型定义，字段缺失会渲染成空白。
  • 复制源码进项目意味着后续升级要手动同步。

核心亮点

  • 以 React 组件形式提供，可直接嵌入已有前端或调试面板，集成成本低
  • 专注 Agent trace 可视化，覆盖步骤、工具调用、层级与耗时等关键信息
  • TypeScript 编写，类型友好，适合现代前端工程体系

不足之处

  • 项目处于早期，组件覆盖度与 API 稳定性有待观察
  • 缺少完整平台能力，需自行接入 trace 数据源与存储

适用场景

  • 在自研 LLM 应用后台中嵌入 Agent 执行链路查看面板
  • 调试多工具调用 Agent 时定位某一步失败或超时
  • 为团队搭建内部 AI 可观测性界面，复用现成组件

替代项目

Langfuse、Phoenix (Arize)

上一篇：RecSys-MLops

下一篇：rivet

同类项目推荐

octopus 开源

一个网关管所有大模型，密钥、路由、计费全搞定

One Hub All LLMs For You | 为个人打造的 LLM API 聚合网关

★ 2748 2026-08-09
openvino 开源

把AI模型快速部署到英特尔硬件，推理提速数倍

OpenVINO™ is an open source toolkit for optimizing and deploying AI inference

★ 11153 2026-08-09
krakend-ce 开源

写个配置文件，就能搞定高性能 API 网关

KrakenD Community Edition: High-performance, stateless, declarative, API Gateway wri···

★ 2702 2026-08-09
Observal 开源

把 AI 组件管起来，共享复用还能看运行数据

Share and discover coding agent resources across your team. Self-hosted, Apache 2.0,···

★ 4297 2026-08-09
arcjet-js 开源

给 AI 应用装上安全气囊，防注入、防越权、防泄露

Runtime security for AI apps and agents: prompt injection detection, tool-call autho···

★ 700 2026-08-09
actions-ml-cicd 开源

用现成 GitHub Action 快速搭起 MLOps 流水线，省去重复造轮子。

A Collection of GitHub Actions That Facilitate MLOps

★ 206 2026-08-09
BentoML 开源

模型打包一键变线上服务，上线运维全不操心

The easiest way to serve AI apps and models - Build Model Inference APIs, Job queues···

★ 8940 2026-08-09
bacalhau 开源

把计算搬到数据身边，省时省钱跑批处理

Community-driven, simple, yet powerful framework for fast, cost-effective distribute···

★ 877 2026-08-09
llama.cpp 开源

用普通电脑本地跑大模型，量化后 CPU 也能流畅推理

LLM inference in C/C++

★ 134820 2026-09-16