<svg width="570" height="600" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="agentGrad" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#9B59B6;stop-opacity:1" />
<stop offset="100%" style="stop-color:#7D3C98;stop-opacity:1" />
</linearGradient>
<linearGradient id="mcpGrad" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#3498DB;stop-opacity:1" />
<stop offset="100%" style="stop-color:#2980B9;stop-opacity:1" />
</linearGradient>
<linearGradient id="codeModeGrad" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#27AE60;stop-opacity:1" />
<stop offset="100%" style="stop-color:#229954;stop-opacity:1" />
</linearGradient>
</defs>
<!-- Participants -->
<rect x="30" y="50" width="120" height="50" fill="url(#agentGrad)" stroke="#5B2C6F" stroke-width="2" rx="5"/>
<text x="90" y="75" font-family="Arial, sans-serif" font-size="12" font-weight="bold" text-anchor="middle" fill="white">Agent</text>
<rect x="180" y="50" width="120" height="50" fill="url(#codeModeGrad)" stroke="#1E8449" stroke-width="2" rx="5"/>
<text x="240" y="75" font-family="Arial, sans-serif" font-size="11" font-weight="bold" text-anchor="middle" fill="white">Code Mode</text>
<rect x="330" y="50" width="90" height="50" fill="url(#mcpGrad)" stroke="#1F618D" stroke-width="2" rx="5"/>
<text x="375" y="75" font-family="Arial, sans-serif" font-size="10" font-weight="bold" text-anchor="middle" fill="white">MCP 1</text>
<rect x="450" y="50" width="90" height="50" fill="url(#mcpGrad)" stroke="#1F618D" stroke-width="2" rx="5"/>
<text x="495" y="75" font-family="Arial, sans-serif" font-size="10" font-weight="bold" text-anchor="middle" fill="white">MCP 2</text>
<!-- Sequence lines -->
<line x1="90" y1="110" x2="90" y2="550" stroke="#999" stroke-width="1" stroke-dasharray="3,3"/>
<line x1="240" y1="110" x2="240" y2="550" stroke="#999" stroke-width="1" stroke-dasharray="3,3"/>
<line x1="375" y1="110" x2="375" y2="550" stroke="#999" stroke-width="1" stroke-dasharray="3,3"/>
<line x1="495" y1="110" x2="495" y2="550" stroke="#999" stroke-width="1" stroke-dasharray="3,3"/>
<!-- Tool Discovery Phase -->
<text x="285" y="130" font-family="Arial, sans-serif" font-size="10" font-weight="bold" text-anchor="middle" fill="#666" font-style="italic">Tool Discovery</text>
<path d="M 90 140 L 240 140" stroke="#27AE60" stroke-width="2" fill="none" marker-end="url(#arrowheadGreen)"/>
<text x="165" y="135" font-family="Arial, sans-serif" font-size="9" fill="#333">listTools()</text>
<path d="M 240 160 L 90 160" stroke="#27AE60" stroke-width="2" fill="none" stroke-dasharray="5,5" marker-end="url(#arrowheadGreen)"/>
<rect x="120" y="170" width="90" height="20" fill="#C8E6C9" stroke="#4CAF50" stroke-width="1" rx="2"/>
<text x="165" y="183" font-family="Arial, sans-serif" font-size="8" text-anchor="middle" fill="#2E7D32">Single tool ~2KB</text>
<!-- Tool Execution Phase -->
<text x="285" y="220" font-family="Arial, sans-serif" font-size="10" font-weight="bold" text-anchor="middle" fill="#666" font-style="italic">Tool Execution</text>
<path d="M 90 240 L 240 240" stroke="#27AE60" stroke-width="2" fill="none" marker-end="url(#arrowheadGreen)"/>
<text x="165" y="235" font-family="Arial, sans-serif" font-size="9" fill="#333">callTool(...)</text>
<!-- Code Mode orchestrates internally -->
<path d="M 240 280 L 375 280" stroke="#3498DB" stroke-width="2" fill="none" marker-end="url(#arrowheadBlue)"/>
<text x="307" y="275" font-family="Arial, sans-serif" font-size="9" fill="#333">callTool()</text>
<path d="M 375 320 L 240 320" stroke="#3498DB" stroke-width="2" fill="none" stroke-dasharray="5,5" marker-end="url(#arrowheadBlue)"/>
<rect x="277.5" y="330" width="90" height="20" fill="#E3F2FD" stroke="#2196F3" stroke-width="1" rx="2"/>
<text x="317.5" y="343" font-family="Arial, sans-serif" font-size="7" text-anchor="middle" fill="#1976D2">Response ~350KB</text>
<path d="M 240 360 L 495 360" stroke="#3498DB" stroke-width="2" fill="none" marker-end="url(#arrowheadBlue)"/>
<text x="367" y="355" font-family="Arial, sans-serif" font-size="9" fill="#333">callTool()</text>
<path d="M 495 400 L 240 400" stroke="#3498DB" stroke-width="2" fill="none" stroke-dasharray="5,5" marker-end="url(#arrowheadBlue)"/>
<rect x="337.5" y="410" width="80" height="20" fill="#E3F2FD" stroke="#2196F3" stroke-width="1" rx="2"/>
<text x="377.5" y="423" font-family="Arial, sans-serif" font-size="7" text-anchor="middle" fill="#1976D2">Response ~50KB</text>
<!-- Final result to agent -->
<path d="M 240 440 L 90 440" stroke="#27AE60" stroke-width="2" fill="none" stroke-dasharray="5,5" marker-end="url(#arrowheadGreen)"/>
<rect x="120" y="450" width="90" height="20" fill="#C8E6C9" stroke="#4CAF50" stroke-width="1" rx="2"/>
<text x="165" y="463" font-family="Arial, sans-serif" font-size="8" text-anchor="middle" fill="#2E7D32">Final result ~4KB</text>
<!-- Context note -->
<rect x="30" y="490" width="510" height="80" fill="#E8F5E9" stroke="#27AE60" stroke-width="1" rx="3"/>
<text x="285" y="510" font-family="Arial, sans-serif" font-size="10" font-weight="bold" text-anchor="middle" fill="#2E7D32">Processing happens outside Agent context</text>
<text x="40" y="530" font-family="Arial, sans-serif" font-size="9" fill="#333">• Agent only sees: Single tool description (~2KB) + Final result (~4KB)</text>
<text x="40" y="545" font-family="Arial, sans-serif" font-size="9" fill="#333">• Tool orchestration & data transformation happen externally</text>
<text x="40" y="560" font-family="Arial, sans-serif" font-size="9" fill="#333">• Single round trip to agent</text>
<!-- Token count -->
<text x="285" y="585" font-family="Arial, sans-serif" font-size="12" font-weight="bold" text-anchor="middle" fill="#2E7D32">~6.5K tokens</text>
<text x="285" y="600" font-family="Arial, sans-serif" font-size="10" text-anchor="middle" fill="#2E7D32">98.7% reduction</text>
<!-- Arrow markers -->
<defs>
<marker id="arrowheadGreen" markerWidth="10" markerHeight="10" refX="9" refY="3" orient="auto">
<polygon points="0 0, 10 3, 0 6" fill="#27AE60"/>
</marker>
<marker id="arrowheadBlue" markerWidth="10" markerHeight="10" refX="9" refY="3" orient="auto">
<polygon points="0 0, 10 3, 0 6" fill="#3498DB"/>
</marker>
</defs>
</svg>
