airabbitX commited on
Commit
f94c05c
·
verified ·
1 Parent(s): 3f22380

Upload 10 files

Browse files
architecture.html CHANGED
@@ -9,6 +9,15 @@
9
  <link rel="preconnect" href="https://fonts.googleapis.com">
10
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
11
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
 
 
 
 
 
 
 
 
 
12
  </head>
13
  <body>
14
  <header>
@@ -41,6 +50,12 @@
41
  <p>
42
  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:
43
  </p>
 
 
 
 
 
 
44
  <div class="two-column">
45
  <div>
46
  <h3>MCP Clients</h3>
 
9
  <link rel="preconnect" href="https://fonts.googleapis.com">
10
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
11
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
12
+ <style>
13
+ .architecture-diagram {
14
+ width: 100%;
15
+ max-width: 800px;
16
+ margin: 2rem auto;
17
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
18
+ border-radius: 8px;
19
+ }
20
+ </style>
21
  </head>
22
  <body>
23
  <header>
 
50
  <p>
51
  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:
52
  </p>
53
+
54
+ <!-- Architecture Diagram -->
55
+ <div class="architecture-diagram">
56
+ <img src="images/mcp_architecture_diagram.svg" alt="MCP Architecture Diagram showing clients, servers, and transport layer interactions" width="800" height="600">
57
+ </div>
58
+
59
  <div class="two-column">
60
  <div>
61
  <h3>MCP Clients</h3>
images/mcp_architecture_diagram.svg ADDED