File size: 12,901 Bytes
3f22380
 
 
 
 
 
 
 
 
 
 
f94c05c
 
 
 
 
 
 
 
 
3f22380
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
f94c05c
 
 
 
 
 
3f22380
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
<!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>
      
      <!-- Architecture Diagram -->
      <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>&copy; 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>