{"data":{"slug":"evilmartians-agent-prism","name":"agent-prism","tagline":"React components for visualizing traces from AI agents","github_url":"https://github.com/evilmartians/agent-prism","owner":"evilmartians","repo":"agent-prism","owner_avatar_url":"https://avatars.githubusercontent.com/u/46581?v=4","primary_language":"TypeScript","stars":390,"forks":23,"topics":["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"],"archived":false,"github_pushed_at":"2026-07-27T18:01:32+00:00","maintenance_label":"Steady","stars_delta_30d":10,"url":"https://www.graphcanon.com/tools/evilmartians-agent-prism","markdown_url":"https://www.graphcanon.com/tools/evilmartians-agent-prism.md","api_url":"https://www.graphcanon.com/api/graphcanon/tools/evilmartians-agent-prism","graph_url":"https://www.graphcanon.com/api/graphcanon/graph?tool=evilmartians-agent-prism","description":"React components for visualizing traces from AI agents","homepage_url":"https://storybook.agent-prism.evilmartians.io/?utm_source=github&utm_medium=social","license":"MIT","open_issues":15,"watchers":3,"ai_summary":"A component library for observing and monitoring the traces of various AI agents using React.","readme_excerpt":"## Installation\n\nCopy the UI components to your project:\n\n```bash\nnpx degit evilmartians/agent-prism/packages/ui/src/components src/components/agent-prism\n```\n\nInstall the data and types packages:\n\n```bash\nnpm install @evilmartians/agent-prism-data @evilmartians/agent-prism-types\n```\n\nInstall required UI dependencies:\n\n```bash\nnpm install @radix-ui/react-collapsible @radix-ui/react-tabs classnames lucide-react react-json-pretty react-resizable-panels\n```\n\n---\n\n## Quick Start\n\nThe simplest way to get started is with the `TraceViewer` component, which provides a complete trace visualization interface:\n\n```tsx\nimport { TraceViewer } from \"./components/agent-prism/TraceViewer\";\nimport { openTelemetrySpanAdapter } from \"@evilmartians/agent-prism-data\";\n\nfunction App() {\n  return (\n    <TraceViewer\n      data={[\n        {\n          traceRecord: yourTraceRecord,\n          spans:\n            openTelemetrySpanAdapter.convertRawDocumentsToSpans(yourTraceData),\n        },\n      ]}\n    />\n  );\n}\n```\n\nThe `TraceViewer` includes:\n\n- **Trace List**: Browse multiple traces\n- **Tree View**: Hierarchical span visualization with search and expand/collapse\n- **Details Panel**: Inspect individual span attributes\n- **Responsive Design**: Works on desktop and mobile","github_created_at":"2025-07-22T08:44:58+00:00","created_at":"2026-07-15T10:41:08.56063+00:00","updated_at":"2026-09-20T04:25:24.236827+00:00","categories":[{"slug":"ai-agents","name":"AI Agents","url":"https://www.graphcanon.com/categories/ai-agents","markdown_url":"https://www.graphcanon.com/categories/ai-agents.md","api_url":"https://www.graphcanon.com/api/graphcanon/categories/ai-agents"},{"slug":"developer-tools","name":"Developer Tools","url":"https://www.graphcanon.com/categories/developer-tools","markdown_url":"https://www.graphcanon.com/categories/developer-tools.md","api_url":"https://www.graphcanon.com/api/graphcanon/categories/developer-tools"},{"slug":"evaluation-observability","name":"Evaluation & Observability","url":"https://www.graphcanon.com/categories/evaluation-observability","markdown_url":"https://www.graphcanon.com/categories/evaluation-observability.md","api_url":"https://www.graphcanon.com/api/graphcanon/categories/evaluation-observability"}],"tags":[{"slug":"ai-agents","name":"ai-agents"},{"slug":"ai-monitoring","name":"ai-monitoring"},{"slug":"component-library","name":"component-library"},{"slug":"distributed-tracing","name":"distributed-tracing"},{"slug":"generative-ai","name":"generative-ai"},{"slug":"langchain","name":"langchain"},{"slug":"llm-observability","name":"llm-observability"},{"slug":"monitoring","name":"monitoring"}],"trust":{"provenance":{"is_fork":false,"github_id":1024141738,"owner_type":"Organization","methodology":"github_public_v1","parent_repo":null,"near_duplicate_slugs":[]},"computed_at":"2026-09-10T06:00:39.333Z","maintenance":{"label":"Steady","score":60,"methodology":"github_public_v1","releases_90d":0,"days_since_push":44,"last_release_at":null,"stars_delta_30d":10,"open_issues_delta_30d":0},"security_summary":{"status":"ok","scanner":"osv@v1","low_count":0,"high_count":0,"last_scan_at":"2026-07-15T10:41:10.059Z","medium_count":0,"scan_profile":"deps","critical_count":0}},"capability_facts":{"mcp":{"source":"repo_scan","observed_at":"2026-09-10T06:00:39.836Z","server_manifest":false},"scan":{"source":"repo_scan","observed_at":"2026-09-10T06:00:39.836Z"},"languages":{"value":["typescript","javascript"],"source":"github.language+package.json","observed_at":"2026-09-10T06:00:39.836Z"},"license_spdx":{"value":"MIT","source":"github.license","observed_at":"2026-09-10T06:00:39.836Z"}},"decision_facts":{"hosting":null,"pricing":null,"requirements":null,"constraints":null,"when_to_use":["If your project uses TypeScript and React for front-end development, and you need to monitor AI agent behavior effectively without reinventing the UI wheel.","When dealing with complex trace data that requires a detailed view such as hierarchical span visualization or search capabilities within spans."],"when_not_to_use":["Consider other options if your project does not use TypeScript since adapting libraries specifically tailored for TypeScript might introduce unnecessary complexity.","If real-time dynamic updates are critical and the current data handling mechanisms of agent-prism do not meet these requirements, look elsewhere."],"source":"enrich:decision_facts","observed_at":"2026-07-16T20:37:27.948Z"},"constraint_facets":null,"decision_summary":[{"label":"Adopt for","value":"Agent-prism is a TypeScript-based React component library that facilitates trace visualization from AI agents offering comprehensive monitoring and evaluation capabilities."}]}}