AgentCanvas - Vstorm's open-source Pydantic AI visualization tool

What is AgentCanvas?

AgentCanvas is an open-source Pydantic AI visualization tool from Vstorm. It automatically converts the runtime logs of AI agents integrated with Logfire tracking into an interactive HTML flowchart report, clearly showing each model call, tool execution, nested sub-agents, token consumption, and precise cost. The output is a single self-contained HTML file, which can be viewed offline without a server, making it particularly suitable for demonstrating to clients what the AI actually does.

Main functions of AgentCanvas

• Block Flowchart: To complete the Agent's operational chain User → Agent → Model → Tools → Answer The fluid structure is presented, supporting canvas panning, scaling, and dragging.
• Nested sub-agent recursive displayWhen a tool is itself another agent, it automatically draws nested frames, supporting recursive expansion at any depth.
• Full conversation recordEach round of dialogue is displayed as a separate frame, with the complete frame shown in the sidebar. user → assistant → user → assistant Original transcript.
• Visualizing the reasoning processDisplays a summary of the model's "thinking" and the number of reasoning tokens, attached to each model call node and dialogue record.
• Accurate cost calculation:based on genai-prices The library calculates the actual dollar cost for each model call and the overall run separately.
• Token usage statisticsDisplay the number of Input / Output / Reasoning Tokens layer by layer, and summarize the total.
• Deep Details PanelClick to view metadata such as Provider, Finish Reason, Response ID, list and description of available tools, output mode, and Thinking configuration.
• Guided presentation mode:supportAuto playandManual step by stepTwo modes are available: Space, Click, and Arrow keys, with support for undoing. Natural language narration is included for easy client demos.
• Single-file self-contained outputThe final output is a single HTML file, requiring no build, no server, can run offline, and is easy to send via email.

Follow us on WeChat and reply with "open source",join inAI open source project discussion group

How to use AgentCanvas

• Installation toolsInstall with pip (one-click) pip install agentcanvas.
• Configure read token: Set environment variables LOGFIRE_READ_TOKEN(or write) .env (file), used to read Agent runtime tracing data via the Logfire Query API.
• (Optional) Configure region addressTo read Logfire data from the EU region, set... LOGFIRE_BASE_URL=https://logfire-eu.pydantic.dev.
• Generate the latest operation report:implement agentcanvas The command automatically reads the latest Agent execution record and outputs the following: agent_flow.html And open it in your browser.
• View historical operation list:implement agentcanvas --list List all recently available running records.
• Specify a specific Trace visualization:implement agentcanvas --trace-id <id> Generate a flowchart for a specific operation.
• Custom output filename:implement agentcanvas -o report.html --no-open Specify the output file name and prevent the browser from opening automatically.
• (Optional) Run the sample AgentExecute in the repository directory uv sync --all-extras --prerelease=allow and uv run --prerelease=allow python assets/scripts/main.py Generate sample tracking data, then execute. agentcanvas Visualization.
• Library pattern integrationImporting in Python code LogfireClient,parse_run,render_htmlThe programmatically retrieves trace data and renders it as an HTML string, then writes it to a file.

AgentCanvas project address

• Github repositoryhttps://github.com/vstorm-co/agentcanvas

AgentCanvas's core advantages

• Zero-intrusion visualizationNo need to modify existing Agent code; directly reads existing OpenTelemetry GenAI spans data from Logfire.
• Production-level cost transparencyCalculate accurate fees based on real token data to solve the pain points of "AI black box" and "uncontrollable costs".
• Customer communication toolTranslate technical implementations into business language, enabling non-technical clients to understand the Agent's decision-making path and tool invocation logic.
• Native support for recursive architectureUnlike ordinary flowchart tools, it has native recursive rendering capabilities for Pydantic AI's nested sub-agent pattern.
• MIT Open Source LicenseIt can be freely integrated into internal toolchains or commercial projects.

Comparison of AgentCanvas and similar competing products

Application scenarios of AgentCanvas

• Customer Demo and Report: Directly demonstrate the Agent's complete decision-making process, tool call sequence, and real-time costs during the meeting to build customer trust.
• Production environment debugging: Quickly locate at which step the Agent called the wrong tool or generated abnormally high token consumption through visualization.
• Cost audit and optimizationBased on cost data accurate to each model call, identify high-cost processes and optimize Prompt or model selection.
• Agent architecture documentationUse the actual runtime flowchart as a technical document or deliverable instead of a static architecture diagram.
• Multi-agent system monitoringIn complex nested agent systems, recursively visualize the call relationships at each level to avoid a "Russian doll"-like black box.