<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1080 360" role="img" aria-label="Warp Pipes: external AI clients connect to a public MCP URL managed by Arcade. Arcade forwards traffic down an outbound connection held open by the Warp Pipes connector inside the private network, to the Arcade runtime, which governs every call and reaches internal MCP servers.">
  <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:11px;fill:#6f6e79}
    .m{font-size:10.5px;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}
    .zg{fill:#5d8a30}
    .lw{font-size:10px;fill:#4b33dd;font-family:ui-monospace,Menlo,monospace;letter-spacing:.3px}
    .node{filter:drop-shadow(0 2px 4px rgba(18,16,32,.10))}
  </style>
  <rect x="0" y="0" width="1080" height="360" 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="26">EXTERNAL · INTERNET</text>
  <g class="node"><rect x="16" y="120" width="166" height="78" rx="13" fill="#fff" stroke="#cfcdc6"/></g>
  <text class="t" x="99" y="151" text-anchor="middle">Any AI client</text>
  <text class="s" x="99" y="170" text-anchor="middle">Claude · ChatGPT</text>
  <text class="s" x="99" y="186" text-anchor="middle">Cursor · agents</text>
  <line x1="182" y1="159" x2="234" y2="159" stroke="#475569" stroke-width="1.6" marker-end="url(#a)"/>
  <text class="m" x="208" y="150" text-anchor="middle">HTTPS</text>

  <text class="z zg" x="240" y="26">⚡ WARP PIPES · MANAGED BY ARCADE</text>
  <g class="node"><rect x="240" y="112" width="214" height="94" rx="14" fill="#171520"/></g>
  <rect x="240" y="112" width="214" height="94" rx="14" fill="none" stroke="#C9F84F" stroke-width="1.5"/>
  <text x="347" y="140" text-anchor="middle" fill="#ffffff" font-size="13" font-weight="700">Public MCP URL</text>
  <text x="347" y="160" text-anchor="middle" fill="#cdf56e" font-size="10.5" font-family="ui-monospace,Menlo,monospace">acme.warp.arcade.app</text>
  <text x="347" y="180" text-anchor="middle" fill="#b9b6cc" font-size="10.5">Arcade forwards traffic</text>
  <text x="347" y="195" text-anchor="middle" fill="#b9b6cc" font-size="10.5">down the open connection</text>

  <!-- private network box first, then the pipe drawn into it so both boxes connect -->
  <rect x="628" y="92" width="436" height="210" rx="16" fill="#fbfaf7" stroke="#cfc7fb" stroke-dasharray="5 5"/>
  <text class="z" x="644" y="112">YOUR PRIVATE NETWORK</text>
  <text class="lw" x="540" y="143" text-anchor="middle">⚡ forwarded over the</text>
  <text class="lw" x="540" y="186" text-anchor="middle">outbound connection</text>
  <line x1="450" y1="159" x2="652" y2="159" stroke="#4b33dd" stroke-width="13" stroke-linecap="round"/>
  <line x1="456" y1="159" x2="646" y2="159" stroke="#C9F84F" stroke-width="2.6" stroke-dasharray="2 13"/>
  <g class="node"><rect x="648" y="128" width="180" height="62" rx="12" fill="#fff" stroke="#C9F84F" stroke-width="2"/></g>
  <text x="738" y="153" text-anchor="middle" fill="#16151a" font-size="11.5" font-weight="700">⚡ Warp Pipes</text>
  <text x="738" y="170" text-anchor="middle" fill="#5d8a30" font-size="10" font-family="ui-monospace,Menlo,monospace">connector · dials OUT</text>
  <text x="738" y="183" text-anchor="middle" fill="#827f8c" font-size="9.5" font-family="ui-monospace,Menlo,monospace">no inbound ports</text>
  <line x1="738" y1="190" x2="738" y2="214" stroke="#475569" stroke-width="1.5" marker-end="url(#a)"/>
  <g class="node"><rect x="648" y="216" width="294" height="74" rx="13" fill="#fff" stroke="#cfc7fb" stroke-width="1.7"/></g>
  <text x="795" y="240" text-anchor="middle" fill="#4b33dd" font-size="11.5" font-weight="700">Arcade runtime · governs every call</text>
  <text x="795" y="258" text-anchor="middle" fill="#3c3b46" font-size="10.5">auth · per-user credentials · scoping · audit</text>
  <text x="795" y="275" text-anchor="middle" fill="#827f8c" font-size="10" font-family="ui-monospace,Menlo,monospace">internal MCP URL · :9099</text>
  <line x1="942" y1="253" x2="1004" y2="253" stroke="#4b33dd" stroke-width="9" stroke-linecap="round"/>
  <line x1="946" y1="253" x2="1000" y2="253" stroke="#C9F84F" stroke-width="2.4" stroke-dasharray="2 12"/>
  <g class="node"><rect x="956" y="126" width="98" height="62" rx="11" fill="#f4f1ff" stroke="#ddd6fe"/></g>
  <text class="t" x="1005" y="152" text-anchor="middle" font-size="11">Internal</text>
  <text class="t" x="1005" y="168" text-anchor="middle" font-size="11">MCP servers</text>
  <line x1="1005" y1="188" x2="1005" y2="246" stroke="#7c3aed" stroke-width="1.4" stroke-dasharray="3 4"/>
</svg>
