AgentLens

Understand what your Agentforce agent actually did — visually.

Try it now: https://msrivastav13.github.io/AgentLens/

What it does

Load a trace from the Agentforce DX extension, the NGA builder, or the SF CLI and AgentLens shows you:

• Agent Graph — which sub agents talked to each other, how many times, and in what order
• Finite State Machine — the internal orchestration flow for each sub agent: LLM calls, tool executions, variable mutations, and handoffs
• Step-by-Step Inspector — walk through every event with full detail: system prompts, model output, tool inputs/outputs, and variable diffs
• Graph Analysis Report — one-click PDF with degree distribution, connectivity analysis, betweenness centrality, and algorithm explanations

Getting a Trace

AgentLens accepts trace JSON from any of these sources:

Source	How to get the trace
Agentforce Builder	Open your agent in Setup > Agentforce Builder, run a conversation in the Preview panel, then copy the JSON trace from the conversation details
SF CLI — Agent Preview	sf agent preview -o <org> — after the conversation, save the transcript JSON (saved to ./temp/agent-preview by default, or specify --output-dir)
Agentforce DX Extension	Use the trace viewer in the Agentforce DX VS Code extension and copy the plan response JSON

Quick Start

Web App

1. Open https://msrivastav13.github.io/AgentLens/ (or index.html locally — no server required)
2. Paste or upload a trace JSON from any of the sources above
3. The first sub agent is auto-selected — step through the trace with arrow keys or the prev/next buttons; handoffs navigate to the next agent automatically

Chrome Extension

1. Open chrome://extensions and enable Developer mode
2. Click Load unpacked and select the chrome-extension/ folder
3. Navigate to the NGA builder in your Salesforce org
4. Click Copy Code to copy the trace, then click the Open in AgentLens button that appears next to it
5. A new tab opens with the full trace visualization

The extension injects a button directly into the NGA builder UI for one-click trace viewing.

VS Code Extension

Install from the Marketplace: AgentLens Visualizer

Or search for AgentLens Visualizer in the VS Code Extensions panel (Cmd+Shift+X).

The extension provides the same visualization inside VS Code with native theme integration — right-click any trace JSON file and select Open with AgentLens.

Why

Agentforce traces are large JSON blobs. Reading them raw is painful. AgentLens turns them into something you can actually navigate — so you can debug handoff loops, understand why an LLM chose a tool, or figure out where latency is hiding.

Zero dependencies. Runs entirely in the browser. Works offline. Available as a web app, Chrome extension, and VS Code extension.

License

MIT