| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>MCP Architecture - Model Context Protocol</title> |
| <meta name="description" content="Understand the technical architecture of the Model Context Protocol (MCP) including client-server model, components, and implementation details."> |
| <link rel="stylesheet" href="css/styles.css"> |
| <link rel="preconnect" href="https://fonts.googleapis.com"> |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet"> |
| <style> |
| .architecture-diagram { |
| width: 100%; |
| max-width: 800px; |
| margin: 2rem auto; |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); |
| border-radius: 8px; |
| } |
| </style> |
| </head> |
| <body> |
| <header> |
| <div class="container header-container"> |
| <a href="index.html" class="logo">MCP<span>Hub</span></a> |
| <nav> |
| <ul> |
| <li><a href="index.html">Home</a></li> |
| <li><a href="about.html">About</a></li> |
| <li><a href="architecture.html">Architecture</a></li> |
| <li><a href="benefits.html">Benefits</a></li> |
| <li><a href="ecosystem.html">Ecosystem</a></li> |
| <li><a href="getting-started.html">Get Started</a></li> |
| <li><a href="faq.html">FAQ</a></li> |
| </ul> |
| </nav> |
| </div> |
| </header> |
|
|
| <section class="hero"> |
| <div class="container"> |
| <h1>MCP Architecture</h1> |
| <p>Understanding the technical structure and components of the Model Context Protocol</p> |
| </div> |
| </section> |
|
|
| <main class="container"> |
| <section> |
| <h2>Client-Server Architecture</h2> |
| <p> |
| The Model Context Protocol (MCP) follows a client-server architecture that enables AI models to connect with external data sources and tools. This architecture consists of two main components: |
| </p> |
| |
| |
| <div class="architecture-diagram"> |
| <img src="images/mcp_architecture_diagram.svg" alt="MCP Architecture Diagram showing clients, servers, and transport layer interactions" width="800" height="600"> |
| </div> |
| |
| <div class="two-column"> |
| <div> |
| <h3>MCP Clients</h3> |
| <p> |
| MCP clients are applications that use AI models and need to access external data or functionality. Examples include: |
| </p> |
| <ul style="margin-left: 2rem; margin-bottom: 1.5rem;"> |
| <li>AI-powered chat interfaces (like Claude Desktop)</li> |
| <li>Integrated development environments (IDEs)</li> |
| <li>Custom applications that incorporate LLMs</li> |
| </ul> |
| <p> |
| Clients connect to MCP servers to retrieve context, execute tools, and access data needed by the AI model. |
| </p> |
| </div> |
| <div> |
| <h3>MCP Servers</h3> |
| <p> |
| MCP servers expose data sources, tools, and functionality to MCP clients. Examples include: |
| </p> |
| <ul style="margin-left: 2rem; margin-bottom: 1.5rem;"> |
| <li>File system servers (for accessing local files)</li> |
| <li>Database connectors (for querying databases)</li> |
| <li>API integrations (for accessing web services)</li> |
| <li>Custom tool implementations (for specialized functionality)</li> |
| </ul> |
| <p> |
| Servers handle requests from clients, process them, and return results back to the client. |
| </p> |
| </div> |
| </div> |
| </section> |
|
|
| <section> |
| <h2>Communication Flow</h2> |
| <p> |
| The communication between MCP clients and servers follows a structured flow: |
| </p> |
| <ol style="margin-left: 2rem; margin-bottom: 1.5rem;"> |
| <li> |
| <strong>Connection Establishment:</strong> The client initiates a connection to one or more MCP servers. |
| </li> |
| <li> |
| <strong>Tool Discovery:</strong> The client queries the server for available tools and capabilities using the <code>listTools</code> method. |
| </li> |
| <li> |
| <strong>Tool Invocation:</strong> The client requests the server to perform an action using the <code>callTool</code> method, passing the necessary parameters. |
| </li> |
| <li> |
| <strong>Response Processing:</strong> The server executes the requested action and returns the results to the client. |
| </li> |
| <li> |
| <strong>Model Integration:</strong> The client incorporates the server's response into the AI model's context, allowing the model to use the information in generating its response. |
| </li> |
| </ol> |
| <p> |
| This structured communication flow ensures that AI models can access external data and functionality in a consistent and secure manner. |
| </p> |
| </section> |
|
|
| <section> |
| <h2>MCP Technical Components</h2> |
| <div class="card-container"> |
| <div class="card"> |
| <h3>Protocol Layer</h3> |
| <p> |
| The protocol layer handles message framing, request/response linking, and high-level communication patterns between clients and servers. It defines the structure of messages and the sequence of operations. |
| </p> |
| </div> |
| <div class="card"> |
| <h3>Transport Layer</h3> |
| <p> |
| The transport layer deals with the actual communication between clients and servers. MCP supports multiple transport mechanisms, including stdio for local processes and HTTP over SSE (Server-Sent Events) for remote connections. |
| </p> |
| </div> |
| <div class="card"> |
| <h3>Tool Specifications</h3> |
| <p> |
| Tool specifications define the capabilities that MCP servers expose to clients. Each tool includes a name, description, parameter schema, and return type, allowing clients to understand how to use the tool. |
| </p> |
| </div> |
| <div class="card"> |
| <h3>Security Model</h3> |
| <p> |
| The security model ensures that MCP connections are secure and that data is protected. It includes features like server-controlled access to resources and clear system boundaries. |
| </p> |
| </div> |
| </div> |
| </section> |
|
|
| <section> |
| <h2>Transport Mechanisms</h2> |
| <p> |
| MCP supports different transport mechanisms for communication between clients and servers: |
| </p> |
| <div class="two-column"> |
| <div> |
| <h3>Stdio Servers</h3> |
| <p> |
| Stdio servers run as subprocesses of the client application, enabling local communication through standard input/output streams. This approach is suitable for accessing local resources like the file system or for running tools directly on the client machine. |
| </p> |
| <p> |
| Stdio servers are easy to set up and secure for local operations but are limited to running on the same machine as the client. |
| </p> |
| </div> |
| <div> |
| <h3>HTTP over SSE Servers</h3> |
| <p> |
| HTTP over Server-Sent Events (SSE) enables remote communication between clients and servers. This approach allows MCP servers to run on different machines or in cloud environments, making it suitable for distributed architectures. |
| </p> |
| <p> |
| HTTP/SSE servers provide greater flexibility for deployment but require additional security considerations for remote access. |
| </p> |
| </div> |
| </div> |
| </section> |
|
|
| <section> |
| <h2>Tool Implementation</h2> |
| <p> |
| MCP tools are the functional units that MCP servers expose to clients. Each tool has specific characteristics: |
| </p> |
| <ul style="margin-left: 2rem; margin-bottom: 1.5rem;"> |
| <li> |
| <strong>Name:</strong> A unique identifier for the tool. |
| </li> |
| <li> |
| <strong>Description:</strong> A human-readable explanation of what the tool does. |
| </li> |
| <li> |
| <strong>Parameters:</strong> A schema defining the inputs the tool expects, usually in JSON Schema format. |
| </li> |
| <li> |
| <strong>Return Value:</strong> The type and structure of data the tool returns. |
| </li> |
| </ul> |
| <p> |
| Tools can range from simple utilities like file readers to complex integrations with external APIs or custom business logic. |
| </p> |
| <pre><code>// Example tool definition |
| { |
| "name": "readFile", |
| "description": "Reads the contents of a file", |
| "parameters": { |
| "type": "object", |
| "properties": { |
| "path": { |
| "type": "string", |
| "description": "Path to the file to read" |
| } |
| }, |
| "required": ["path"] |
| }, |
| "returnType": { |
| "type": "string", |
| "description": "Contents of the file" |
| } |
| }</code></pre> |
| </section> |
|
|
| <section> |
| <h2>Implementation Libraries</h2> |
| <p> |
| Anthropic and the MCP community provide libraries to simplify the implementation of MCP clients and servers: |
| </p> |
| <div class="two-column"> |
| <div> |
| <h3>Client Libraries</h3> |
| <p> |
| Client libraries handle the complexity of connecting to MCP servers, discovering tools, and making tool calls. They are available for different programming languages and environments. |
| </p> |
| <ul style="margin-left: 2rem; margin-bottom: 1.5rem;"> |
| <li>TypeScript/JavaScript MCP Client</li> |
| <li>Python MCP Client</li> |
| <li>Java MCP Client (in collaboration with Spring AI)</li> |
| <li>C# MCP Client</li> |
| </ul> |
| </div> |
| <div> |
| <h3>Server Libraries</h3> |
| <p> |
| Server libraries simplify the creation of MCP servers by handling protocol implementation, tool registration, and request processing. They allow developers to focus on implementing the tool functionality. |
| </p> |
| <ul style="margin-left: 2rem; margin-bottom: 1.5rem;"> |
| <li>TypeScript/JavaScript MCP Server</li> |
| <li>Python MCP Server</li> |
| <li>Java MCP Server</li> |
| <li>C# MCP Server</li> |
| </ul> |
| </div> |
| </div> |
| </section> |
|
|
| <section> |
| <h2>Security Architecture</h2> |
| <p> |
| Security is a fundamental aspect of the MCP architecture, with several key principles: |
| </p> |
| <ul style="margin-left: 2rem; margin-bottom: 1.5rem;"> |
| <li> |
| <strong>Server-Controlled Access:</strong> MCP servers maintain control over their resources, determining what data is accessible to clients. |
| </li> |
| <li> |
| <strong>No API Key Sharing:</strong> There's no need to share API keys with LLM providers, as the MCP server handles authentication with external services. |
| </li> |
| <li> |
| <strong>Clear System Boundaries:</strong> The client-server architecture establishes clear boundaries between systems, limiting exposure of sensitive information. |
| </li> |
| <li> |
| <strong>Local Processing:</strong> For sensitive operations, MCP can use local stdio servers to ensure data doesn't leave the user's machine. |
| </li> |
| </ul> |
| <p> |
| As MCP evolves, additional security features are being developed, including enterprise-grade authentication for remote servers and more fine-grained access controls. |
| </p> |
| </section> |
| </main> |
|
|
| <footer> |
| <div class="container footer-container"> |
| <div> |
| <h4>MCP Resources</h4> |
| <ul> |
| <li><a href="https://modelcontextprotocol.io" target="_blank">Official Documentation</a></li> |
| <li><a href="https://github.com/modelcontextprotocol" target="_blank">GitHub Repository</a></li> |
| <li><a href="https://www.anthropic.com/news/model-context-protocol" target="_blank">Anthropic MCP Announcement</a></li> |
| </ul> |
| </div> |
| <div> |
| <h4>Learn More</h4> |
| <ul> |
| <li><a href="about.html">About MCP</a></li> |
| <li><a href="architecture.html">Architecture</a></li> |
| <li><a href="benefits.html">Benefits</a></li> |
| <li><a href="ecosystem.html">Ecosystem</a></li> |
| </ul> |
| </div> |
| <div> |
| <h4>Community</h4> |
| <ul> |
| <li><a href="https://github.com/modelcontextprotocol/discussions" target="_blank">Discussions</a></li> |
| <li><a href="https://github.com/modelcontextprotocol/community-servers" target="_blank">Community Servers</a></li> |
| </ul> |
| </div> |
| </div> |
| <div class="copyright container"> |
| <p>© 2025 MCP Information Hub. Model Context Protocol is an open source project developed by Anthropic, PBC.</p> |
| </div> |
| </footer> |
|
|
| <script src="js/main.js"></script> |
| </body> |
| </html> |
