Replace "Direct backend MCP flow" png `content/explainer_mcp.png` with mermaid digram

[domfarolino]

In #185 @bwalderman converted both content/explainer_*.png images to mermaid diagrams directly embedded in the markdown. However, in the second diagram I had some questions/concerns, so I held off on merging that directly so we could discuss it here.

See https://github.com/webmachinelearning/webmcp#direct-backend-mcp-flow and https://github.com/webmachinelearning/webmcp/blob/main/content/explainer_mcp.png.

graph TD
    AI["<b><i>AI Platform</i></b>"]
    AF["Agent Frontends (web site, app, etc)"]

    subgraph WB["<b><i>Web Browser</i></b>"]
        BIA["Browser-integrated agent"]
        RP["Running Page &lt;index.html&gt;"]
    end

    subgraph TP["<b><i>Third-party service<br>(example.com)</i></b>"]
        MCP[("MCP Server")]
    end

    AI <--> AF
    AI <--> BIA
    AI <-->|"Agents interact with the service directly using MCP. UI support would be provided either by the agent or manually by the service"| MCP
    AF <--> BIA
    RP <-->|HTTP| TP

Loading

---

I think the mermaid diagram pretty faithfully represents the picture, but I think the overall flow is not super clear. For example:

1. Should we have numbered flow arrows, like we do in the https://github.com/webmachinelearning/webmcp#webmcp-in-browser-tool-flow?
2. Does the "agent frontend" ever communicate directly to the "Browser-integrated agent"? This part confused me... I don't think when I'm on chatgpt.com, Gemini-in-the-sidebar or Copilot-in-the-sidebar is ever talking directly to the chatgpt front-end, without WebMCP, right? There are kind of two distinct use cases:
   • In one, the built-in agent is helping me browse websites, through actuating the site directly, or through WebMCP tools
   • In the other, the agent I'm interacting with is the agent frontend (chatgpt.com for example). I'm not juggling two agents (built-in Gemini and chatgpt.com).

But the diagram seems to kind of merge the two above? Thoughts @bwalderman?

[bwalderman]

Should we have numbered flow arrows, like we do in the https://github.com/webmachinelearning/webmcp#webmcp-in-browser-tool-flow?

After thinking about it, I'd suggest leaving it as-is. The WebMCP flow is illustrating a single flow end-to-end, so the numbered steps make sense. This diagram is more of a high-level picture of the components that exist for a service that has both a website and an MCP backend integration. It's not really trying to show a specific flow happening.

Does the "agent frontend" ever communicate directly to the "Browser-integrated agent"?

Nope. This was a mistake transcribing the picture. Thanks.

Updated diagram:

graph TD
    AI["<b><i>AI Platform</i></b>"]
    AF["Agent Frontends (web site, app, etc)"]

    subgraph WB["<b><i>Web Browser</i></b>"]
        BIA["Browser-integrated agent"]
        RP["Running Page &lt;index.html&gt;"]
    end

    subgraph TP["<b><i>Third-party service (example.com)</i></b>"]
        MCP[("MCP Server")]
    end

    AI <--> AF
    AI <--> BIA
    AI <-->|"Agents interact with the service directly using MCP. UI support would be provided either by the agent or manually by the service"| MCP
    RP <-->|HTTP| TP

Loading