<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1080 240" role="img" aria-label="Bring your own reverse proxy: external AI clients reach your own reverse proxy or API gateway, which forwards to the Arcade runtime inside your private network. The runtime governs the call and reaches internal MCP servers. Same runtime and governance as the managed Warp Pipes path.">
  <style>
    text{font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
    .t{font-size:13px;font-weight:680;fill:#16151a}.s{font-size:10.5px;fill:#6f6e79}
    .m{font-size:10px;fill:#827f8c;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
    .z{font-size:10px;font-weight:700;letter-spacing:.8px;fill:#9a98a4;font-family:ui-monospace,Menlo,monospace}
    .node{filter:drop-shadow(0 2px 4px rgba(18,16,32,.10))}
  </style>
  <rect x="0" y="0" width="1080" height="240" rx="16" fill="#ffffff"/>
  <defs><marker id="a" viewBox="0 0 10 10" refX="8.5" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse"><path d="M0 0 L10 5 L0 10 z" fill="#475569"/></marker></defs>

  <text class="z" x="20" y="30">EXTERNAL · INTERNET</text>
  <g class="node"><rect x="16" y="84" width="160" height="70" rx="13" fill="#fff" stroke="#cfcdc6"/></g>
  <text class="t" x="96" y="114" text-anchor="middle">Any AI client</text>
  <text class="s" x="96" y="132" text-anchor="middle">Claude · ChatGPT · agents</text>
  <line x1="176" y1="119" x2="226" y2="119" stroke="#475569" stroke-width="1.6" marker-end="url(#a)"/>
  <g class="node"><rect x="230" y="80" width="180" height="78" rx="13" fill="#fdf7ec" stroke="#f0d79a" stroke-width="1.4"/></g>
  <text x="320" y="106" text-anchor="middle" fill="#b45309" font-size="11.5" font-weight="700">YOUR reverse proxy</text>
  <text class="s" x="320" y="124" text-anchor="middle">or API gateway</text>
  <text class="m" x="320" y="141" text-anchor="middle">cloudflared · ngrok · nginx · F5</text>

  <!-- private network box first, then the pipe into it -->
  <rect x="572" y="60" width="492" height="120" rx="15" fill="#fbfaf7" stroke="#cfc7fb" stroke-dasharray="5 5"/>
  <text class="z" x="588" y="84">YOUR PRIVATE NETWORK</text>
  <line x1="410" y1="119" x2="592" y2="119" stroke="#4b33dd" stroke-width="12" stroke-linecap="round"/>
  <line x1="414" y1="119" x2="588" y2="119" stroke="#C9F84F" stroke-width="2.6" stroke-dasharray="2 13"/>
  <text x="491" y="102" text-anchor="middle" fill="#4b33dd" font-size="10" font-family="ui-monospace,Menlo,monospace">you run this hop</text>
  <g class="node"><rect x="592" y="90" width="300" height="74" rx="13" fill="#fff" stroke="#cfc7fb" stroke-width="1.7"/></g>
  <text x="742" y="114" text-anchor="middle" fill="#4b33dd" font-size="11.5" font-weight="700">Arcade runtime · governs every call</text>
  <text x="742" y="132" text-anchor="middle" fill="#3c3b46" font-size="10.5">auth · per-user credentials · scoping · audit</text>
  <text x="742" y="149" text-anchor="middle" fill="#827f8c" font-size="10" font-family="ui-monospace,Menlo,monospace">/mcp/{slug} · :9099</text>
  <line x1="892" y1="127" x2="952" y2="127" stroke="#4b33dd" stroke-width="9" stroke-linecap="round"/>
  <line x1="896" y1="127" x2="948" y2="127" stroke="#C9F84F" stroke-width="2.4" stroke-dasharray="2 12"/>
  <g class="node"><rect x="956" y="96" width="100" height="62" rx="11" fill="#f4f1ff" stroke="#ddd6fe"/></g>
  <text class="t" x="1006" y="122" text-anchor="middle" font-size="11">Internal</text>
  <text class="t" x="1006" y="138" text-anchor="middle" font-size="11">MCP servers</text>
</svg>
