// Generated by orrery. Edit the diagram spec and re-render instead of editing this file. import { type SVGProps, useId } from "react"; export default function AICodingAgentOnTheModelContextProtocol(props: SVGProps) { const uid = useId().replace(/[^A-Za-z0-9_-]/g, ""); return ( AI coding agent on the Model Context Protocol AI coding agent on the Model Context Protocol. 15 components in 1 groups. Connections: Developer to Agent loop (prompt); Claude to Agent loop (messages + tools); Agent loop to MCP client 2 (tools/call); MCP client 2 to GitHub MCP server (Streamable HTTP, Bearer token); GitHub MCP server to GitHub (REST API); MCP client 2 to GitHub OAuth (OAuth 2.1 + PKCE); Agent loop to MCP client 1; Agent loop to MCP client 3; MCP client 1 to Filesystem server (stdio); Filesystem server to Project files (read and write); MCP client 3 to Postgres MCP server (Streamable HTTP); Postgres MCP server to PostgreSQL (SQL); Agent loop to OTel Collector (OTLP traces); OTel Collector to Grafana Cloud. AI CODING AGENT ON THE MODEL CONTEXT PROTOCOL The MCP host runs one MCP client per MCP server, over stdio locally and Streamable HTTP with OAuth remotely; Claude picks each tool and gets its result back PROMPT PROMPT 1 1 MESSAGES + TOOLS MESSAGES + TOOLS 2 2 TOOLS/CALL TOOLS/CALL 3 3 STREAMABLE HTTP, BEARER TOKEN STREAMABLE HTTP, BEARER TOKEN 4 4 REST API REST API 5 5 OAUTH 2.1 + PKCE STDIO READ AND WRITE STREAMABLE HTTP SQL OTLP TRACES MCP HOST (AI APPLICATION) DEVELOPER IDE or terminal AGENT LOOP Tool registry MCP CLIENT 1 MCP CLIENT 2 MCP CLIENT 3 CLAUDE Anthropic API or Amazon Bedrock FILESYSTEM SERVER Local subprocess PROJECT FILES GITHUB MCP SERVER Remote, GitHub-hosted GITHUB OAUTH Authorization server GITHUB Repos, issues, PRs POSTGRES MCP SERVER Remote, team-hosted POSTGRESQL OTEL COLLECTOR GRAFANA CLOUD Traces and dashboards REQUEST MCP OVER STDIO TELEMETRY ); }