visualize()- Creates interactive HTML filesget_agency_graph()- Returns ReactFlow-compatible JSON
- HTML Visualization
- ReactFlow Integration
visualize()
Creates a self-contained HTML file with interactive agency visualization.def visualize(
self,
output_file: str = "agency_visualization.html",
include_tools: bool = True,
open_browser: bool = True
) -> str
Parameters
| Parameter | Type | Default | Description |
|---|---|---|---|
output_file | str | "agency_visualization.html" | Path to save HTML file |
include_tools | bool | True | Whether to include agent tools |
open_browser | bool | True | Whether to open in browser |
Example
from agency_swarm import Agency, Agent, function_tool
@function_tool
def analyze_data(data: str) -> str:
"""Analyze data"""
return f"Analysis: {data}"
analyst = Agent(
name="Analyst",
instructions="You analyze data.",
tools=[analyze_data]
)
manager = Agent(
name="Manager",
instructions="You coordinate work."
)
agency = Agency(
manager,
communication_flows=[(manager, analyst)],
name="Analysis Agency"
)
# Create visualization
html_file = agency.visualize()
print(f"Saved to: {html_file}")
get_agency_graph()
Returns ReactFlow-compatible JSON data for custom frontend integration.def get_agency_graph(
self,
include_tools: bool = True
) -> dict[str, Any]
Returns
{
"nodes": [
{
"id": "Manager",
"type": "agent",
"position": {"x": 100, "y": 50},
"data": {
"label": "Manager",
"description": "Agent description",
"isEntryPoint": True,
"toolCount": 0
}
}
],
"edges": [
{
"id": "Manager->Analyst",
"source": "Manager",
"target": "Analyst",
"type": "communication"
}
]
}
Node Types
- Agent nodes:
type: "agent"with agent metadata - Tool nodes:
type: "tool"with parent agent reference
Edge Types
- Communication:
type: "communication"between agents - Ownership:
type: "owns"from agent to tool
Frontend Integration
Exposeget_agency_graph() in your API, then use the JSON directly in React:import ReactFlow from 'reactflow';
const agencyData = await fetch('/your-graph-endpoint').then(r => r.json());
function AgencyVisualization() {
return (
<div style={{ height: '600px' }}>
<ReactFlow
nodes={agencyData.nodes}
edges={agencyData.edges}
fitView
/>
</div>
);
}