Upload 9 files
Browse files- about.html +185 -0
- architecture.html +296 -0
- benefits.html +339 -0
- css/styles.css +265 -0
- ecosystem.html +445 -0
- faq.html +696 -0
- getting-started.html +613 -0
- index.html +154 -19
- js/main.js +37 -0
about.html
ADDED
|
@@ -0,0 +1,185 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="en">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8">
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
+
<title>About MCP - Model Context Protocol</title>
|
| 7 |
+
<meta name="description" content="Learn about the history, purpose, and development of the Model Context Protocol (MCP) for AI integration.">
|
| 8 |
+
<link rel="stylesheet" href="css/styles.css">
|
| 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>
|
| 15 |
+
<div class="container header-container">
|
| 16 |
+
<a href="index.html" class="logo">MCP<span>Hub</span></a>
|
| 17 |
+
<nav>
|
| 18 |
+
<ul>
|
| 19 |
+
<li><a href="index.html">Home</a></li>
|
| 20 |
+
<li><a href="about.html">About</a></li>
|
| 21 |
+
<li><a href="architecture.html">Architecture</a></li>
|
| 22 |
+
<li><a href="benefits.html">Benefits</a></li>
|
| 23 |
+
<li><a href="ecosystem.html">Ecosystem</a></li>
|
| 24 |
+
<li><a href="getting-started.html">Get Started</a></li>
|
| 25 |
+
<li><a href="faq.html">FAQ</a></li>
|
| 26 |
+
</ul>
|
| 27 |
+
</nav>
|
| 28 |
+
</div>
|
| 29 |
+
</header>
|
| 30 |
+
|
| 31 |
+
<section class="hero">
|
| 32 |
+
<div class="container">
|
| 33 |
+
<h1>About Model Context Protocol</h1>
|
| 34 |
+
<p>Understanding the origins, purpose, and vision of MCP</p>
|
| 35 |
+
</div>
|
| 36 |
+
</section>
|
| 37 |
+
|
| 38 |
+
<main class="container">
|
| 39 |
+
<section>
|
| 40 |
+
<h2>What is MCP?</h2>
|
| 41 |
+
<p>
|
| 42 |
+
The Model Context Protocol (MCP) is an open standard developed by Anthropic to connect AI models with external data sources and tools. MCP provides a standardized way for AI systems to access, interact with, and utilize information from various sources, similar to how USB-C provides a universal connector for physical devices.
|
| 43 |
+
</p>
|
| 44 |
+
<p>
|
| 45 |
+
At its core, MCP addresses a fundamental challenge in AI development: the isolation of AI models from the data and tools they need to be truly useful. Before MCP, connecting AI to external systems required custom integrations for each data source or tool, making it difficult to scale and maintain AI applications.
|
| 46 |
+
</p>
|
| 47 |
+
</section>
|
| 48 |
+
|
| 49 |
+
<section>
|
| 50 |
+
<h2>Origins and Development</h2>
|
| 51 |
+
<p>
|
| 52 |
+
MCP was developed and open-sourced by Anthropic in 2024 as a solution to the growing need for AI models to access external data and functionality in a standardized way. As AI assistants gained mainstream adoption, the industry had made rapid advances in reasoning and quality, but these models remained constrained by their isolation from data sources.
|
| 53 |
+
</p>
|
| 54 |
+
<p>
|
| 55 |
+
The development of MCP was driven by the recognition that even the most sophisticated AI models are limited when they cannot access the information they need to answer questions or perform tasks. By creating an open standard for data access, Anthropic aimed to replace fragmented integrations with a single protocol that could be widely adopted across the industry.
|
| 56 |
+
</p>
|
| 57 |
+
</section>
|
| 58 |
+
|
| 59 |
+
<section>
|
| 60 |
+
<h2>Core Principles</h2>
|
| 61 |
+
<div class="card-container">
|
| 62 |
+
<div class="card">
|
| 63 |
+
<h3>Open Standard</h3>
|
| 64 |
+
<p>MCP is designed as an open protocol that any organization or developer can implement, fostering collaboration and interoperability across the AI ecosystem.</p>
|
| 65 |
+
</div>
|
| 66 |
+
<div class="card">
|
| 67 |
+
<h3>Standardization</h3>
|
| 68 |
+
<p>MCP provides a common interface for AI models to access data and tools, eliminating the need for custom integrations for each new data source.</p>
|
| 69 |
+
</div>
|
| 70 |
+
<div class="card">
|
| 71 |
+
<h3>Security-First Design</h3>
|
| 72 |
+
<p>MCP was built with security as a fundamental consideration, ensuring that data sources maintain control over their information and that connections between AI models and data are secure.</p>
|
| 73 |
+
</div>
|
| 74 |
+
<div class="card">
|
| 75 |
+
<h3>Modular Architecture</h3>
|
| 76 |
+
<p>The client-server architecture of MCP allows for flexible deployment and integration across different systems and environments.</p>
|
| 77 |
+
</div>
|
| 78 |
+
</div>
|
| 79 |
+
</section>
|
| 80 |
+
|
| 81 |
+
<section>
|
| 82 |
+
<h2>The Problem MCP Solves</h2>
|
| 83 |
+
<p>
|
| 84 |
+
Before MCP, AI developers faced several challenges when trying to connect AI models with external data and functionality:
|
| 85 |
+
</p>
|
| 86 |
+
<ul style="margin-left: 2rem; margin-bottom: 1.5rem;">
|
| 87 |
+
<li>
|
| 88 |
+
<strong>Custom integrations:</strong> Each new data source or tool required its own custom implementation, making it difficult to scale AI applications.
|
| 89 |
+
</li>
|
| 90 |
+
<li>
|
| 91 |
+
<strong>Fragmented ecosystem:</strong> The lack of standardization led to a fragmented landscape of AI integrations, with limited interoperability between different systems.
|
| 92 |
+
</li>
|
| 93 |
+
<li>
|
| 94 |
+
<strong>Security concerns:</strong> Connecting AI models to external data sources raised security considerations, especially regarding data access and API key management.
|
| 95 |
+
</li>
|
| 96 |
+
<li>
|
| 97 |
+
<strong>Maintenance overhead:</strong> Managing multiple custom integrations increased the maintenance burden for AI applications.
|
| 98 |
+
</li>
|
| 99 |
+
</ul>
|
| 100 |
+
<p>
|
| 101 |
+
MCP addresses these challenges by providing a standardized way for AI models to connect to data sources and tools, simplifying development, improving security, and enabling greater interoperability across the AI ecosystem.
|
| 102 |
+
</p>
|
| 103 |
+
</section>
|
| 104 |
+
|
| 105 |
+
<section>
|
| 106 |
+
<h2>MCP Compared to Other Standards</h2>
|
| 107 |
+
<p>
|
| 108 |
+
While MCP is not the first attempt to standardize AI integration, it offers several unique advantages:
|
| 109 |
+
</p>
|
| 110 |
+
<div class="two-column">
|
| 111 |
+
<div>
|
| 112 |
+
<h3>MCP vs. Custom API Integrations</h3>
|
| 113 |
+
<p>
|
| 114 |
+
Traditional API integrations require custom code for each integration and often involve sharing API keys with AI providers. MCP provides a standardized interface, eliminating the need for custom code and keeping API keys within your infrastructure.
|
| 115 |
+
</p>
|
| 116 |
+
</div>
|
| 117 |
+
<div>
|
| 118 |
+
<h3>MCP vs. Plugin Systems</h3>
|
| 119 |
+
<p>
|
| 120 |
+
Plugin systems typically require developers to conform to a specific platform's requirements and may involve hosting code on third-party servers. MCP is platform-agnostic and allows tools to run within your own infrastructure.
|
| 121 |
+
</p>
|
| 122 |
+
</div>
|
| 123 |
+
</div>
|
| 124 |
+
<div class="two-column" style="margin-top: 2rem;">
|
| 125 |
+
<div>
|
| 126 |
+
<h3>MCP vs. Agent Frameworks</h3>
|
| 127 |
+
<p>
|
| 128 |
+
Agent frameworks often focus on enabling AI to use tools but may lack standardized ways to connect to data sources. MCP provides both tool usage and data access capabilities within a unified protocol.
|
| 129 |
+
</p>
|
| 130 |
+
</div>
|
| 131 |
+
<div>
|
| 132 |
+
<h3>MCP vs. Function Calling</h3>
|
| 133 |
+
<p>
|
| 134 |
+
Function calling enables AI models to invoke specific functions but typically lacks standardized ways to provide context and handle complex data access. MCP offers a more comprehensive solution for both tool invocation and context provision.
|
| 135 |
+
</p>
|
| 136 |
+
</div>
|
| 137 |
+
</div>
|
| 138 |
+
</section>
|
| 139 |
+
|
| 140 |
+
<section>
|
| 141 |
+
<h2>Vision and Future</h2>
|
| 142 |
+
<p>
|
| 143 |
+
The vision for MCP is to become a foundational standard for AI integration, similar to how HTTP became the foundation for web communication. As MCP matures and gains adoption, it has the potential to transform how AI systems interact with data and tools, leading to more capable, useful, and secure AI applications.
|
| 144 |
+
</p>
|
| 145 |
+
<p>
|
| 146 |
+
Future developments for MCP include expanding the ecosystem of available MCP servers, improving security features, and enhancing the protocol to support new use cases and requirements as they emerge.
|
| 147 |
+
</p>
|
| 148 |
+
</section>
|
| 149 |
+
</main>
|
| 150 |
+
|
| 151 |
+
<footer>
|
| 152 |
+
<div class="container footer-container">
|
| 153 |
+
<div>
|
| 154 |
+
<h4>MCP Resources</h4>
|
| 155 |
+
<ul>
|
| 156 |
+
<li><a href="https://modelcontextprotocol.io" target="_blank">Official Documentation</a></li>
|
| 157 |
+
<li><a href="https://github.com/modelcontextprotocol" target="_blank">GitHub Repository</a></li>
|
| 158 |
+
<li><a href="https://www.anthropic.com/news/model-context-protocol" target="_blank">Anthropic MCP Announcement</a></li>
|
| 159 |
+
</ul>
|
| 160 |
+
</div>
|
| 161 |
+
<div>
|
| 162 |
+
<h4>Learn More</h4>
|
| 163 |
+
<ul>
|
| 164 |
+
<li><a href="about.html">About MCP</a></li>
|
| 165 |
+
<li><a href="architecture.html">Architecture</a></li>
|
| 166 |
+
<li><a href="benefits.html">Benefits</a></li>
|
| 167 |
+
<li><a href="ecosystem.html">Ecosystem</a></li>
|
| 168 |
+
</ul>
|
| 169 |
+
</div>
|
| 170 |
+
<div>
|
| 171 |
+
<h4>Community</h4>
|
| 172 |
+
<ul>
|
| 173 |
+
<li><a href="https://github.com/modelcontextprotocol/discussions" target="_blank">Discussions</a></li>
|
| 174 |
+
<li><a href="https://github.com/modelcontextprotocol/community-servers" target="_blank">Community Servers</a></li>
|
| 175 |
+
</ul>
|
| 176 |
+
</div>
|
| 177 |
+
</div>
|
| 178 |
+
<div class="copyright container">
|
| 179 |
+
<p>© 2025 MCP Information Hub. Model Context Protocol is an open source project developed by Anthropic, PBC.</p>
|
| 180 |
+
</div>
|
| 181 |
+
</footer>
|
| 182 |
+
|
| 183 |
+
<script src="js/main.js"></script>
|
| 184 |
+
</body>
|
| 185 |
+
</html>
|
architecture.html
ADDED
|
@@ -0,0 +1,296 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="en">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8">
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
+
<title>MCP Architecture - Model Context Protocol</title>
|
| 7 |
+
<meta name="description" content="Understand the technical architecture of the Model Context Protocol (MCP) including client-server model, components, and implementation details.">
|
| 8 |
+
<link rel="stylesheet" href="css/styles.css">
|
| 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>
|
| 15 |
+
<div class="container header-container">
|
| 16 |
+
<a href="index.html" class="logo">MCP<span>Hub</span></a>
|
| 17 |
+
<nav>
|
| 18 |
+
<ul>
|
| 19 |
+
<li><a href="index.html">Home</a></li>
|
| 20 |
+
<li><a href="about.html">About</a></li>
|
| 21 |
+
<li><a href="architecture.html">Architecture</a></li>
|
| 22 |
+
<li><a href="benefits.html">Benefits</a></li>
|
| 23 |
+
<li><a href="ecosystem.html">Ecosystem</a></li>
|
| 24 |
+
<li><a href="getting-started.html">Get Started</a></li>
|
| 25 |
+
<li><a href="faq.html">FAQ</a></li>
|
| 26 |
+
</ul>
|
| 27 |
+
</nav>
|
| 28 |
+
</div>
|
| 29 |
+
</header>
|
| 30 |
+
|
| 31 |
+
<section class="hero">
|
| 32 |
+
<div class="container">
|
| 33 |
+
<h1>MCP Architecture</h1>
|
| 34 |
+
<p>Understanding the technical structure and components of the Model Context Protocol</p>
|
| 35 |
+
</div>
|
| 36 |
+
</section>
|
| 37 |
+
|
| 38 |
+
<main class="container">
|
| 39 |
+
<section>
|
| 40 |
+
<h2>Client-Server Architecture</h2>
|
| 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>
|
| 47 |
+
<p>
|
| 48 |
+
MCP clients are applications that use AI models and need to access external data or functionality. Examples include:
|
| 49 |
+
</p>
|
| 50 |
+
<ul style="margin-left: 2rem; margin-bottom: 1.5rem;">
|
| 51 |
+
<li>AI-powered chat interfaces (like Claude Desktop)</li>
|
| 52 |
+
<li>Integrated development environments (IDEs)</li>
|
| 53 |
+
<li>Custom applications that incorporate LLMs</li>
|
| 54 |
+
</ul>
|
| 55 |
+
<p>
|
| 56 |
+
Clients connect to MCP servers to retrieve context, execute tools, and access data needed by the AI model.
|
| 57 |
+
</p>
|
| 58 |
+
</div>
|
| 59 |
+
<div>
|
| 60 |
+
<h3>MCP Servers</h3>
|
| 61 |
+
<p>
|
| 62 |
+
MCP servers expose data sources, tools, and functionality to MCP clients. Examples include:
|
| 63 |
+
</p>
|
| 64 |
+
<ul style="margin-left: 2rem; margin-bottom: 1.5rem;">
|
| 65 |
+
<li>File system servers (for accessing local files)</li>
|
| 66 |
+
<li>Database connectors (for querying databases)</li>
|
| 67 |
+
<li>API integrations (for accessing web services)</li>
|
| 68 |
+
<li>Custom tool implementations (for specialized functionality)</li>
|
| 69 |
+
</ul>
|
| 70 |
+
<p>
|
| 71 |
+
Servers handle requests from clients, process them, and return results back to the client.
|
| 72 |
+
</p>
|
| 73 |
+
</div>
|
| 74 |
+
</div>
|
| 75 |
+
</section>
|
| 76 |
+
|
| 77 |
+
<section>
|
| 78 |
+
<h2>Communication Flow</h2>
|
| 79 |
+
<p>
|
| 80 |
+
The communication between MCP clients and servers follows a structured flow:
|
| 81 |
+
</p>
|
| 82 |
+
<ol style="margin-left: 2rem; margin-bottom: 1.5rem;">
|
| 83 |
+
<li>
|
| 84 |
+
<strong>Connection Establishment:</strong> The client initiates a connection to one or more MCP servers.
|
| 85 |
+
</li>
|
| 86 |
+
<li>
|
| 87 |
+
<strong>Tool Discovery:</strong> The client queries the server for available tools and capabilities using the <code>listTools</code> method.
|
| 88 |
+
</li>
|
| 89 |
+
<li>
|
| 90 |
+
<strong>Tool Invocation:</strong> The client requests the server to perform an action using the <code>callTool</code> method, passing the necessary parameters.
|
| 91 |
+
</li>
|
| 92 |
+
<li>
|
| 93 |
+
<strong>Response Processing:</strong> The server executes the requested action and returns the results to the client.
|
| 94 |
+
</li>
|
| 95 |
+
<li>
|
| 96 |
+
<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.
|
| 97 |
+
</li>
|
| 98 |
+
</ol>
|
| 99 |
+
<p>
|
| 100 |
+
This structured communication flow ensures that AI models can access external data and functionality in a consistent and secure manner.
|
| 101 |
+
</p>
|
| 102 |
+
</section>
|
| 103 |
+
|
| 104 |
+
<section>
|
| 105 |
+
<h2>MCP Technical Components</h2>
|
| 106 |
+
<div class="card-container">
|
| 107 |
+
<div class="card">
|
| 108 |
+
<h3>Protocol Layer</h3>
|
| 109 |
+
<p>
|
| 110 |
+
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.
|
| 111 |
+
</p>
|
| 112 |
+
</div>
|
| 113 |
+
<div class="card">
|
| 114 |
+
<h3>Transport Layer</h3>
|
| 115 |
+
<p>
|
| 116 |
+
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.
|
| 117 |
+
</p>
|
| 118 |
+
</div>
|
| 119 |
+
<div class="card">
|
| 120 |
+
<h3>Tool Specifications</h3>
|
| 121 |
+
<p>
|
| 122 |
+
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.
|
| 123 |
+
</p>
|
| 124 |
+
</div>
|
| 125 |
+
<div class="card">
|
| 126 |
+
<h3>Security Model</h3>
|
| 127 |
+
<p>
|
| 128 |
+
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.
|
| 129 |
+
</p>
|
| 130 |
+
</div>
|
| 131 |
+
</div>
|
| 132 |
+
</section>
|
| 133 |
+
|
| 134 |
+
<section>
|
| 135 |
+
<h2>Transport Mechanisms</h2>
|
| 136 |
+
<p>
|
| 137 |
+
MCP supports different transport mechanisms for communication between clients and servers:
|
| 138 |
+
</p>
|
| 139 |
+
<div class="two-column">
|
| 140 |
+
<div>
|
| 141 |
+
<h3>Stdio Servers</h3>
|
| 142 |
+
<p>
|
| 143 |
+
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.
|
| 144 |
+
</p>
|
| 145 |
+
<p>
|
| 146 |
+
Stdio servers are easy to set up and secure for local operations but are limited to running on the same machine as the client.
|
| 147 |
+
</p>
|
| 148 |
+
</div>
|
| 149 |
+
<div>
|
| 150 |
+
<h3>HTTP over SSE Servers</h3>
|
| 151 |
+
<p>
|
| 152 |
+
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.
|
| 153 |
+
</p>
|
| 154 |
+
<p>
|
| 155 |
+
HTTP/SSE servers provide greater flexibility for deployment but require additional security considerations for remote access.
|
| 156 |
+
</p>
|
| 157 |
+
</div>
|
| 158 |
+
</div>
|
| 159 |
+
</section>
|
| 160 |
+
|
| 161 |
+
<section>
|
| 162 |
+
<h2>Tool Implementation</h2>
|
| 163 |
+
<p>
|
| 164 |
+
MCP tools are the functional units that MCP servers expose to clients. Each tool has specific characteristics:
|
| 165 |
+
</p>
|
| 166 |
+
<ul style="margin-left: 2rem; margin-bottom: 1.5rem;">
|
| 167 |
+
<li>
|
| 168 |
+
<strong>Name:</strong> A unique identifier for the tool.
|
| 169 |
+
</li>
|
| 170 |
+
<li>
|
| 171 |
+
<strong>Description:</strong> A human-readable explanation of what the tool does.
|
| 172 |
+
</li>
|
| 173 |
+
<li>
|
| 174 |
+
<strong>Parameters:</strong> A schema defining the inputs the tool expects, usually in JSON Schema format.
|
| 175 |
+
</li>
|
| 176 |
+
<li>
|
| 177 |
+
<strong>Return Value:</strong> The type and structure of data the tool returns.
|
| 178 |
+
</li>
|
| 179 |
+
</ul>
|
| 180 |
+
<p>
|
| 181 |
+
Tools can range from simple utilities like file readers to complex integrations with external APIs or custom business logic.
|
| 182 |
+
</p>
|
| 183 |
+
<pre><code>// Example tool definition
|
| 184 |
+
{
|
| 185 |
+
"name": "readFile",
|
| 186 |
+
"description": "Reads the contents of a file",
|
| 187 |
+
"parameters": {
|
| 188 |
+
"type": "object",
|
| 189 |
+
"properties": {
|
| 190 |
+
"path": {
|
| 191 |
+
"type": "string",
|
| 192 |
+
"description": "Path to the file to read"
|
| 193 |
+
}
|
| 194 |
+
},
|
| 195 |
+
"required": ["path"]
|
| 196 |
+
},
|
| 197 |
+
"returnType": {
|
| 198 |
+
"type": "string",
|
| 199 |
+
"description": "Contents of the file"
|
| 200 |
+
}
|
| 201 |
+
}</code></pre>
|
| 202 |
+
</section>
|
| 203 |
+
|
| 204 |
+
<section>
|
| 205 |
+
<h2>Implementation Libraries</h2>
|
| 206 |
+
<p>
|
| 207 |
+
Anthropic and the MCP community provide libraries to simplify the implementation of MCP clients and servers:
|
| 208 |
+
</p>
|
| 209 |
+
<div class="two-column">
|
| 210 |
+
<div>
|
| 211 |
+
<h3>Client Libraries</h3>
|
| 212 |
+
<p>
|
| 213 |
+
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.
|
| 214 |
+
</p>
|
| 215 |
+
<ul style="margin-left: 2rem; margin-bottom: 1.5rem;">
|
| 216 |
+
<li>TypeScript/JavaScript MCP Client</li>
|
| 217 |
+
<li>Python MCP Client</li>
|
| 218 |
+
<li>Java MCP Client (in collaboration with Spring AI)</li>
|
| 219 |
+
<li>C# MCP Client</li>
|
| 220 |
+
</ul>
|
| 221 |
+
</div>
|
| 222 |
+
<div>
|
| 223 |
+
<h3>Server Libraries</h3>
|
| 224 |
+
<p>
|
| 225 |
+
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.
|
| 226 |
+
</p>
|
| 227 |
+
<ul style="margin-left: 2rem; margin-bottom: 1.5rem;">
|
| 228 |
+
<li>TypeScript/JavaScript MCP Server</li>
|
| 229 |
+
<li>Python MCP Server</li>
|
| 230 |
+
<li>Java MCP Server</li>
|
| 231 |
+
<li>C# MCP Server</li>
|
| 232 |
+
</ul>
|
| 233 |
+
</div>
|
| 234 |
+
</div>
|
| 235 |
+
</section>
|
| 236 |
+
|
| 237 |
+
<section>
|
| 238 |
+
<h2>Security Architecture</h2>
|
| 239 |
+
<p>
|
| 240 |
+
Security is a fundamental aspect of the MCP architecture, with several key principles:
|
| 241 |
+
</p>
|
| 242 |
+
<ul style="margin-left: 2rem; margin-bottom: 1.5rem;">
|
| 243 |
+
<li>
|
| 244 |
+
<strong>Server-Controlled Access:</strong> MCP servers maintain control over their resources, determining what data is accessible to clients.
|
| 245 |
+
</li>
|
| 246 |
+
<li>
|
| 247 |
+
<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.
|
| 248 |
+
</li>
|
| 249 |
+
<li>
|
| 250 |
+
<strong>Clear System Boundaries:</strong> The client-server architecture establishes clear boundaries between systems, limiting exposure of sensitive information.
|
| 251 |
+
</li>
|
| 252 |
+
<li>
|
| 253 |
+
<strong>Local Processing:</strong> For sensitive operations, MCP can use local stdio servers to ensure data doesn't leave the user's machine.
|
| 254 |
+
</li>
|
| 255 |
+
</ul>
|
| 256 |
+
<p>
|
| 257 |
+
As MCP evolves, additional security features are being developed, including enterprise-grade authentication for remote servers and more fine-grained access controls.
|
| 258 |
+
</p>
|
| 259 |
+
</section>
|
| 260 |
+
</main>
|
| 261 |
+
|
| 262 |
+
<footer>
|
| 263 |
+
<div class="container footer-container">
|
| 264 |
+
<div>
|
| 265 |
+
<h4>MCP Resources</h4>
|
| 266 |
+
<ul>
|
| 267 |
+
<li><a href="https://modelcontextprotocol.io" target="_blank">Official Documentation</a></li>
|
| 268 |
+
<li><a href="https://github.com/modelcontextprotocol" target="_blank">GitHub Repository</a></li>
|
| 269 |
+
<li><a href="https://www.anthropic.com/news/model-context-protocol" target="_blank">Anthropic MCP Announcement</a></li>
|
| 270 |
+
</ul>
|
| 271 |
+
</div>
|
| 272 |
+
<div>
|
| 273 |
+
<h4>Learn More</h4>
|
| 274 |
+
<ul>
|
| 275 |
+
<li><a href="about.html">About MCP</a></li>
|
| 276 |
+
<li><a href="architecture.html">Architecture</a></li>
|
| 277 |
+
<li><a href="benefits.html">Benefits</a></li>
|
| 278 |
+
<li><a href="ecosystem.html">Ecosystem</a></li>
|
| 279 |
+
</ul>
|
| 280 |
+
</div>
|
| 281 |
+
<div>
|
| 282 |
+
<h4>Community</h4>
|
| 283 |
+
<ul>
|
| 284 |
+
<li><a href="https://github.com/modelcontextprotocol/discussions" target="_blank">Discussions</a></li>
|
| 285 |
+
<li><a href="https://github.com/modelcontextprotocol/community-servers" target="_blank">Community Servers</a></li>
|
| 286 |
+
</ul>
|
| 287 |
+
</div>
|
| 288 |
+
</div>
|
| 289 |
+
<div class="copyright container">
|
| 290 |
+
<p>© 2025 MCP Information Hub. Model Context Protocol is an open source project developed by Anthropic, PBC.</p>
|
| 291 |
+
</div>
|
| 292 |
+
</footer>
|
| 293 |
+
|
| 294 |
+
<script src="js/main.js"></script>
|
| 295 |
+
</body>
|
| 296 |
+
</html>
|
benefits.html
ADDED
|
@@ -0,0 +1,339 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="en">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8">
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
+
<title>MCP Benefits - Model Context Protocol</title>
|
| 7 |
+
<meta name="description" content="Explore the benefits and use cases of the Model Context Protocol (MCP) for AI integration with external data sources and tools.">
|
| 8 |
+
<link rel="stylesheet" href="css/styles.css">
|
| 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>
|
| 15 |
+
<div class="container header-container">
|
| 16 |
+
<a href="index.html" class="logo">MCP<span>Hub</span></a>
|
| 17 |
+
<nav>
|
| 18 |
+
<ul>
|
| 19 |
+
<li><a href="index.html">Home</a></li>
|
| 20 |
+
<li><a href="about.html">About</a></li>
|
| 21 |
+
<li><a href="architecture.html">Architecture</a></li>
|
| 22 |
+
<li><a href="benefits.html">Benefits</a></li>
|
| 23 |
+
<li><a href="ecosystem.html">Ecosystem</a></li>
|
| 24 |
+
<li><a href="getting-started.html">Get Started</a></li>
|
| 25 |
+
<li><a href="faq.html">FAQ</a></li>
|
| 26 |
+
</ul>
|
| 27 |
+
</nav>
|
| 28 |
+
</div>
|
| 29 |
+
</header>
|
| 30 |
+
|
| 31 |
+
<section class="hero">
|
| 32 |
+
<div class="container">
|
| 33 |
+
<h1>Benefits of MCP</h1>
|
| 34 |
+
<p>Why Model Context Protocol matters for AI development and integration</p>
|
| 35 |
+
</div>
|
| 36 |
+
</section>
|
| 37 |
+
|
| 38 |
+
<main class="container">
|
| 39 |
+
<section>
|
| 40 |
+
<h2>Key Advantages</h2>
|
| 41 |
+
<div class="card-container">
|
| 42 |
+
<div class="card">
|
| 43 |
+
<div class="card-icon">🔄</div>
|
| 44 |
+
<h3>Standardization</h3>
|
| 45 |
+
<p>
|
| 46 |
+
MCP provides a standardized way for AI models to connect with data sources and tools, eliminating the need for custom integrations for each new system.
|
| 47 |
+
</p>
|
| 48 |
+
</div>
|
| 49 |
+
<div class="card">
|
| 50 |
+
<div class="card-icon">🔒</div>
|
| 51 |
+
<h3>Enhanced Security</h3>
|
| 52 |
+
<p>
|
| 53 |
+
With MCP, data sources maintain control over their information, and there's no need to share API keys with LLM providers, improving overall security.
|
| 54 |
+
</p>
|
| 55 |
+
</div>
|
| 56 |
+
<div class="card">
|
| 57 |
+
<div class="card-icon">⚡</div>
|
| 58 |
+
<h3>Development Efficiency</h3>
|
| 59 |
+
<p>
|
| 60 |
+
By reducing the need for custom integration code, MCP accelerates development and allows teams to focus on adding value rather than building connectors.
|
| 61 |
+
</p>
|
| 62 |
+
</div>
|
| 63 |
+
<div class="card">
|
| 64 |
+
<div class="card-icon">🔌</div>
|
| 65 |
+
<h3>Interoperability</h3>
|
| 66 |
+
<p>
|
| 67 |
+
MCP works across different AI models and data sources, creating a more interconnected ecosystem where tools and data can be easily shared.
|
| 68 |
+
</p>
|
| 69 |
+
</div>
|
| 70 |
+
</div>
|
| 71 |
+
</section>
|
| 72 |
+
|
| 73 |
+
<section>
|
| 74 |
+
<h2>Benefits for Different Stakeholders</h2>
|
| 75 |
+
<div class="two-column">
|
| 76 |
+
<div>
|
| 77 |
+
<h3>For AI Developers</h3>
|
| 78 |
+
<ul style="margin-left: 2rem; margin-bottom: 1.5rem;">
|
| 79 |
+
<li>
|
| 80 |
+
<strong>Reduced Integration Work:</strong> Less time spent building custom connectors for each data source or tool.
|
| 81 |
+
</li>
|
| 82 |
+
<li>
|
| 83 |
+
<strong>Consistent Interface:</strong> A standardized way to connect AI models to external systems.
|
| 84 |
+
</li>
|
| 85 |
+
<li>
|
| 86 |
+
<strong>Simplified Maintenance:</strong> Easier to maintain and update integrations as systems evolve.
|
| 87 |
+
</li>
|
| 88 |
+
<li>
|
| 89 |
+
<strong>Improved Security:</strong> Clear system boundaries and reduced need for sensitive credential sharing.
|
| 90 |
+
</li>
|
| 91 |
+
</ul>
|
| 92 |
+
</div>
|
| 93 |
+
<div>
|
| 94 |
+
<h3>For Enterprise Organizations</h3>
|
| 95 |
+
<ul style="margin-left: 2rem; margin-bottom: 1.5rem;">
|
| 96 |
+
<li>
|
| 97 |
+
<strong>Data Control:</strong> Maintain control over sensitive information when integrating with AI systems.
|
| 98 |
+
</li>
|
| 99 |
+
<li>
|
| 100 |
+
<strong>Scalable Deployment:</strong> Easier to deploy AI solutions across multiple systems and data sources.
|
| 101 |
+
</li>
|
| 102 |
+
<li>
|
| 103 |
+
<strong>Vendor Flexibility:</strong> Reduced dependency on specific AI vendors, as MCP works across different models.
|
| 104 |
+
</li>
|
| 105 |
+
<li>
|
| 106 |
+
<strong>Future-Proofing:</strong> Investment in MCP integration provides a foundation for future AI advancements.
|
| 107 |
+
</li>
|
| 108 |
+
</ul>
|
| 109 |
+
</div>
|
| 110 |
+
</div>
|
| 111 |
+
<div class="two-column" style="margin-top: 2rem;">
|
| 112 |
+
<div>
|
| 113 |
+
<h3>For Data Providers</h3>
|
| 114 |
+
<ul style="margin-left: 2rem; margin-bottom: 1.5rem;">
|
| 115 |
+
<li>
|
| 116 |
+
<strong>Wider Accessibility:</strong> Expose data to a broader range of AI applications through a single interface.
|
| 117 |
+
</li>
|
| 118 |
+
<li>
|
| 119 |
+
<strong>Control Over Access:</strong> Maintain governance over who can access data and how it's used.
|
| 120 |
+
</li>
|
| 121 |
+
<li>
|
| 122 |
+
<strong>Reduced Integration Effort:</strong> Build one MCP server instead of multiple custom integrations.
|
| 123 |
+
</li>
|
| 124 |
+
<li>
|
| 125 |
+
<strong>Enhanced Value:</strong> Increase the utility and value of data by making it more accessible to AI systems.
|
| 126 |
+
</li>
|
| 127 |
+
</ul>
|
| 128 |
+
</div>
|
| 129 |
+
<div>
|
| 130 |
+
<h3>For End Users</h3>
|
| 131 |
+
<ul style="margin-left: 2rem; margin-bottom: 1.5rem;">
|
| 132 |
+
<li>
|
| 133 |
+
<strong>More Capable AI:</strong> AI systems that can access more data and tools provide better responses and capabilities.
|
| 134 |
+
</li>
|
| 135 |
+
<li>
|
| 136 |
+
<strong>Privacy Preservation:</strong> Local processing options keep sensitive data on the user's device.
|
| 137 |
+
</li>
|
| 138 |
+
<li>
|
| 139 |
+
<strong>Consistent Experience:</strong> Standardization leads to more consistent behavior across different AI applications.
|
| 140 |
+
</li>
|
| 141 |
+
<li>
|
| 142 |
+
<strong>Greater Functionality:</strong> AI can perform more tasks by accessing external tools and services.
|
| 143 |
+
</li>
|
| 144 |
+
</ul>
|
| 145 |
+
</div>
|
| 146 |
+
</div>
|
| 147 |
+
</section>
|
| 148 |
+
|
| 149 |
+
<section>
|
| 150 |
+
<h2>Technical Benefits</h2>
|
| 151 |
+
<div class="card-container">
|
| 152 |
+
<div class="card">
|
| 153 |
+
<h3>Modular Design</h3>
|
| 154 |
+
<p>
|
| 155 |
+
MCP's modular architecture allows components to be developed, tested, and deployed independently, improving system flexibility and maintainability.
|
| 156 |
+
</p>
|
| 157 |
+
</div>
|
| 158 |
+
<div class="card">
|
| 159 |
+
<h3>Transport Flexibility</h3>
|
| 160 |
+
<p>
|
| 161 |
+
Support for multiple transport mechanisms (stdio, HTTP/SSE) enables both local and remote integration scenarios, adapting to different security and deployment requirements.
|
| 162 |
+
</p>
|
| 163 |
+
</div>
|
| 164 |
+
<div class="card">
|
| 165 |
+
<h3>Self-Describing Tools</h3>
|
| 166 |
+
<p>
|
| 167 |
+
Tools in MCP are self-describing, with detailed information about their capabilities, parameters, and return values, making it easier for AI models to understand how to use them.
|
| 168 |
+
</p>
|
| 169 |
+
</div>
|
| 170 |
+
<div class="card">
|
| 171 |
+
<h3>Language Agnostic</h3>
|
| 172 |
+
<p>
|
| 173 |
+
MCP implementations are available for multiple programming languages (JavaScript, Python, Java, C#), allowing developers to work in their preferred environment.
|
| 174 |
+
</p>
|
| 175 |
+
</div>
|
| 176 |
+
</div>
|
| 177 |
+
</section>
|
| 178 |
+
|
| 179 |
+
<section>
|
| 180 |
+
<h2>Use Cases</h2>
|
| 181 |
+
<div class="two-column">
|
| 182 |
+
<div>
|
| 183 |
+
<h3>Content Creation and Editing</h3>
|
| 184 |
+
<p>
|
| 185 |
+
MCP enables AI models to access local files, reference materials, and editing tools, enhancing their ability to assist with content creation and editing tasks. For example:
|
| 186 |
+
</p>
|
| 187 |
+
<ul style="margin-left: 2rem; margin-bottom: 1.5rem;">
|
| 188 |
+
<li>AI-assisted document editing with access to local files</li>
|
| 189 |
+
<li>Code generation with access to project repositories</li>
|
| 190 |
+
<li>Content research with access to multiple data sources</li>
|
| 191 |
+
</ul>
|
| 192 |
+
</div>
|
| 193 |
+
<div>
|
| 194 |
+
<h3>Enterprise Knowledge Management</h3>
|
| 195 |
+
<p>
|
| 196 |
+
MCP allows AI systems to access corporate knowledge bases, document repositories, and internal tools, making them more effective for enterprise use cases:
|
| 197 |
+
</p>
|
| 198 |
+
<ul style="margin-left: 2rem; margin-bottom: 1.5rem;">
|
| 199 |
+
<li>Connecting AI assistants to internal document management systems</li>
|
| 200 |
+
<li>Integrating with enterprise search and knowledge bases</li>
|
| 201 |
+
<li>Secure access to proprietary data and tools</li>
|
| 202 |
+
</ul>
|
| 203 |
+
</div>
|
| 204 |
+
</div>
|
| 205 |
+
<div class="two-column" style="margin-top: 2rem;">
|
| 206 |
+
<div>
|
| 207 |
+
<h3>Development and Coding</h3>
|
| 208 |
+
<p>
|
| 209 |
+
MCP enhances AI-powered development tools by providing access to code repositories, documentation, and development environments:
|
| 210 |
+
</p>
|
| 211 |
+
<ul style="margin-left: 2rem; margin-bottom: 1.5rem;">
|
| 212 |
+
<li>AI code assistants that can read and modify project files</li>
|
| 213 |
+
<li>Integration with version control systems like Git</li>
|
| 214 |
+
<li>Access to API documentation and reference materials</li>
|
| 215 |
+
</ul>
|
| 216 |
+
</div>
|
| 217 |
+
<div>
|
| 218 |
+
<h3>Data Analysis and Visualization</h3>
|
| 219 |
+
<p>
|
| 220 |
+
MCP enables AI systems to access and analyze data from various sources, enhancing their ability to provide insights and visualizations:
|
| 221 |
+
</p>
|
| 222 |
+
<ul style="margin-left: 2rem; margin-bottom: 1.5rem;">
|
| 223 |
+
<li>AI-assisted data analysis with access to databases and data files</li>
|
| 224 |
+
<li>Dynamic chart and visualization generation</li>
|
| 225 |
+
<li>Integration with data processing tools and libraries</li>
|
| 226 |
+
</ul>
|
| 227 |
+
</div>
|
| 228 |
+
</div>
|
| 229 |
+
</section>
|
| 230 |
+
|
| 231 |
+
<section>
|
| 232 |
+
<h2>Real-World Impact</h2>
|
| 233 |
+
<p>
|
| 234 |
+
Early adopters of MCP have reported significant benefits in their AI integration efforts:
|
| 235 |
+
</p>
|
| 236 |
+
<div class="card-container">
|
| 237 |
+
<div class="card">
|
| 238 |
+
<h3>Development Time Reduction</h3>
|
| 239 |
+
<p>
|
| 240 |
+
Organizations using MCP have reported up to 70% reduction in development time for AI integrations, as they no longer need to build custom connectors for each data source.
|
| 241 |
+
</p>
|
| 242 |
+
</div>
|
| 243 |
+
<div class="card">
|
| 244 |
+
<h3>Enhanced AI Capabilities</h3>
|
| 245 |
+
<p>
|
| 246 |
+
By connecting AI models to a wider range of data sources and tools, organizations have been able to expand the capabilities of their AI systems, enabling them to handle more complex tasks.
|
| 247 |
+
</p>
|
| 248 |
+
</div>
|
| 249 |
+
<div class="card">
|
| 250 |
+
<h3>Improved Security Posture</h3>
|
| 251 |
+
<p>
|
| 252 |
+
The clear system boundaries and reduced need for API key sharing in MCP have helped organizations improve their security posture when integrating AI systems with sensitive data.
|
| 253 |
+
</p>
|
| 254 |
+
</div>
|
| 255 |
+
<div class="card">
|
| 256 |
+
<h3>Increased Innovation</h3>
|
| 257 |
+
<p>
|
| 258 |
+
The standardized interface provided by MCP has enabled developers to focus more on innovative applications of AI rather than the mechanics of integration, leading to more creative solutions.
|
| 259 |
+
</p>
|
| 260 |
+
</div>
|
| 261 |
+
</div>
|
| 262 |
+
</section>
|
| 263 |
+
|
| 264 |
+
<section>
|
| 265 |
+
<h2>MCP vs. Traditional Integration Approaches</h2>
|
| 266 |
+
<table style="width: 100%; border-collapse: collapse; margin-bottom: 2rem;">
|
| 267 |
+
<thead>
|
| 268 |
+
<tr style="background-color: var(--primary-color); color: white;">
|
| 269 |
+
<th style="padding: 1rem; text-align: left; border: 1px solid #ddd;">Feature</th>
|
| 270 |
+
<th style="padding: 1rem; text-align: left; border: 1px solid #ddd;">Traditional Integration</th>
|
| 271 |
+
<th style="padding: 1rem; text-align: left; border: 1px solid #ddd;">MCP Integration</th>
|
| 272 |
+
</tr>
|
| 273 |
+
</thead>
|
| 274 |
+
<tbody>
|
| 275 |
+
<tr>
|
| 276 |
+
<td style="padding: 1rem; border: 1px solid #ddd;"><strong>Development Effort</strong></td>
|
| 277 |
+
<td style="padding: 1rem; border: 1px solid #ddd;">Custom code for each integration</td>
|
| 278 |
+
<td style="padding: 1rem; border: 1px solid #ddd;">Standardized interface, reduced custom code</td>
|
| 279 |
+
</tr>
|
| 280 |
+
<tr>
|
| 281 |
+
<td style="padding: 1rem; border: 1px solid #ddd;"><strong>Maintenance</strong></td>
|
| 282 |
+
<td style="padding: 1rem; border: 1px solid #ddd;">High - each integration needs separate updates</td>
|
| 283 |
+
<td style="padding: 1rem; border: 1px solid #ddd;">Lower - standardized interface simplifies updates</td>
|
| 284 |
+
</tr>
|
| 285 |
+
<tr>
|
| 286 |
+
<td style="padding: 1rem; border: 1px solid #ddd;"><strong>Security</strong></td>
|
| 287 |
+
<td style="padding: 1rem; border: 1px solid #ddd;">Often requires sharing API keys with AI providers</td>
|
| 288 |
+
<td style="padding: 1rem; border: 1px solid #ddd;">No need to share API keys, clear system boundaries</td>
|
| 289 |
+
</tr>
|
| 290 |
+
<tr>
|
| 291 |
+
<td style="padding: 1rem; border: 1px solid #ddd;"><strong>Scalability</strong></td>
|
| 292 |
+
<td style="padding: 1rem; border: 1px solid #ddd;">Limited - each new data source requires new integration</td>
|
| 293 |
+
<td style="padding: 1rem; border: 1px solid #ddd;">High - consistent interface for multiple data sources</td>
|
| 294 |
+
</tr>
|
| 295 |
+
<tr>
|
| 296 |
+
<td style="padding: 1rem; border: 1px solid #ddd;"><strong>Interoperability</strong></td>
|
| 297 |
+
<td style="padding: 1rem; border: 1px solid #ddd;">Limited - integrations often specific to one AI model</td>
|
| 298 |
+
<td style="padding: 1rem; border: 1px solid #ddd;">High - works across different AI models and platforms</td>
|
| 299 |
+
</tr>
|
| 300 |
+
</tbody>
|
| 301 |
+
</table>
|
| 302 |
+
</section>
|
| 303 |
+
</main>
|
| 304 |
+
|
| 305 |
+
<footer>
|
| 306 |
+
<div class="container footer-container">
|
| 307 |
+
<div>
|
| 308 |
+
<h4>MCP Resources</h4>
|
| 309 |
+
<ul>
|
| 310 |
+
<li><a href="https://modelcontextprotocol.io" target="_blank">Official Documentation</a></li>
|
| 311 |
+
<li><a href="https://github.com/modelcontextprotocol" target="_blank">GitHub Repository</a></li>
|
| 312 |
+
<li><a href="https://www.anthropic.com/news/model-context-protocol" target="_blank">Anthropic MCP Announcement</a></li>
|
| 313 |
+
</ul>
|
| 314 |
+
</div>
|
| 315 |
+
<div>
|
| 316 |
+
<h4>Learn More</h4>
|
| 317 |
+
<ul>
|
| 318 |
+
<li><a href="about.html">About MCP</a></li>
|
| 319 |
+
<li><a href="architecture.html">Architecture</a></li>
|
| 320 |
+
<li><a href="benefits.html">Benefits</a></li>
|
| 321 |
+
<li><a href="ecosystem.html">Ecosystem</a></li>
|
| 322 |
+
</ul>
|
| 323 |
+
</div>
|
| 324 |
+
<div>
|
| 325 |
+
<h4>Community</h4>
|
| 326 |
+
<ul>
|
| 327 |
+
<li><a href="https://github.com/modelcontextprotocol/discussions" target="_blank">Discussions</a></li>
|
| 328 |
+
<li><a href="https://github.com/modelcontextprotocol/community-servers" target="_blank">Community Servers</a></li>
|
| 329 |
+
</ul>
|
| 330 |
+
</div>
|
| 331 |
+
</div>
|
| 332 |
+
<div class="copyright container">
|
| 333 |
+
<p>© 2025 MCP Information Hub. Model Context Protocol is an open source project developed by Anthropic, PBC.</p>
|
| 334 |
+
</div>
|
| 335 |
+
</footer>
|
| 336 |
+
|
| 337 |
+
<script src="js/main.js"></script>
|
| 338 |
+
</body>
|
| 339 |
+
</html>
|
css/styles.css
ADDED
|
@@ -0,0 +1,265 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
/* MCP Website Stylesheet */
|
| 2 |
+
:root {
|
| 3 |
+
--primary-color: #2563eb;
|
| 4 |
+
--secondary-color: #4338ca;
|
| 5 |
+
--accent-color: #3b82f6;
|
| 6 |
+
--text-color: #1e293b;
|
| 7 |
+
--light-bg: #f8fafc;
|
| 8 |
+
--dark-bg: #0f172a;
|
| 9 |
+
--header-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
|
| 10 |
+
--body-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
|
| 11 |
+
}
|
| 12 |
+
|
| 13 |
+
* {
|
| 14 |
+
margin: 0;
|
| 15 |
+
padding: 0;
|
| 16 |
+
box-sizing: border-box;
|
| 17 |
+
}
|
| 18 |
+
|
| 19 |
+
body {
|
| 20 |
+
font-family: var(--body-font);
|
| 21 |
+
line-height: 1.6;
|
| 22 |
+
color: var(--text-color);
|
| 23 |
+
background-color: var(--light-bg);
|
| 24 |
+
}
|
| 25 |
+
|
| 26 |
+
.container {
|
| 27 |
+
width: 100%;
|
| 28 |
+
max-width: 1200px;
|
| 29 |
+
margin: 0 auto;
|
| 30 |
+
padding: 0 20px;
|
| 31 |
+
}
|
| 32 |
+
|
| 33 |
+
/* Header styles */
|
| 34 |
+
header {
|
| 35 |
+
background-color: white;
|
| 36 |
+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
| 37 |
+
position: sticky;
|
| 38 |
+
top: 0;
|
| 39 |
+
z-index: 100;
|
| 40 |
+
}
|
| 41 |
+
|
| 42 |
+
.header-container {
|
| 43 |
+
display: flex;
|
| 44 |
+
justify-content: space-between;
|
| 45 |
+
align-items: center;
|
| 46 |
+
padding: 1rem 0;
|
| 47 |
+
}
|
| 48 |
+
|
| 49 |
+
.logo {
|
| 50 |
+
font-size: 1.5rem;
|
| 51 |
+
font-weight: 700;
|
| 52 |
+
color: var(--primary-color);
|
| 53 |
+
text-decoration: none;
|
| 54 |
+
}
|
| 55 |
+
|
| 56 |
+
.logo span {
|
| 57 |
+
color: var(--accent-color);
|
| 58 |
+
}
|
| 59 |
+
|
| 60 |
+
nav ul {
|
| 61 |
+
display: flex;
|
| 62 |
+
list-style: none;
|
| 63 |
+
gap: 2rem;
|
| 64 |
+
}
|
| 65 |
+
|
| 66 |
+
nav a {
|
| 67 |
+
color: var(--text-color);
|
| 68 |
+
text-decoration: none;
|
| 69 |
+
font-weight: 500;
|
| 70 |
+
transition: color 0.3s ease;
|
| 71 |
+
}
|
| 72 |
+
|
| 73 |
+
nav a:hover {
|
| 74 |
+
color: var(--primary-color);
|
| 75 |
+
}
|
| 76 |
+
|
| 77 |
+
.nav-active {
|
| 78 |
+
color: var(--primary-color);
|
| 79 |
+
font-weight: 600;
|
| 80 |
+
}
|
| 81 |
+
|
| 82 |
+
/* Hero section */
|
| 83 |
+
.hero {
|
| 84 |
+
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
|
| 85 |
+
color: white;
|
| 86 |
+
padding: 4rem 0;
|
| 87 |
+
text-align: center;
|
| 88 |
+
}
|
| 89 |
+
|
| 90 |
+
.hero h1 {
|
| 91 |
+
font-size: 2.5rem;
|
| 92 |
+
margin-bottom: 1rem;
|
| 93 |
+
font-family: var(--header-font);
|
| 94 |
+
}
|
| 95 |
+
|
| 96 |
+
.hero p {
|
| 97 |
+
font-size: 1.2rem;
|
| 98 |
+
max-width: 800px;
|
| 99 |
+
margin: 0 auto 2rem auto;
|
| 100 |
+
}
|
| 101 |
+
|
| 102 |
+
.cta-button {
|
| 103 |
+
display: inline-block;
|
| 104 |
+
background-color: white;
|
| 105 |
+
color: var(--primary-color);
|
| 106 |
+
padding: 0.8rem 1.5rem;
|
| 107 |
+
border-radius: 4px;
|
| 108 |
+
text-decoration: none;
|
| 109 |
+
font-weight: 600;
|
| 110 |
+
transition: all 0.3s ease;
|
| 111 |
+
}
|
| 112 |
+
|
| 113 |
+
.cta-button:hover {
|
| 114 |
+
transform: translateY(-2px);
|
| 115 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
| 116 |
+
}
|
| 117 |
+
|
| 118 |
+
/* Main content */
|
| 119 |
+
main {
|
| 120 |
+
padding: 3rem 0;
|
| 121 |
+
}
|
| 122 |
+
|
| 123 |
+
section {
|
| 124 |
+
margin-bottom: 3rem;
|
| 125 |
+
}
|
| 126 |
+
|
| 127 |
+
h2 {
|
| 128 |
+
font-size: 2rem;
|
| 129 |
+
margin-bottom: 1.5rem;
|
| 130 |
+
color: var(--text-color);
|
| 131 |
+
font-family: var(--header-font);
|
| 132 |
+
}
|
| 133 |
+
|
| 134 |
+
h3 {
|
| 135 |
+
font-size: 1.5rem;
|
| 136 |
+
margin-bottom: 1rem;
|
| 137 |
+
color: var(--text-color);
|
| 138 |
+
font-family: var(--header-font);
|
| 139 |
+
}
|
| 140 |
+
|
| 141 |
+
p {
|
| 142 |
+
margin-bottom: 1.5rem;
|
| 143 |
+
}
|
| 144 |
+
|
| 145 |
+
/* Card styles */
|
| 146 |
+
.card-container {
|
| 147 |
+
display: grid;
|
| 148 |
+
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
| 149 |
+
gap: 2rem;
|
| 150 |
+
margin-top: 2rem;
|
| 151 |
+
}
|
| 152 |
+
|
| 153 |
+
.card {
|
| 154 |
+
background-color: white;
|
| 155 |
+
border-radius: 8px;
|
| 156 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
| 157 |
+
padding: 1.5rem;
|
| 158 |
+
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
| 159 |
+
}
|
| 160 |
+
|
| 161 |
+
.card:hover {
|
| 162 |
+
transform: translateY(-5px);
|
| 163 |
+
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
|
| 164 |
+
}
|
| 165 |
+
|
| 166 |
+
.card h3 {
|
| 167 |
+
font-size: 1.25rem;
|
| 168 |
+
margin-bottom: 1rem;
|
| 169 |
+
}
|
| 170 |
+
|
| 171 |
+
.card-icon {
|
| 172 |
+
font-size: 2rem;
|
| 173 |
+
color: var(--primary-color);
|
| 174 |
+
margin-bottom: 1rem;
|
| 175 |
+
}
|
| 176 |
+
|
| 177 |
+
/* Two-column layout */
|
| 178 |
+
.two-column {
|
| 179 |
+
display: grid;
|
| 180 |
+
grid-template-columns: 1fr 1fr;
|
| 181 |
+
gap: 2rem;
|
| 182 |
+
align-items: center;
|
| 183 |
+
}
|
| 184 |
+
|
| 185 |
+
/* Code blocks */
|
| 186 |
+
pre {
|
| 187 |
+
background-color: var(--dark-bg);
|
| 188 |
+
color: white;
|
| 189 |
+
padding: 1.5rem;
|
| 190 |
+
border-radius: 8px;
|
| 191 |
+
overflow-x: auto;
|
| 192 |
+
margin-bottom: 2rem;
|
| 193 |
+
}
|
| 194 |
+
|
| 195 |
+
code {
|
| 196 |
+
font-family: 'Fira Code', 'Courier New', monospace;
|
| 197 |
+
}
|
| 198 |
+
|
| 199 |
+
/* Footer */
|
| 200 |
+
footer {
|
| 201 |
+
background-color: var(--dark-bg);
|
| 202 |
+
color: white;
|
| 203 |
+
padding: 2rem 0;
|
| 204 |
+
}
|
| 205 |
+
|
| 206 |
+
.footer-container {
|
| 207 |
+
display: grid;
|
| 208 |
+
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
| 209 |
+
gap: 2rem;
|
| 210 |
+
}
|
| 211 |
+
|
| 212 |
+
footer h4 {
|
| 213 |
+
font-size: 1.2rem;
|
| 214 |
+
margin-bottom: 1rem;
|
| 215 |
+
}
|
| 216 |
+
|
| 217 |
+
footer ul {
|
| 218 |
+
list-style: none;
|
| 219 |
+
}
|
| 220 |
+
|
| 221 |
+
footer a {
|
| 222 |
+
color: #cbd5e1;
|
| 223 |
+
text-decoration: none;
|
| 224 |
+
margin-bottom: 0.5rem;
|
| 225 |
+
display: inline-block;
|
| 226 |
+
transition: color 0.3s ease;
|
| 227 |
+
}
|
| 228 |
+
|
| 229 |
+
footer a:hover {
|
| 230 |
+
color: white;
|
| 231 |
+
}
|
| 232 |
+
|
| 233 |
+
.copyright {
|
| 234 |
+
margin-top: 2rem;
|
| 235 |
+
text-align: center;
|
| 236 |
+
padding-top: 1rem;
|
| 237 |
+
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
| 238 |
+
}
|
| 239 |
+
|
| 240 |
+
/* Responsive adjustments */
|
| 241 |
+
@media screen and (max-width: 768px) {
|
| 242 |
+
nav ul {
|
| 243 |
+
gap: 1rem;
|
| 244 |
+
}
|
| 245 |
+
|
| 246 |
+
.two-column {
|
| 247 |
+
grid-template-columns: 1fr;
|
| 248 |
+
}
|
| 249 |
+
|
| 250 |
+
.hero h1 {
|
| 251 |
+
font-size: 2rem;
|
| 252 |
+
}
|
| 253 |
+
}
|
| 254 |
+
|
| 255 |
+
@media screen and (max-width: 480px) {
|
| 256 |
+
.header-container {
|
| 257 |
+
flex-direction: column;
|
| 258 |
+
gap: 1rem;
|
| 259 |
+
}
|
| 260 |
+
|
| 261 |
+
nav ul {
|
| 262 |
+
flex-wrap: wrap;
|
| 263 |
+
justify-content: center;
|
| 264 |
+
}
|
| 265 |
+
}
|
ecosystem.html
ADDED
|
@@ -0,0 +1,445 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="en">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8">
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
+
<title>MCP Ecosystem - Model Context Protocol</title>
|
| 7 |
+
<meta name="description" content="Explore the growing ecosystem of MCP implementations, tools, and community resources for the Model Context Protocol.">
|
| 8 |
+
<link rel="stylesheet" href="css/styles.css">
|
| 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>
|
| 15 |
+
<div class="container header-container">
|
| 16 |
+
<a href="index.html" class="logo">MCP<span>Hub</span></a>
|
| 17 |
+
<nav>
|
| 18 |
+
<ul>
|
| 19 |
+
<li><a href="index.html">Home</a></li>
|
| 20 |
+
<li><a href="about.html">About</a></li>
|
| 21 |
+
<li><a href="architecture.html">Architecture</a></li>
|
| 22 |
+
<li><a href="benefits.html">Benefits</a></li>
|
| 23 |
+
<li><a href="ecosystem.html">Ecosystem</a></li>
|
| 24 |
+
<li><a href="getting-started.html">Get Started</a></li>
|
| 25 |
+
<li><a href="faq.html">FAQ</a></li>
|
| 26 |
+
</ul>
|
| 27 |
+
</nav>
|
| 28 |
+
</div>
|
| 29 |
+
</header>
|
| 30 |
+
|
| 31 |
+
<section class="hero">
|
| 32 |
+
<div class="container">
|
| 33 |
+
<h1>MCP Ecosystem</h1>
|
| 34 |
+
<p>Exploring the growing community of tools, implementations, and resources</p>
|
| 35 |
+
</div>
|
| 36 |
+
</section>
|
| 37 |
+
|
| 38 |
+
<main class="container">
|
| 39 |
+
<section>
|
| 40 |
+
<h2>The Growing MCP Community</h2>
|
| 41 |
+
<p>
|
| 42 |
+
Since its introduction by Anthropic in 2024, the Model Context Protocol (MCP) has seen rapid adoption across the AI ecosystem. Organizations and individual developers are creating MCP servers, tools, and integrations that expand the capabilities of AI applications.
|
| 43 |
+
</p>
|
| 44 |
+
<p>
|
| 45 |
+
This page provides an overview of the MCP ecosystem, including official implementations, community contributions, and resources for developers looking to build with MCP.
|
| 46 |
+
</p>
|
| 47 |
+
</section>
|
| 48 |
+
|
| 49 |
+
<section>
|
| 50 |
+
<h2>Official SDKs and Libraries</h2>
|
| 51 |
+
<p>
|
| 52 |
+
Anthropic and the MCP community maintain official Software Development Kits (SDKs) for implementing MCP clients and servers in various programming languages:
|
| 53 |
+
</p>
|
| 54 |
+
<div class="card-container">
|
| 55 |
+
<div class="card">
|
| 56 |
+
<h3>TypeScript/JavaScript SDK</h3>
|
| 57 |
+
<p>
|
| 58 |
+
The TypeScript SDK provides comprehensive support for creating MCP clients and servers in JavaScript environments, including Node.js and browser applications.
|
| 59 |
+
</p>
|
| 60 |
+
<p>
|
| 61 |
+
<a href="https://github.com/modelcontextprotocol/typescript-sdk" target="_blank">GitHub Repository</a>
|
| 62 |
+
</p>
|
| 63 |
+
</div>
|
| 64 |
+
<div class="card">
|
| 65 |
+
<h3>Python SDK</h3>
|
| 66 |
+
<p>
|
| 67 |
+
The Python SDK enables developers to build MCP clients and servers with Python, making it easy to integrate with existing Python-based AI systems and data processing pipelines.
|
| 68 |
+
</p>
|
| 69 |
+
<p>
|
| 70 |
+
<a href="https://github.com/modelcontextprotocol/python-sdk" target="_blank">GitHub Repository</a>
|
| 71 |
+
</p>
|
| 72 |
+
</div>
|
| 73 |
+
<div class="card">
|
| 74 |
+
<h3>Java SDK</h3>
|
| 75 |
+
<p>
|
| 76 |
+
The Java SDK, maintained in collaboration with Spring AI, provides Java developers with the tools to build MCP clients and servers in Java-based environments.
|
| 77 |
+
</p>
|
| 78 |
+
<p>
|
| 79 |
+
<a href="https://github.com/modelcontextprotocol/java-sdk" target="_blank">GitHub Repository</a>
|
| 80 |
+
</p>
|
| 81 |
+
</div>
|
| 82 |
+
<div class="card">
|
| 83 |
+
<h3>C# SDK</h3>
|
| 84 |
+
<p>
|
| 85 |
+
The C# SDK brings MCP support to .NET environments, allowing developers to build MCP clients and servers in C# applications.
|
| 86 |
+
</p>
|
| 87 |
+
<p>
|
| 88 |
+
<a href="https://github.com/modelcontextprotocol/csharp-sdk" target="_blank">GitHub Repository</a>
|
| 89 |
+
</p>
|
| 90 |
+
</div>
|
| 91 |
+
</div>
|
| 92 |
+
</section>
|
| 93 |
+
|
| 94 |
+
<section>
|
| 95 |
+
<h2>Reference MCP Servers</h2>
|
| 96 |
+
<p>
|
| 97 |
+
Anthropic and the MCP community have developed reference implementations of MCP servers for various data sources and tools:
|
| 98 |
+
</p>
|
| 99 |
+
<div class="card-container">
|
| 100 |
+
<div class="card">
|
| 101 |
+
<h3>Filesystem Server</h3>
|
| 102 |
+
<p>
|
| 103 |
+
The Filesystem MCP server provides AI models with access to the local file system, allowing them to read, write, and manipulate files.
|
| 104 |
+
</p>
|
| 105 |
+
<p>
|
| 106 |
+
<a href="https://github.com/modelcontextprotocol/server-filesystem" target="_blank">GitHub Repository</a>
|
| 107 |
+
</p>
|
| 108 |
+
</div>
|
| 109 |
+
<div class="card">
|
| 110 |
+
<h3>Git Server</h3>
|
| 111 |
+
<p>
|
| 112 |
+
The Git MCP server enables AI models to interact with Git repositories, providing functionality for version control operations.
|
| 113 |
+
</p>
|
| 114 |
+
<p>
|
| 115 |
+
<a href="https://github.com/modelcontextprotocol/server-git" target="_blank">GitHub Repository</a>
|
| 116 |
+
</p>
|
| 117 |
+
</div>
|
| 118 |
+
<div class="card">
|
| 119 |
+
<h3>Postgres Server</h3>
|
| 120 |
+
<p>
|
| 121 |
+
The Postgres MCP server allows AI models to query and manipulate data in PostgreSQL databases, enabling data-driven AI applications.
|
| 122 |
+
</p>
|
| 123 |
+
<p>
|
| 124 |
+
<a href="https://github.com/modelcontextprotocol/server-postgres" target="_blank">GitHub Repository</a>
|
| 125 |
+
</p>
|
| 126 |
+
</div>
|
| 127 |
+
<div class="card">
|
| 128 |
+
<h3>Google Drive Server</h3>
|
| 129 |
+
<p>
|
| 130 |
+
The Google Drive MCP server provides AI models with access to files and documents stored in Google Drive, enabling collaboration and document processing.
|
| 131 |
+
</p>
|
| 132 |
+
<p>
|
| 133 |
+
<a href="https://github.com/modelcontextprotocol/server-google-drive" target="_blank">GitHub Repository</a>
|
| 134 |
+
</p>
|
| 135 |
+
</div>
|
| 136 |
+
</div>
|
| 137 |
+
<div class="card-container" style="margin-top: 2rem;">
|
| 138 |
+
<div class="card">
|
| 139 |
+
<h3>Slack Server</h3>
|
| 140 |
+
<p>
|
| 141 |
+
The Slack MCP server enables AI models to interact with Slack workspaces, accessing channels, messages, and other Slack functionality.
|
| 142 |
+
</p>
|
| 143 |
+
<p>
|
| 144 |
+
<a href="https://github.com/modelcontextprotocol/server-slack" target="_blank">GitHub Repository</a>
|
| 145 |
+
</p>
|
| 146 |
+
</div>
|
| 147 |
+
<div class="card">
|
| 148 |
+
<h3>GitHub Server</h3>
|
| 149 |
+
<p>
|
| 150 |
+
The GitHub MCP server allows AI models to interact with GitHub repositories, issues, pull requests, and other GitHub features.
|
| 151 |
+
</p>
|
| 152 |
+
<p>
|
| 153 |
+
<a href="https://github.com/modelcontextprotocol/server-github" target="_blank">GitHub Repository</a>
|
| 154 |
+
</p>
|
| 155 |
+
</div>
|
| 156 |
+
<div class="card">
|
| 157 |
+
<h3>Puppeteer Server</h3>
|
| 158 |
+
<p>
|
| 159 |
+
The Puppeteer MCP server enables AI models to control a headless Chrome browser, allowing for web scraping, testing, and automation.
|
| 160 |
+
</p>
|
| 161 |
+
<p>
|
| 162 |
+
<a href="https://github.com/modelcontextprotocol/server-puppeteer" target="_blank">GitHub Repository</a>
|
| 163 |
+
</p>
|
| 164 |
+
</div>
|
| 165 |
+
<div class="card">
|
| 166 |
+
<h3>Browser Extension Server</h3>
|
| 167 |
+
<p>
|
| 168 |
+
The Browser Extension MCP server allows AI models to interact with web browsers through browser extensions, enabling web-based AI applications.
|
| 169 |
+
</p>
|
| 170 |
+
<p>
|
| 171 |
+
<a href="https://github.com/modelcontextprotocol/server-browser-extension" target="_blank">GitHub Repository</a>
|
| 172 |
+
</p>
|
| 173 |
+
</div>
|
| 174 |
+
</div>
|
| 175 |
+
</section>
|
| 176 |
+
|
| 177 |
+
<section>
|
| 178 |
+
<h2>Community Contributions</h2>
|
| 179 |
+
<p>
|
| 180 |
+
The MCP community has created numerous additional servers, tools, and integrations that extend the capabilities of the MCP ecosystem:
|
| 181 |
+
</p>
|
| 182 |
+
<div class="card-container">
|
| 183 |
+
<div class="card">
|
| 184 |
+
<h3>MCP Agent</h3>
|
| 185 |
+
<p>
|
| 186 |
+
MCP Agent is a framework for building effective agents using Model Context Protocol and simple workflow patterns, created by LastMile AI.
|
| 187 |
+
</p>
|
| 188 |
+
<p>
|
| 189 |
+
<a href="https://github.com/lastmile-ai/mcp-agent" target="_blank">GitHub Repository</a>
|
| 190 |
+
</p>
|
| 191 |
+
</div>
|
| 192 |
+
<div class="card">
|
| 193 |
+
<h3>Docker MCP Servers</h3>
|
| 194 |
+
<p>
|
| 195 |
+
Docker has worked with Anthropic to create Docker images for MCP servers, simplifying deployment and distribution of MCP implementations.
|
| 196 |
+
</p>
|
| 197 |
+
<p>
|
| 198 |
+
<a href="https://hub.docker.com/r/mcp" target="_blank">Docker Hub</a>
|
| 199 |
+
</p>
|
| 200 |
+
</div>
|
| 201 |
+
<div class="card">
|
| 202 |
+
<h3>OpenAI Agents SDK</h3>
|
| 203 |
+
<p>
|
| 204 |
+
The OpenAI Agents SDK includes support for MCP, enabling OpenAI models to connect with MCP servers for enhanced capabilities.
|
| 205 |
+
</p>
|
| 206 |
+
<p>
|
| 207 |
+
<a href="https://github.com/openai/openai-agents-python" target="_blank">GitHub Repository</a>
|
| 208 |
+
</p>
|
| 209 |
+
</div>
|
| 210 |
+
<div class="card">
|
| 211 |
+
<h3>MCP Server Templates</h3>
|
| 212 |
+
<p>
|
| 213 |
+
Community-maintained templates for creating new MCP servers, providing starting points for developers building custom MCP implementations.
|
| 214 |
+
</p>
|
| 215 |
+
<p>
|
| 216 |
+
<a href="https://github.com/modelcontextprotocol/server-templates" target="_blank">GitHub Repository</a>
|
| 217 |
+
</p>
|
| 218 |
+
</div>
|
| 219 |
+
</div>
|
| 220 |
+
</section>
|
| 221 |
+
|
| 222 |
+
<section>
|
| 223 |
+
<h2>MCP-Compatible AI Clients</h2>
|
| 224 |
+
<p>
|
| 225 |
+
Several AI applications and platforms have integrated MCP support, allowing them to connect with MCP servers:
|
| 226 |
+
</p>
|
| 227 |
+
<div class="two-column">
|
| 228 |
+
<div>
|
| 229 |
+
<h3>Claude Desktop</h3>
|
| 230 |
+
<p>
|
| 231 |
+
Claude Desktop is Anthropic's desktop application for interacting with Claude AI models. It includes built-in support for connecting to MCP servers, allowing Claude to access local files, databases, and other resources.
|
| 232 |
+
</p>
|
| 233 |
+
<p>
|
| 234 |
+
<a href="https://www.anthropic.com/claude-desktop" target="_blank">Learn More</a>
|
| 235 |
+
</p>
|
| 236 |
+
</div>
|
| 237 |
+
<div>
|
| 238 |
+
<h3>Development Environments</h3>
|
| 239 |
+
<p>
|
| 240 |
+
Several development environments and code editors have integrated MCP support, including:
|
| 241 |
+
</p>
|
| 242 |
+
<ul style="margin-left: 2rem; margin-bottom: 1.5rem;">
|
| 243 |
+
<li>Zed - A high-performance, multiplayer code editor</li>
|
| 244 |
+
<li>Replit - An online IDE with AI coding assistance</li>
|
| 245 |
+
<li>Codeium - An AI code completion and assistant tool</li>
|
| 246 |
+
<li>Sourcegraph - A code search and intelligence platform</li>
|
| 247 |
+
</ul>
|
| 248 |
+
</div>
|
| 249 |
+
</div>
|
| 250 |
+
</section>
|
| 251 |
+
|
| 252 |
+
<section>
|
| 253 |
+
<h2>Documentation and Resources</h2>
|
| 254 |
+
<div class="card-container">
|
| 255 |
+
<div class="card">
|
| 256 |
+
<h3>Official Documentation</h3>
|
| 257 |
+
<p>
|
| 258 |
+
The official MCP documentation provides comprehensive guides, references, and tutorials for working with the Model Context Protocol.
|
| 259 |
+
</p>
|
| 260 |
+
<p>
|
| 261 |
+
<a href="https://modelcontextprotocol.io" target="_blank">Visit Documentation</a>
|
| 262 |
+
</p>
|
| 263 |
+
</div>
|
| 264 |
+
<div class="card">
|
| 265 |
+
<h3>Specification</h3>
|
| 266 |
+
<p>
|
| 267 |
+
The MCP specification defines the protocol in detail, including message formats, communication patterns, and security considerations.
|
| 268 |
+
</p>
|
| 269 |
+
<p>
|
| 270 |
+
<a href="https://modelcontextprotocol.io/specification" target="_blank">View Specification</a>
|
| 271 |
+
</p>
|
| 272 |
+
</div>
|
| 273 |
+
<div class="card">
|
| 274 |
+
<h3>Community Forums</h3>
|
| 275 |
+
<p>
|
| 276 |
+
The MCP community forums provide a place for developers to ask questions, share ideas, and collaborate on MCP projects.
|
| 277 |
+
</p>
|
| 278 |
+
<p>
|
| 279 |
+
<a href="https://github.com/modelcontextprotocol/discussions" target="_blank">Join Discussions</a>
|
| 280 |
+
</p>
|
| 281 |
+
</div>
|
| 282 |
+
<div class="card">
|
| 283 |
+
<h3>Examples and Tutorials</h3>
|
| 284 |
+
<p>
|
| 285 |
+
The MCP examples repository provides sample code and tutorials for building MCP clients and servers in various programming languages.
|
| 286 |
+
</p>
|
| 287 |
+
<p>
|
| 288 |
+
<a href="https://github.com/modelcontextprotocol/examples" target="_blank">Explore Examples</a>
|
| 289 |
+
</p>
|
| 290 |
+
</div>
|
| 291 |
+
</div>
|
| 292 |
+
</section>
|
| 293 |
+
|
| 294 |
+
<section>
|
| 295 |
+
<h2>Early Adopters and Case Studies</h2>
|
| 296 |
+
<div class="two-column">
|
| 297 |
+
<div>
|
| 298 |
+
<h3>Block (Square)</h3>
|
| 299 |
+
<p>
|
| 300 |
+
Block (formerly Square) was an early adopter of MCP, integrating it into their systems to enhance AI capabilities across their platform. They've reported significant improvements in development efficiency and AI functionality.
|
| 301 |
+
</p>
|
| 302 |
+
<p>
|
| 303 |
+
<a href="https://block.xyz/stories/ai-integration-with-mcp" target="_blank">Read Case Study</a>
|
| 304 |
+
</p>
|
| 305 |
+
</div>
|
| 306 |
+
<div>
|
| 307 |
+
<h3>Apollo GraphQL</h3>
|
| 308 |
+
<p>
|
| 309 |
+
Apollo has integrated MCP into their GraphQL platform, enabling AI systems to interact with GraphQL APIs through a standardized interface. This has enhanced the capabilities of AI-powered features in their products.
|
| 310 |
+
</p>
|
| 311 |
+
<p>
|
| 312 |
+
<a href="https://www.apollographql.com/blog/apollo-and-mcp" target="_blank">Read Case Study</a>
|
| 313 |
+
</p>
|
| 314 |
+
</div>
|
| 315 |
+
</div>
|
| 316 |
+
<div class="two-column" style="margin-top: 2rem;">
|
| 317 |
+
<div>
|
| 318 |
+
<h3>Zed Editor</h3>
|
| 319 |
+
<p>
|
| 320 |
+
Zed, a high-performance code editor, has integrated MCP to enable its AI assistants to access files, Git repositories, and other developer tools. This integration enhances the AI's ability to assist with coding tasks.
|
| 321 |
+
</p>
|
| 322 |
+
<p>
|
| 323 |
+
<a href="https://zed.dev/blog/mcp-integration" target="_blank">Read Case Study</a>
|
| 324 |
+
</p>
|
| 325 |
+
</div>
|
| 326 |
+
<div>
|
| 327 |
+
<h3>Replit</h3>
|
| 328 |
+
<p>
|
| 329 |
+
Replit, an online IDE and coding platform, has adopted MCP to enhance its AI coding assistance features, allowing its AI tools to better understand and interact with users' code.
|
| 330 |
+
</p>
|
| 331 |
+
<p>
|
| 332 |
+
<a href="https://replit.com/blog/mcp-ai-coding" target="_blank">Read Case Study</a>
|
| 333 |
+
</p>
|
| 334 |
+
</div>
|
| 335 |
+
</div>
|
| 336 |
+
</section>
|
| 337 |
+
|
| 338 |
+
<section>
|
| 339 |
+
<h2>Contributing to the MCP Ecosystem</h2>
|
| 340 |
+
<p>
|
| 341 |
+
The MCP ecosystem is open to contributions from developers and organizations. Here are some ways to get involved:
|
| 342 |
+
</p>
|
| 343 |
+
<div class="card-container">
|
| 344 |
+
<div class="card">
|
| 345 |
+
<h3>Develop MCP Servers</h3>
|
| 346 |
+
<p>
|
| 347 |
+
Create new MCP servers for data sources or tools that aren't yet supported. The MCP community welcomes servers for databases, APIs, file formats, and more.
|
| 348 |
+
</p>
|
| 349 |
+
<p>
|
| 350 |
+
<a href="https://github.com/modelcontextprotocol/community-servers" target="_blank">Community Servers</a>
|
| 351 |
+
</p>
|
| 352 |
+
</div>
|
| 353 |
+
<div class="card">
|
| 354 |
+
<h3>Improve SDKs</h3>
|
| 355 |
+
<p>
|
| 356 |
+
Contribute to the official MCP SDKs by adding features, fixing bugs, or improving documentation. The SDKs are open source and welcome contributions.
|
| 357 |
+
</p>
|
| 358 |
+
<p>
|
| 359 |
+
<a href="https://github.com/modelcontextprotocol" target="_blank">MCP GitHub Organization</a>
|
| 360 |
+
</p>
|
| 361 |
+
</div>
|
| 362 |
+
<div class="card">
|
| 363 |
+
<h3>Share Examples</h3>
|
| 364 |
+
<p>
|
| 365 |
+
Create and share examples of MCP usage to help others learn and understand the protocol. Examples can include tutorials, sample code, or case studies.
|
| 366 |
+
</p>
|
| 367 |
+
<p>
|
| 368 |
+
<a href="https://github.com/modelcontextprotocol/examples" target="_blank">Examples Repository</a>
|
| 369 |
+
</p>
|
| 370 |
+
</div>
|
| 371 |
+
<div class="card">
|
| 372 |
+
<h3>Join Discussions</h3>
|
| 373 |
+
<p>
|
| 374 |
+
Participate in community discussions to share ideas, ask questions, and collaborate with other MCP developers. The MCP community is active and welcoming.
|
| 375 |
+
</p>
|
| 376 |
+
<p>
|
| 377 |
+
<a href="https://github.com/modelcontextprotocol/discussions" target="_blank">Join Discussions</a>
|
| 378 |
+
</p>
|
| 379 |
+
</div>
|
| 380 |
+
</div>
|
| 381 |
+
</section>
|
| 382 |
+
|
| 383 |
+
<section>
|
| 384 |
+
<h2>Future Directions</h2>
|
| 385 |
+
<p>
|
| 386 |
+
The MCP ecosystem continues to evolve, with several exciting developments on the horizon:
|
| 387 |
+
</p>
|
| 388 |
+
<ul style="margin-left: 2rem; margin-bottom: 1.5rem;">
|
| 389 |
+
<li>
|
| 390 |
+
<strong>Remote MCP Servers:</strong> Support for remote MCP servers with enterprise-grade authentication, enabling broader deployment options.
|
| 391 |
+
</li>
|
| 392 |
+
<li>
|
| 393 |
+
<strong>Enhanced Security Features:</strong> Additional security features to protect sensitive data and ensure secure communication between clients and servers.
|
| 394 |
+
</li>
|
| 395 |
+
<li>
|
| 396 |
+
<strong>Broader Language Support:</strong> SDKs for additional programming languages to make MCP accessible to more developers.
|
| 397 |
+
</li>
|
| 398 |
+
<li>
|
| 399 |
+
<strong>Integration with AI Platforms:</strong> Deeper integration with AI platforms and frameworks to streamline the use of MCP in AI applications.
|
| 400 |
+
</li>
|
| 401 |
+
<li>
|
| 402 |
+
<strong>Community-Driven Standards:</strong> Evolution of the MCP specification based on community feedback and real-world usage.
|
| 403 |
+
</li>
|
| 404 |
+
</ul>
|
| 405 |
+
<p>
|
| 406 |
+
The growth and development of the MCP ecosystem will be driven by community contributions and the needs of AI developers and users.
|
| 407 |
+
</p>
|
| 408 |
+
</section>
|
| 409 |
+
</main>
|
| 410 |
+
|
| 411 |
+
<footer>
|
| 412 |
+
<div class="container footer-container">
|
| 413 |
+
<div>
|
| 414 |
+
<h4>MCP Resources</h4>
|
| 415 |
+
<ul>
|
| 416 |
+
<li><a href="https://modelcontextprotocol.io" target="_blank">Official Documentation</a></li>
|
| 417 |
+
<li><a href="https://github.com/modelcontextprotocol" target="_blank">GitHub Repository</a></li>
|
| 418 |
+
<li><a href="https://www.anthropic.com/news/model-context-protocol" target="_blank">Anthropic MCP Announcement</a></li>
|
| 419 |
+
</ul>
|
| 420 |
+
</div>
|
| 421 |
+
<div>
|
| 422 |
+
<h4>Learn More</h4>
|
| 423 |
+
<ul>
|
| 424 |
+
<li><a href="about.html">About MCP</a></li>
|
| 425 |
+
<li><a href="architecture.html">Architecture</a></li>
|
| 426 |
+
<li><a href="benefits.html">Benefits</a></li>
|
| 427 |
+
<li><a href="ecosystem.html">Ecosystem</a></li>
|
| 428 |
+
</ul>
|
| 429 |
+
</div>
|
| 430 |
+
<div>
|
| 431 |
+
<h4>Community</h4>
|
| 432 |
+
<ul>
|
| 433 |
+
<li><a href="https://github.com/modelcontextprotocol/discussions" target="_blank">Discussions</a></li>
|
| 434 |
+
<li><a href="https://github.com/modelcontextprotocol/community-servers" target="_blank">Community Servers</a></li>
|
| 435 |
+
</ul>
|
| 436 |
+
</div>
|
| 437 |
+
</div>
|
| 438 |
+
<div class="copyright container">
|
| 439 |
+
<p>© 2025 MCP Information Hub. Model Context Protocol is an open source project developed by Anthropic, PBC.</p>
|
| 440 |
+
</div>
|
| 441 |
+
</footer>
|
| 442 |
+
|
| 443 |
+
<script src="js/main.js"></script>
|
| 444 |
+
</body>
|
| 445 |
+
</html>
|
faq.html
ADDED
|
@@ -0,0 +1,696 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="en">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8">
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
+
<title>MCP FAQ - Model Context Protocol</title>
|
| 7 |
+
<meta name="description" content="Frequently asked questions about the Model Context Protocol (MCP) for AI integration.">
|
| 8 |
+
<link rel="stylesheet" href="css/styles.css">
|
| 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 |
+
.faq-item {
|
| 14 |
+
margin-bottom: 2rem;
|
| 15 |
+
background-color: white;
|
| 16 |
+
border-radius: 8px;
|
| 17 |
+
padding: 1.5rem;
|
| 18 |
+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
| 19 |
+
}
|
| 20 |
+
|
| 21 |
+
.faq-question {
|
| 22 |
+
font-weight: 600;
|
| 23 |
+
font-size: 1.25rem;
|
| 24 |
+
margin-bottom: 0.75rem;
|
| 25 |
+
color: var(--primary-color);
|
| 26 |
+
}
|
| 27 |
+
|
| 28 |
+
.faq-answer {
|
| 29 |
+
line-height: 1.6;
|
| 30 |
+
}
|
| 31 |
+
|
| 32 |
+
.faq-category {
|
| 33 |
+
margin-bottom: 3rem;
|
| 34 |
+
}
|
| 35 |
+
</style>
|
| 36 |
+
</head>
|
| 37 |
+
<body>
|
| 38 |
+
<header>
|
| 39 |
+
<div class="container header-container">
|
| 40 |
+
<a href="index.html" class="logo">MCP<span>Hub</span></a>
|
| 41 |
+
<nav>
|
| 42 |
+
<ul>
|
| 43 |
+
<li><a href="index.html">Home</a></li>
|
| 44 |
+
<li><a href="about.html">About</a></li>
|
| 45 |
+
<li><a href="architecture.html">Architecture</a></li>
|
| 46 |
+
<li><a href="benefits.html">Benefits</a></li>
|
| 47 |
+
<li><a href="ecosystem.html">Ecosystem</a></li>
|
| 48 |
+
<li><a href="getting-started.html">Get Started</a></li>
|
| 49 |
+
<li><a href="faq.html">FAQ</a></li>
|
| 50 |
+
</ul>
|
| 51 |
+
</nav>
|
| 52 |
+
</div>
|
| 53 |
+
</header>
|
| 54 |
+
|
| 55 |
+
<section class="hero">
|
| 56 |
+
<div class="container">
|
| 57 |
+
<h1>Frequently Asked Questions</h1>
|
| 58 |
+
<p>Common questions and answers about the Model Context Protocol</p>
|
| 59 |
+
</div>
|
| 60 |
+
</section>
|
| 61 |
+
|
| 62 |
+
<main class="container">
|
| 63 |
+
<section>
|
| 64 |
+
<h2>Quick Navigation</h2>
|
| 65 |
+
<ul style="margin-left: 2rem; margin-bottom: 2rem;">
|
| 66 |
+
<li><a href="#general">General Questions</a></li>
|
| 67 |
+
<li><a href="#technical">Technical Questions</a></li>
|
| 68 |
+
<li><a href="#implementation">Implementation Questions</a></li>
|
| 69 |
+
<li><a href="#security">Security and Privacy</a></li>
|
| 70 |
+
<li><a href="#ecosystem">Ecosystem and Community</a></li>
|
| 71 |
+
</ul>
|
| 72 |
+
</section>
|
| 73 |
+
|
| 74 |
+
<section id="general" class="faq-category">
|
| 75 |
+
<h2>General Questions</h2>
|
| 76 |
+
|
| 77 |
+
<div class="faq-item">
|
| 78 |
+
<div class="faq-question">What is the Model Context Protocol (MCP)?</div>
|
| 79 |
+
<div class="faq-answer">
|
| 80 |
+
<p>
|
| 81 |
+
The Model Context Protocol (MCP) is an open protocol that standardizes how AI models connect to external data sources and tools. It provides a consistent interface for AI applications to access, retrieve, and interact with information from various systems, eliminating the need for custom integrations for each data source or tool.
|
| 82 |
+
</p>
|
| 83 |
+
</div>
|
| 84 |
+
</div>
|
| 85 |
+
|
| 86 |
+
<div class="faq-item">
|
| 87 |
+
<div class="faq-question">Who created MCP?</div>
|
| 88 |
+
<div class="faq-answer">
|
| 89 |
+
<p>
|
| 90 |
+
MCP was developed and open-sourced by Anthropic in 2024. While Anthropic created the initial protocol, MCP is designed as an open standard, and its evolution is influenced by contributions from the broader developer community.
|
| 91 |
+
</p>
|
| 92 |
+
</div>
|
| 93 |
+
</div>
|
| 94 |
+
|
| 95 |
+
<div class="faq-item">
|
| 96 |
+
<div class="faq-question">What problem does MCP solve?</div>
|
| 97 |
+
<div class="faq-answer">
|
| 98 |
+
<p>
|
| 99 |
+
MCP addresses the challenge of connecting AI models to external data sources and tools. Before MCP, developers needed to create custom integrations for each data source, leading to fragmented implementations and maintenance challenges. MCP provides a standardized way for AI models to access information and functionality from various systems, simplifying development and improving interoperability.
|
| 100 |
+
</p>
|
| 101 |
+
</div>
|
| 102 |
+
</div>
|
| 103 |
+
|
| 104 |
+
<div class="faq-item">
|
| 105 |
+
<div class="faq-question">Is MCP only for Claude, or can other AI models use it?</div>
|
| 106 |
+
<div class="faq-answer">
|
| 107 |
+
<p>
|
| 108 |
+
MCP is designed as an open, model-agnostic protocol that can be used with any AI model, not just Claude. While Anthropic's Claude was the first major AI assistant to support MCP, the protocol is designed to be used with any AI system, including models from other providers and open-source models. The OpenAI Agents SDK, for example, has implemented MCP support.
|
| 109 |
+
</p>
|
| 110 |
+
</div>
|
| 111 |
+
</div>
|
| 112 |
+
|
| 113 |
+
<div class="faq-item">
|
| 114 |
+
<div class="faq-question">How is MCP different from other AI integration approaches?</div>
|
| 115 |
+
<div class="faq-answer">
|
| 116 |
+
<p>
|
| 117 |
+
MCP differs from other AI integration approaches in several key ways:
|
| 118 |
+
</p>
|
| 119 |
+
<ul style="margin-left: 2rem; margin-top: 0.5rem;">
|
| 120 |
+
<li>
|
| 121 |
+
<strong>Standardization:</strong> MCP provides a consistent interface across different data sources and tools, unlike custom API integrations that require specific code for each integration.
|
| 122 |
+
</li>
|
| 123 |
+
<li>
|
| 124 |
+
<strong>Security:</strong> MCP allows data sources to maintain control over their information and doesn't require sharing API keys with AI providers.
|
| 125 |
+
</li>
|
| 126 |
+
<li>
|
| 127 |
+
<strong>Platform Independence:</strong> Unlike plugin systems that are tied to specific platforms, MCP is platform-agnostic and can work with any AI model or application.
|
| 128 |
+
</li>
|
| 129 |
+
<li>
|
| 130 |
+
<strong>Comprehensive Solution:</strong> MCP provides both context provision and tool invocation capabilities in a unified protocol, whereas other approaches might focus on just one aspect.
|
| 131 |
+
</li>
|
| 132 |
+
</ul>
|
| 133 |
+
</div>
|
| 134 |
+
</div>
|
| 135 |
+
|
| 136 |
+
<div class="faq-item">
|
| 137 |
+
<div class="faq-question">Is MCP free to use?</div>
|
| 138 |
+
<div class="faq-answer">
|
| 139 |
+
<p>
|
| 140 |
+
Yes, MCP is an open protocol that is free to use. The specification, reference implementations, and SDKs are open source and available under permissive licenses that allow for commercial use.
|
| 141 |
+
</p>
|
| 142 |
+
</div>
|
| 143 |
+
</div>
|
| 144 |
+
</section>
|
| 145 |
+
|
| 146 |
+
<section id="technical" class="faq-category">
|
| 147 |
+
<h2>Technical Questions</h2>
|
| 148 |
+
|
| 149 |
+
<div class="faq-item">
|
| 150 |
+
<div class="faq-question">How does MCP work at a high level?</div>
|
| 151 |
+
<div class="faq-answer">
|
| 152 |
+
<p>
|
| 153 |
+
MCP follows a client-server architecture:
|
| 154 |
+
</p>
|
| 155 |
+
<ul style="margin-left: 2rem; margin-top: 0.5rem;">
|
| 156 |
+
<li>
|
| 157 |
+
<strong>MCP Clients:</strong> Applications that use AI models and need to access external data or functionality (like Claude Desktop or custom AI applications).
|
| 158 |
+
</li>
|
| 159 |
+
<li>
|
| 160 |
+
<strong>MCP Servers:</strong> Components that expose data sources, tools, and functionality to MCP clients (like file system servers, database connectors, or API integrations).
|
| 161 |
+
</li>
|
| 162 |
+
</ul>
|
| 163 |
+
<p style="margin-top: 0.5rem;">
|
| 164 |
+
Clients connect to servers, discover available tools through the <code>listTools</code> method, and invoke tools using the <code>callTool</code> method with appropriate parameters. Servers process these requests and return results to the clients, which can then incorporate the information into the AI model's context.
|
| 165 |
+
</p>
|
| 166 |
+
</div>
|
| 167 |
+
</div>
|
| 168 |
+
|
| 169 |
+
<div class="faq-item">
|
| 170 |
+
<div class="faq-question">What transport mechanisms does MCP support?</div>
|
| 171 |
+
<div class="faq-answer">
|
| 172 |
+
<p>
|
| 173 |
+
MCP currently supports two main transport mechanisms:
|
| 174 |
+
</p>
|
| 175 |
+
<ul style="margin-left: 2rem; margin-top: 0.5rem;">
|
| 176 |
+
<li>
|
| 177 |
+
<strong>stdio (Standard Input/Output):</strong> Used for local communication between clients and servers running on the same machine. The server runs as a subprocess of the client application.
|
| 178 |
+
</li>
|
| 179 |
+
<li>
|
| 180 |
+
<strong>HTTP over SSE (Server-Sent Events):</strong> Used for remote communication between clients and servers running on different machines or in cloud environments. This enables distributed architectures where servers can run separately from clients.
|
| 181 |
+
</li>
|
| 182 |
+
</ul>
|
| 183 |
+
</div>
|
| 184 |
+
</div>
|
| 185 |
+
|
| 186 |
+
<div class="faq-item">
|
| 187 |
+
<div class="faq-question">What programming languages are supported by MCP?</div>
|
| 188 |
+
<div class="faq-answer">
|
| 189 |
+
<p>
|
| 190 |
+
MCP provides official SDKs for several programming languages:
|
| 191 |
+
</p>
|
| 192 |
+
<ul style="margin-left: 2rem; margin-top: 0.5rem;">
|
| 193 |
+
<li>TypeScript/JavaScript (for Node.js and browser applications)</li>
|
| 194 |
+
<li>Python</li>
|
| 195 |
+
<li>Java (in collaboration with Spring AI)</li>
|
| 196 |
+
<li>C# (.NET)</li>
|
| 197 |
+
</ul>
|
| 198 |
+
<p style="margin-top: 0.5rem;">
|
| 199 |
+
The community is working on implementations for additional languages. Since MCP is an open protocol, developers can also create implementations for other languages as needed.
|
| 200 |
+
</p>
|
| 201 |
+
</div>
|
| 202 |
+
</div>
|
| 203 |
+
|
| 204 |
+
<div class="faq-item">
|
| 205 |
+
<div class="faq-question">What is an MCP tool?</div>
|
| 206 |
+
<div class="faq-answer">
|
| 207 |
+
<p>
|
| 208 |
+
An MCP tool is a functional unit exposed by an MCP server that provides specific capabilities to MCP clients. Each tool has:
|
| 209 |
+
</p>
|
| 210 |
+
<ul style="margin-left: 2rem; margin-top: 0.5rem;">
|
| 211 |
+
<li><strong>Name:</strong> A unique identifier for the tool.</li>
|
| 212 |
+
<li><strong>Description:</strong> A human-readable explanation of what the tool does.</li>
|
| 213 |
+
<li><strong>Parameters:</strong> A schema defining the inputs the tool expects, usually in JSON Schema format.</li>
|
| 214 |
+
<li><strong>Return Value:</strong> The type and structure of data the tool returns.</li>
|
| 215 |
+
<li><strong>Handler:</strong> The function that implements the tool's functionality.</li>
|
| 216 |
+
</ul>
|
| 217 |
+
<p style="margin-top: 0.5rem;">
|
| 218 |
+
Examples of tools include "readFile" for accessing file contents, "executeQuery" for running database queries, or "getWeather" for retrieving weather information.
|
| 219 |
+
</p>
|
| 220 |
+
</div>
|
| 221 |
+
</div>
|
| 222 |
+
|
| 223 |
+
<div class="faq-item">
|
| 224 |
+
<div class="faq-question">Can MCP connect to remote services and APIs?</div>
|
| 225 |
+
<div class="faq-answer">
|
| 226 |
+
<p>
|
| 227 |
+
Yes, MCP can connect to remote services and APIs through MCP servers that implement the necessary integrations. For example, an MCP server could connect to a weather API, a database service, or a content management system. The server handles the communication with the remote service and exposes the functionality to MCP clients through a standardized interface.
|
| 228 |
+
</p>
|
| 229 |
+
</div>
|
| 230 |
+
</div>
|
| 231 |
+
|
| 232 |
+
<div class="faq-item">
|
| 233 |
+
<div class="faq-question">What types of data can MCP servers provide?</div>
|
| 234 |
+
<div class="faq-answer">
|
| 235 |
+
<p>
|
| 236 |
+
MCP servers can provide various types of data, including:
|
| 237 |
+
</p>
|
| 238 |
+
<ul style="margin-left: 2rem; margin-top: 0.5rem;">
|
| 239 |
+
<li>Text content (documents, emails, messages)</li>
|
| 240 |
+
<li>Structured data (database records, JSON objects)</li>
|
| 241 |
+
<li>Binary data (images, audio, video)</li>
|
| 242 |
+
<li>Metadata (file information, user details)</li>
|
| 243 |
+
<li>System information (operating system details, environment variables)</li>
|
| 244 |
+
</ul>
|
| 245 |
+
<p style="margin-top: 0.5rem;">
|
| 246 |
+
The protocol is flexible and can handle different data formats, allowing AI models to work with diverse information types.
|
| 247 |
+
</p>
|
| 248 |
+
</div>
|
| 249 |
+
</div>
|
| 250 |
+
</section>
|
| 251 |
+
|
| 252 |
+
<section id="implementation" class="faq-category">
|
| 253 |
+
<h2>Implementation Questions</h2>
|
| 254 |
+
|
| 255 |
+
<div class="faq-item">
|
| 256 |
+
<div class="faq-question">How do I get started with MCP?</div>
|
| 257 |
+
<div class="faq-answer">
|
| 258 |
+
<p>
|
| 259 |
+
To get started with MCP, follow these steps:
|
| 260 |
+
</p>
|
| 261 |
+
<ol style="margin-left: 2rem; margin-top: 0.5rem;">
|
| 262 |
+
<li>Install the appropriate MCP SDK for your programming language.</li>
|
| 263 |
+
<li>For client development, learn how to connect to existing MCP servers and use their tools.</li>
|
| 264 |
+
<li>For server development, understand how to define tools and implement their functionality.</li>
|
| 265 |
+
<li>Explore the official documentation and examples to understand MCP concepts and best practices.</li>
|
| 266 |
+
</ol>
|
| 267 |
+
<p style="margin-top: 0.5rem;">
|
| 268 |
+
Our <a href="getting-started.html">Getting Started guide</a> provides detailed instructions and code examples to help you begin working with MCP.
|
| 269 |
+
</p>
|
| 270 |
+
</div>
|
| 271 |
+
</div>
|
| 272 |
+
|
| 273 |
+
<div class="faq-item">
|
| 274 |
+
<div class="faq-question">Can I use existing MCP servers instead of building my own?</div>
|
| 275 |
+
<div class="faq-answer">
|
| 276 |
+
<p>
|
| 277 |
+
Yes, you can use existing MCP servers instead of building your own. The MCP ecosystem includes reference implementations of servers for common use cases like file system access, Git repositories, databases, and more. These servers can be easily integrated into your applications without having to implement the functionality yourself.
|
| 278 |
+
</p>
|
| 279 |
+
<p>
|
| 280 |
+
Check the <a href="ecosystem.html">Ecosystem page</a> for a list of available MCP servers that you can use in your projects.
|
| 281 |
+
</p>
|
| 282 |
+
</div>
|
| 283 |
+
</div>
|
| 284 |
+
|
| 285 |
+
<div class="faq-item">
|
| 286 |
+
<div class="faq-question">How do I create a custom MCP server?</div>
|
| 287 |
+
<div class="faq-answer">
|
| 288 |
+
<p>
|
| 289 |
+
To create a custom MCP server, follow these general steps:
|
| 290 |
+
</p>
|
| 291 |
+
<ol style="margin-left: 2rem; margin-top: 0.5rem;">
|
| 292 |
+
<li>Install the MCP server SDK for your preferred programming language.</li>
|
| 293 |
+
<li>Define the tools your server will provide, including their names, descriptions, parameter schemas, and return types.</li>
|
| 294 |
+
<li>Implement the handler functions for each tool, which will execute when the tools are called.</li>
|
| 295 |
+
<li>Configure the server with metadata like name, description, and version.</li>
|
| 296 |
+
<li>Start the server and handle requests from MCP clients.</li>
|
| 297 |
+
</ol>
|
| 298 |
+
<p style="margin-top: 0.5rem;">
|
| 299 |
+
The <a href="getting-started.html">Getting Started guide</a> includes code examples for creating custom MCP servers in different programming languages.
|
| 300 |
+
</p>
|
| 301 |
+
</div>
|
| 302 |
+
</div>
|
| 303 |
+
|
| 304 |
+
<div class="faq-item">
|
| 305 |
+
<div class="faq-question">How can I use MCP with Claude?</div>
|
| 306 |
+
<div class="faq-answer">
|
| 307 |
+
<p>
|
| 308 |
+
You can use MCP with Claude through various interfaces:
|
| 309 |
+
</p>
|
| 310 |
+
<ul style="margin-left: 2rem; margin-top: 0.5rem;">
|
| 311 |
+
<li>
|
| 312 |
+
<strong>Claude Desktop:</strong> Claude Desktop provides a user-friendly interface for connecting Claude to MCP servers. You can connect to MCP servers through the application's UI and then interact with Claude naturally.
|
| 313 |
+
</li>
|
| 314 |
+
<li>
|
| 315 |
+
<strong>Claude API:</strong> For programmatic access, you can use the Claude API with MCP. You'll need to set up an MCP client, connect to the desired servers, and then pass the available tools to Claude through the API.
|
| 316 |
+
</li>
|
| 317 |
+
<li>
|
| 318 |
+
<strong>Claude for Work:</strong> Enterprise customers using Claude for Work can connect to MCP servers and use them across their organization.
|
| 319 |
+
</li>
|
| 320 |
+
</ul>
|
| 321 |
+
<p style="margin-top: 0.5rem;">
|
| 322 |
+
The <a href="getting-started.html">Getting Started guide</a> includes specific instructions for using MCP with Claude.
|
| 323 |
+
</p>
|
| 324 |
+
</div>
|
| 325 |
+
</div>
|
| 326 |
+
|
| 327 |
+
<div class="faq-item">
|
| 328 |
+
<div class="faq-question">Do I need to modify my AI model to use MCP?</div>
|
| 329 |
+
<div class="faq-answer">
|
| 330 |
+
<p>
|
| 331 |
+
No, you don't need to modify the AI model itself to use MCP. The MCP client handles the communication with MCP servers and provides the retrieved information to the AI model through its standard interfaces (like API calls or application integrations).
|
| 332 |
+
</p>
|
| 333 |
+
<p>
|
| 334 |
+
For hosted models like Claude, the model provider (e.g., Anthropic) has already implemented the necessary integrations to work with MCP. For open-source models, you would typically use an AI framework or library that supports tool usage and provide the MCP tools through that interface.
|
| 335 |
+
</p>
|
| 336 |
+
</div>
|
| 337 |
+
</div>
|
| 338 |
+
|
| 339 |
+
<div class="faq-item">
|
| 340 |
+
<div class="faq-question">What are some common challenges when implementing MCP?</div>
|
| 341 |
+
<div class="faq-answer">
|
| 342 |
+
<p>
|
| 343 |
+
Common challenges when implementing MCP include:
|
| 344 |
+
</p>
|
| 345 |
+
<ul style="margin-left: 2rem; margin-top: 0.5rem;">
|
| 346 |
+
<li>
|
| 347 |
+
<strong>Tool Design:</strong> Creating tools with clear descriptions and well-structured parameter schemas that AI models can understand and use effectively.
|
| 348 |
+
</li>
|
| 349 |
+
<li>
|
| 350 |
+
<strong>Error Handling:</strong> Implementing robust error handling to provide informative error messages when tools fail.
|
| 351 |
+
</li>
|
| 352 |
+
<li>
|
| 353 |
+
<strong>Security Considerations:</strong> Ensuring that MCP servers only expose the intended functionality and don't allow unauthorized access to sensitive data.
|
| 354 |
+
</li>
|
| 355 |
+
<li>
|
| 356 |
+
<strong>Performance Optimization:</strong> Optimizing data transfer and caching strategies to minimize latency in MCP interactions.
|
| 357 |
+
</li>
|
| 358 |
+
<li>
|
| 359 |
+
<strong>Cross-Language Compatibility:</strong> Ensuring compatibility when working with MCP implementations in different programming languages.
|
| 360 |
+
</li>
|
| 361 |
+
</ul>
|
| 362 |
+
<p style="margin-top: 0.5rem;">
|
| 363 |
+
The <a href="getting-started.html">Getting Started guide</a> includes best practices for addressing these challenges.
|
| 364 |
+
</p>
|
| 365 |
+
</div>
|
| 366 |
+
</div>
|
| 367 |
+
</section>
|
| 368 |
+
|
| 369 |
+
<section id="security" class="faq-category">
|
| 370 |
+
<h2>Security and Privacy</h2>
|
| 371 |
+
|
| 372 |
+
<div class="faq-item">
|
| 373 |
+
<div class="faq-question">Is MCP secure?</div>
|
| 374 |
+
<div class="faq-answer">
|
| 375 |
+
<p>
|
| 376 |
+
MCP was designed with security as a fundamental consideration. Key security features include:
|
| 377 |
+
</p>
|
| 378 |
+
<ul style="margin-left: 2rem; margin-top: 0.5rem;">
|
| 379 |
+
<li>
|
| 380 |
+
<strong>Server-Controlled Access:</strong> MCP servers maintain control over their resources, determining what data is accessible to clients.
|
| 381 |
+
</li>
|
| 382 |
+
<li>
|
| 383 |
+
<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.
|
| 384 |
+
</li>
|
| 385 |
+
<li>
|
| 386 |
+
<strong>Clear System Boundaries:</strong> The client-server architecture establishes clear boundaries between systems, limiting exposure of sensitive information.
|
| 387 |
+
</li>
|
| 388 |
+
<li>
|
| 389 |
+
<strong>Local Processing:</strong> For sensitive operations, MCP can use local stdio servers to ensure data doesn't leave the user's machine.
|
| 390 |
+
</li>
|
| 391 |
+
</ul>
|
| 392 |
+
<p style="margin-top: 0.5rem;">
|
| 393 |
+
While MCP provides these security features, the overall security of an MCP implementation depends on how it's configured and deployed. Developers should follow security best practices when implementing MCP servers and clients.
|
| 394 |
+
</p>
|
| 395 |
+
</div>
|
| 396 |
+
</div>
|
| 397 |
+
|
| 398 |
+
<div class="faq-item">
|
| 399 |
+
<div class="faq-question">Does using MCP expose my data to third parties?</div>
|
| 400 |
+
<div class="faq-answer">
|
| 401 |
+
<p>
|
| 402 |
+
MCP itself doesn't inherently expose your data to third parties. The protocol is designed to keep data within your control:
|
| 403 |
+
</p>
|
| 404 |
+
<ul style="margin-left: 2rem; margin-top: 0.5rem;">
|
| 405 |
+
<li>
|
| 406 |
+
<strong>Local Processing:</strong> When using stdio servers, data is processed locally on your machine and doesn't leave your environment.
|
| 407 |
+
</li>
|
| 408 |
+
<li>
|
| 409 |
+
<strong>Server Control:</strong> MCP servers control what data is accessible and can implement access controls to restrict what information is shared.
|
| 410 |
+
</li>
|
| 411 |
+
<li>
|
| 412 |
+
<strong>No API Key Sharing:</strong> MCP doesn't require sharing API keys with AI providers, keeping authentication credentials within your infrastructure.
|
| 413 |
+
</li>
|
| 414 |
+
</ul>
|
| 415 |
+
<p style="margin-top: 0.5rem;">
|
| 416 |
+
However, when using MCP with AI models, the data that's provided to the model may be processed according to the AI provider's privacy policy. It's important to understand the data handling practices of the AI services you're using with MCP.
|
| 417 |
+
</p>
|
| 418 |
+
</div>
|
| 419 |
+
</div>
|
| 420 |
+
|
| 421 |
+
<div class="faq-item">
|
| 422 |
+
<div class="faq-question">Can I restrict what data my MCP server exposes?</div>
|
| 423 |
+
<div class="faq-answer">
|
| 424 |
+
<p>
|
| 425 |
+
Yes, you can restrict what data your MCP server exposes. As the developer of an MCP server, you have full control over what tools and data are available to clients. You can implement access controls, permissions, and validation to ensure that only authorized clients can access specific data or functionality.
|
| 426 |
+
</p>
|
| 427 |
+
<p>
|
| 428 |
+
For example, you could:
|
| 429 |
+
</p>
|
| 430 |
+
<ul style="margin-left: 2rem; margin-top: 0.5rem;">
|
| 431 |
+
<li>Limit file access to specific directories</li>
|
| 432 |
+
<li>Restrict database queries to read-only operations or specific tables</li>
|
| 433 |
+
<li>Implement user authentication and authorization for sensitive operations</li>
|
| 434 |
+
<li>Validate and sanitize inputs to prevent security vulnerabilities</li>
|
| 435 |
+
</ul>
|
| 436 |
+
</div>
|
| 437 |
+
</div>
|
| 438 |
+
|
| 439 |
+
<div class="faq-item">
|
| 440 |
+
<div class="faq-question">How does MCP handle sensitive information like API keys?</div>
|
| 441 |
+
<div class="faq-answer">
|
| 442 |
+
<p>
|
| 443 |
+
MCP is designed to keep sensitive information like API keys within your infrastructure, rather than sharing them with AI providers or third parties. When an MCP server needs to authenticate with an external service, it handles that authentication internally using credentials that you provide when setting up the server.
|
| 444 |
+
</p>
|
| 445 |
+
<p>
|
| 446 |
+
For example, if you're creating an MCP server that connects to a database, you would configure the server with the database credentials, but those credentials wouldn't be exposed to the MCP client or the AI model. The server would handle authentication with the database and only expose the authorized functionality through the MCP interface.
|
| 447 |
+
</p>
|
| 448 |
+
</div>
|
| 449 |
+
</div>
|
| 450 |
+
|
| 451 |
+
<div class="faq-item">
|
| 452 |
+
<div class="faq-question">Are there best practices for securing MCP implementations?</div>
|
| 453 |
+
<div class="faq-answer">
|
| 454 |
+
<p>
|
| 455 |
+
Yes, here are some best practices for securing MCP implementations:
|
| 456 |
+
</p>
|
| 457 |
+
<ul style="margin-left: 2rem; margin-top: 0.5rem;">
|
| 458 |
+
<li>
|
| 459 |
+
<strong>Principle of Least Privilege:</strong> Design MCP servers to expose only the minimum functionality and data access required for the application.
|
| 460 |
+
</li>
|
| 461 |
+
<li>
|
| 462 |
+
<strong>Input Validation:</strong> Implement thorough validation of tool parameters to prevent injection attacks and other security vulnerabilities.
|
| 463 |
+
</li>
|
| 464 |
+
<li>
|
| 465 |
+
<strong>Access Controls:</strong> Implement authentication and authorization mechanisms for MCP servers, especially when using HTTP/SSE transport.
|
| 466 |
+
</li>
|
| 467 |
+
<li>
|
| 468 |
+
<strong>Secure Credential Storage:</strong> Store API keys, passwords, and other sensitive information securely using appropriate encryption and secret management.
|
| 469 |
+
</li>
|
| 470 |
+
<li>
|
| 471 |
+
<strong>Regular Security Audits:</strong> Regularly review your MCP implementations for potential security issues and update them as needed.
|
| 472 |
+
</li>
|
| 473 |
+
<li>
|
| 474 |
+
<strong>Use HTTPS:</strong> When using HTTP/SSE transport, ensure that connections are secured with HTTPS to protect data in transit.
|
| 475 |
+
</li>
|
| 476 |
+
<li>
|
| 477 |
+
<strong>Logging and Monitoring:</strong> Implement comprehensive logging and monitoring for MCP servers to detect and respond to potential security incidents.
|
| 478 |
+
</li>
|
| 479 |
+
</ul>
|
| 480 |
+
</div>
|
| 481 |
+
</div>
|
| 482 |
+
</section>
|
| 483 |
+
|
| 484 |
+
<section id="ecosystem" class="faq-category">
|
| 485 |
+
<h2>Ecosystem and Community</h2>
|
| 486 |
+
|
| 487 |
+
<div class="faq-item">
|
| 488 |
+
<div class="faq-question">What MCP servers are available?</div>
|
| 489 |
+
<div class="faq-answer">
|
| 490 |
+
<p>
|
| 491 |
+
The MCP ecosystem includes a variety of servers for different data sources and tools, including:
|
| 492 |
+
</p>
|
| 493 |
+
<ul style="margin-left: 2rem; margin-top: 0.5rem;">
|
| 494 |
+
<li><strong>Filesystem Server:</strong> For accessing local files and directories</li>
|
| 495 |
+
<li><strong>Git Server:</strong> For interacting with Git repositories</li>
|
| 496 |
+
<li><strong>Postgres Server:</strong> For querying PostgreSQL databases</li>
|
| 497 |
+
<li><strong>Google Drive Server:</strong> For accessing files in Google Drive</li>
|
| 498 |
+
<li><strong>Slack Server:</strong> For interacting with Slack workspaces</li>
|
| 499 |
+
<li><strong>GitHub Server:</strong> For working with GitHub repositories, issues, and pull requests</li>
|
| 500 |
+
<li><strong>Puppeteer Server:</strong> For web browsing and automation</li>
|
| 501 |
+
<li><strong>Browser Extension Server:</strong> For interacting with web browsers</li>
|
| 502 |
+
</ul>
|
| 503 |
+
<p style="margin-top: 0.5rem;">
|
| 504 |
+
The community continues to develop additional servers for various data sources and tools. Check the <a href="ecosystem.html">Ecosystem page</a> for an up-to-date list of available MCP servers.
|
| 505 |
+
</p>
|
| 506 |
+
</div>
|
| 507 |
+
</div>
|
| 508 |
+
|
| 509 |
+
<div class="faq-item">
|
| 510 |
+
<div class="faq-question">Who uses MCP?</div>
|
| 511 |
+
<div class="faq-answer">
|
| 512 |
+
<p>
|
| 513 |
+
MCP is used by a diverse range of organizations and individuals, including:
|
| 514 |
+
</p>
|
| 515 |
+
<ul style="margin-left: 2rem; margin-top: 0.5rem;">
|
| 516 |
+
<li>
|
| 517 |
+
<strong>AI Developers:</strong> Building AI applications that need to access external data and tools
|
| 518 |
+
</li>
|
| 519 |
+
<li>
|
| 520 |
+
<strong>Enterprise Organizations:</strong> Connecting AI systems to internal data sources and tools
|
| 521 |
+
</li>
|
| 522 |
+
<li>
|
| 523 |
+
<strong>Tool Providers:</strong> Exposing their tools and data to AI models through a standardized interface
|
| 524 |
+
</li>
|
| 525 |
+
<li>
|
| 526 |
+
<strong>Individual Users:</strong> Using Claude Desktop and other MCP-compatible applications to connect AI models to their local files and data
|
| 527 |
+
</li>
|
| 528 |
+
</ul>
|
| 529 |
+
<p style="margin-top: 0.5rem;">
|
| 530 |
+
Early adopters of MCP include companies like Block (Square), Apollo, Zed, Replit, Codeium, and Sourcegraph, who have integrated MCP into their platforms to enhance AI capabilities.
|
| 531 |
+
</p>
|
| 532 |
+
</div>
|
| 533 |
+
</div>
|
| 534 |
+
|
| 535 |
+
<div class="faq-item">
|
| 536 |
+
<div class="faq-question">How can I contribute to MCP?</div>
|
| 537 |
+
<div class="faq-answer">
|
| 538 |
+
<p>
|
| 539 |
+
There are several ways to contribute to the MCP ecosystem:
|
| 540 |
+
</p>
|
| 541 |
+
<ul style="margin-left: 2rem; margin-top: 0.5rem;">
|
| 542 |
+
<li>
|
| 543 |
+
<strong>Develop MCP Servers:</strong> Create new MCP servers for data sources or tools that aren't yet supported
|
| 544 |
+
</li>
|
| 545 |
+
<li>
|
| 546 |
+
<strong>Improve SDKs:</strong> Contribute to the official MCP SDKs by adding features, fixing bugs, or improving documentation
|
| 547 |
+
</li>
|
| 548 |
+
<li>
|
| 549 |
+
<strong>Share Examples:</strong> Create and share examples of MCP usage to help others learn and understand the protocol
|
| 550 |
+
</li>
|
| 551 |
+
<li>
|
| 552 |
+
<strong>Join Discussions:</strong> Participate in community forums to share ideas, ask questions, and collaborate with other developers
|
| 553 |
+
</li>
|
| 554 |
+
<li>
|
| 555 |
+
<strong>Report Issues:</strong> Help improve MCP by reporting issues and suggesting enhancements
|
| 556 |
+
</li>
|
| 557 |
+
</ul>
|
| 558 |
+
<p style="margin-top: 0.5rem;">
|
| 559 |
+
The MCP project is open source and welcomes contributions from the community. Visit the <a href="https://github.com/modelcontextprotocol" target="_blank">MCP GitHub organization</a> to learn more about contributing.
|
| 560 |
+
</p>
|
| 561 |
+
</div>
|
| 562 |
+
</div>
|
| 563 |
+
|
| 564 |
+
<div class="faq-item">
|
| 565 |
+
<div class="faq-question">Where can I find MCP resources and documentation?</div>
|
| 566 |
+
<div class="faq-answer">
|
| 567 |
+
<p>
|
| 568 |
+
MCP resources and documentation are available from several sources:
|
| 569 |
+
</p>
|
| 570 |
+
<ul style="margin-left: 2rem; margin-top: 0.5rem;">
|
| 571 |
+
<li>
|
| 572 |
+
<strong>Official Documentation:</strong> <a href="https://modelcontextprotocol.io" target="_blank">modelcontextprotocol.io</a> provides comprehensive guides, references, and tutorials
|
| 573 |
+
</li>
|
| 574 |
+
<li>
|
| 575 |
+
<strong>GitHub Repositories:</strong> <a href="https://github.com/modelcontextprotocol" target="_blank">github.com/modelcontextprotocol</a> contains the source code for MCP SDKs, servers, and examples
|
| 576 |
+
</li>
|
| 577 |
+
<li>
|
| 578 |
+
<strong>Anthropic Documentation:</strong> <a href="https://docs.anthropic.com/en/docs/agents-and-tools/mcp" target="_blank">docs.anthropic.com</a> includes information on using MCP with Claude
|
| 579 |
+
</li>
|
| 580 |
+
<li>
|
| 581 |
+
<strong>Community Forums:</strong> The <a href="https://github.com/modelcontextprotocol/discussions" target="_blank">MCP Discussions</a> on GitHub provide a place to ask questions and share ideas
|
| 582 |
+
</li>
|
| 583 |
+
<li>
|
| 584 |
+
<strong>This Website:</strong> Our <a href="index.html">MCP Hub</a> provides informational resources about MCP
|
| 585 |
+
</li>
|
| 586 |
+
</ul>
|
| 587 |
+
</div>
|
| 588 |
+
</div>
|
| 589 |
+
|
| 590 |
+
<div class="faq-item">
|
| 591 |
+
<div class="faq-question">What's the future roadmap for MCP?</div>
|
| 592 |
+
<div class="faq-answer">
|
| 593 |
+
<p>
|
| 594 |
+
The MCP roadmap includes several exciting developments:
|
| 595 |
+
</p>
|
| 596 |
+
<ul style="margin-left: 2rem; margin-top: 0.5rem;">
|
| 597 |
+
<li>
|
| 598 |
+
<strong>Remote MCP Servers:</strong> Support for remote MCP servers with enterprise-grade authentication, enabling broader deployment options
|
| 599 |
+
</li>
|
| 600 |
+
<li>
|
| 601 |
+
<strong>Enhanced Security Features:</strong> Additional security features to protect sensitive data and ensure secure communication between clients and servers
|
| 602 |
+
</li>
|
| 603 |
+
<li>
|
| 604 |
+
<strong>Broader Language Support:</strong> SDKs for additional programming languages to make MCP accessible to more developers
|
| 605 |
+
</li>
|
| 606 |
+
<li>
|
| 607 |
+
<strong>Integration with AI Platforms:</strong> Deeper integration with AI platforms and frameworks to streamline the use of MCP in AI applications
|
| 608 |
+
</li>
|
| 609 |
+
<li>
|
| 610 |
+
<strong>Community-Driven Standards:</strong> Evolution of the MCP specification based on community feedback and real-world usage
|
| 611 |
+
</li>
|
| 612 |
+
</ul>
|
| 613 |
+
<p style="margin-top: 0.5rem;">
|
| 614 |
+
As an open protocol, MCP's evolution will be guided by the needs of the community and the broader AI ecosystem. The goal is to establish MCP as a foundational standard for AI integration, similar to how HTTP became the foundation for web communication.
|
| 615 |
+
</p>
|
| 616 |
+
</div>
|
| 617 |
+
</div>
|
| 618 |
+
|
| 619 |
+
<div class="faq-item">
|
| 620 |
+
<div class="faq-question">How can I stay updated on MCP developments?</div>
|
| 621 |
+
<div class="faq-answer">
|
| 622 |
+
<p>
|
| 623 |
+
To stay updated on MCP developments, you can:
|
| 624 |
+
</p>
|
| 625 |
+
<ul style="margin-left: 2rem; margin-top: 0.5rem;">
|
| 626 |
+
<li>
|
| 627 |
+
<strong>Follow the GitHub Repositories:</strong> Watch or star the <a href="https://github.com/modelcontextprotocol" target="_blank">MCP GitHub repositories</a> to receive notifications about updates
|
| 628 |
+
</li>
|
| 629 |
+
<li>
|
| 630 |
+
<strong>Join the Community Forums:</strong> Participate in <a href="https://github.com/modelcontextprotocol/discussions" target="_blank">MCP Discussions</a> on GitHub to connect with other developers
|
| 631 |
+
</li>
|
| 632 |
+
<li>
|
| 633 |
+
<strong>Subscribe to Anthropic Updates:</strong> Follow <a href="https://www.anthropic.com/news" target="_blank">Anthropic's news</a> for announcements related to MCP
|
| 634 |
+
</li>
|
| 635 |
+
<li>
|
| 636 |
+
<strong>Check Documentation Regularly:</strong> Visit the <a href="https://modelcontextprotocol.io" target="_blank">official MCP documentation</a> for the latest information
|
| 637 |
+
</li>
|
| 638 |
+
</ul>
|
| 639 |
+
</div>
|
| 640 |
+
</div>
|
| 641 |
+
</section>
|
| 642 |
+
|
| 643 |
+
<section>
|
| 644 |
+
<h2>Still Have Questions?</h2>
|
| 645 |
+
<p>
|
| 646 |
+
If you have questions that aren't answered here, you can:
|
| 647 |
+
</p>
|
| 648 |
+
<ul style="margin-left: 2rem; margin-bottom: 2rem;">
|
| 649 |
+
<li>
|
| 650 |
+
<strong>Join the Community Discussions:</strong> Ask questions and engage with other MCP developers in the <a href="https://github.com/modelcontextprotocol/discussions" target="_blank">MCP Discussions</a> on GitHub.
|
| 651 |
+
</li>
|
| 652 |
+
<li>
|
| 653 |
+
<strong>Check the Official Documentation:</strong> Visit the <a href="https://modelcontextprotocol.io" target="_blank">official MCP documentation</a> for comprehensive information about the protocol.
|
| 654 |
+
</li>
|
| 655 |
+
<li>
|
| 656 |
+
<strong>Explore the GitHub Repositories:</strong> Browse the <a href="https://github.com/modelcontextprotocol" target="_blank">MCP GitHub repositories</a> for code examples, issues, and discussions.
|
| 657 |
+
</li>
|
| 658 |
+
</ul>
|
| 659 |
+
</section>
|
| 660 |
+
</main>
|
| 661 |
+
|
| 662 |
+
<footer>
|
| 663 |
+
<div class="container footer-container">
|
| 664 |
+
<div>
|
| 665 |
+
<h4>MCP Resources</h4>
|
| 666 |
+
<ul>
|
| 667 |
+
<li><a href="https://modelcontextprotocol.io" target="_blank">Official Documentation</a></li>
|
| 668 |
+
<li><a href="https://github.com/modelcontextprotocol" target="_blank">GitHub Repository</a></li>
|
| 669 |
+
<li><a href="https://www.anthropic.com/news/model-context-protocol" target="_blank">Anthropic MCP Announcement</a></li>
|
| 670 |
+
</ul>
|
| 671 |
+
</div>
|
| 672 |
+
<div>
|
| 673 |
+
<h4>Learn More</h4>
|
| 674 |
+
<ul>
|
| 675 |
+
<li><a href="about.html">About MCP</a></li>
|
| 676 |
+
<li><a href="architecture.html">Architecture</a></li>
|
| 677 |
+
<li><a href="benefits.html">Benefits</a></li>
|
| 678 |
+
<li><a href="ecosystem.html">Ecosystem</a></li>
|
| 679 |
+
</ul>
|
| 680 |
+
</div>
|
| 681 |
+
<div>
|
| 682 |
+
<h4>Community</h4>
|
| 683 |
+
<ul>
|
| 684 |
+
<li><a href="https://github.com/modelcontextprotocol/discussions" target="_blank">Discussions</a></li>
|
| 685 |
+
<li><a href="https://github.com/modelcontextprotocol/community-servers" target="_blank">Community Servers</a></li>
|
| 686 |
+
</ul>
|
| 687 |
+
</div>
|
| 688 |
+
</div>
|
| 689 |
+
<div class="copyright container">
|
| 690 |
+
<p>© 2025 MCP Information Hub. Model Context Protocol is an open source project developed by Anthropic, PBC.</p>
|
| 691 |
+
</div>
|
| 692 |
+
</footer>
|
| 693 |
+
|
| 694 |
+
<script src="js/main.js"></script>
|
| 695 |
+
</body>
|
| 696 |
+
</html>
|
getting-started.html
ADDED
|
@@ -0,0 +1,613 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="en">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8">
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
+
<title>Getting Started with MCP - Model Context Protocol</title>
|
| 7 |
+
<meta name="description" content="Learn how to get started with the Model Context Protocol (MCP) for connecting AI models to data sources and tools.">
|
| 8 |
+
<link rel="stylesheet" href="css/styles.css">
|
| 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>
|
| 15 |
+
<div class="container header-container">
|
| 16 |
+
<a href="index.html" class="logo">MCP<span>Hub</span></a>
|
| 17 |
+
<nav>
|
| 18 |
+
<ul>
|
| 19 |
+
<li><a href="index.html">Home</a></li>
|
| 20 |
+
<li><a href="about.html">About</a></li>
|
| 21 |
+
<li><a href="architecture.html">Architecture</a></li>
|
| 22 |
+
<li><a href="benefits.html">Benefits</a></li>
|
| 23 |
+
<li><a href="ecosystem.html">Ecosystem</a></li>
|
| 24 |
+
<li><a href="getting-started.html">Get Started</a></li>
|
| 25 |
+
<li><a href="faq.html">FAQ</a></li>
|
| 26 |
+
</ul>
|
| 27 |
+
</nav>
|
| 28 |
+
</div>
|
| 29 |
+
</header>
|
| 30 |
+
|
| 31 |
+
<section class="hero">
|
| 32 |
+
<div class="container">
|
| 33 |
+
<h1>Getting Started with MCP</h1>
|
| 34 |
+
<p>Begin your journey with the Model Context Protocol</p>
|
| 35 |
+
</div>
|
| 36 |
+
</section>
|
| 37 |
+
|
| 38 |
+
<main class="container">
|
| 39 |
+
<section>
|
| 40 |
+
<h2>Introduction</h2>
|
| 41 |
+
<p>
|
| 42 |
+
This guide will help you get started with the Model Context Protocol (MCP), whether you're building an AI application that needs to connect to external data sources or creating an MCP server to expose your data and tools to AI models.
|
| 43 |
+
</p>
|
| 44 |
+
<p>
|
| 45 |
+
We'll cover the basics of setting up both MCP clients and servers, with examples in different programming languages.
|
| 46 |
+
</p>
|
| 47 |
+
</section>
|
| 48 |
+
|
| 49 |
+
<section>
|
| 50 |
+
<h2>Prerequisites</h2>
|
| 51 |
+
<p>
|
| 52 |
+
Before you begin, make sure you have the following:
|
| 53 |
+
</p>
|
| 54 |
+
<ul style="margin-left: 2rem; margin-bottom: 1.5rem;">
|
| 55 |
+
<li>
|
| 56 |
+
<strong>Development Environment:</strong> A suitable development environment for your chosen programming language (Node.js for JavaScript/TypeScript, Python, Java, or .NET).
|
| 57 |
+
</li>
|
| 58 |
+
<li>
|
| 59 |
+
<strong>Basic Knowledge:</strong> Familiarity with your chosen programming language and basic concepts of AI and API integration.
|
| 60 |
+
</li>
|
| 61 |
+
<li>
|
| 62 |
+
<strong>Access to AI Models (for client development):</strong> Access to AI models that support MCP, such as Claude via Claude Desktop or the Claude API.
|
| 63 |
+
</li>
|
| 64 |
+
</ul>
|
| 65 |
+
</section>
|
| 66 |
+
|
| 67 |
+
<section>
|
| 68 |
+
<h2>Installation</h2>
|
| 69 |
+
<p>
|
| 70 |
+
The first step is to install the appropriate MCP SDK for your programming language:
|
| 71 |
+
</p>
|
| 72 |
+
<div class="card-container">
|
| 73 |
+
<div class="card">
|
| 74 |
+
<h3>TypeScript/JavaScript</h3>
|
| 75 |
+
<pre><code>npm install @modelcontextprotocol/client
|
| 76 |
+
npm install @modelcontextprotocol/server</code></pre>
|
| 77 |
+
</div>
|
| 78 |
+
<div class="card">
|
| 79 |
+
<h3>Python</h3>
|
| 80 |
+
<pre><code>pip install mcp-client
|
| 81 |
+
pip install mcp-server</code></pre>
|
| 82 |
+
</div>
|
| 83 |
+
<div class="card">
|
| 84 |
+
<h3>Java</h3>
|
| 85 |
+
<pre><code>// Add to your Maven pom.xml
|
| 86 |
+
<dependency>
|
| 87 |
+
<groupId>io.modelcontextprotocol</groupId>
|
| 88 |
+
<artifactId>mcp-client</artifactId>
|
| 89 |
+
<version>1.0.0</version>
|
| 90 |
+
</dependency>
|
| 91 |
+
|
| 92 |
+
<dependency>
|
| 93 |
+
<groupId>io.modelcontextprotocol</groupId>
|
| 94 |
+
<artifactId>mcp-server</artifactId>
|
| 95 |
+
<version>1.0.0</version>
|
| 96 |
+
</dependency></code></pre>
|
| 97 |
+
</div>
|
| 98 |
+
<div class="card">
|
| 99 |
+
<h3>C#</h3>
|
| 100 |
+
<pre><code>dotnet add package ModelContextProtocol.Client
|
| 101 |
+
dotnet add package ModelContextProtocol.Server</code></pre>
|
| 102 |
+
</div>
|
| 103 |
+
</div>
|
| 104 |
+
</section>
|
| 105 |
+
|
| 106 |
+
<section>
|
| 107 |
+
<h2>Building an MCP Client</h2>
|
| 108 |
+
<p>
|
| 109 |
+
An MCP client is an application that connects to MCP servers to access data and tools. Here's how to create a basic MCP client:
|
| 110 |
+
</p>
|
| 111 |
+
<div class="two-column">
|
| 112 |
+
<div>
|
| 113 |
+
<h3>TypeScript/JavaScript Example</h3>
|
| 114 |
+
<pre><code>import { MCPClient } from '@modelcontextprotocol/client';
|
| 115 |
+
|
| 116 |
+
async function main() {
|
| 117 |
+
// Create an MCP client
|
| 118 |
+
const client = new MCPClient();
|
| 119 |
+
|
| 120 |
+
// Connect to an MCP server (e.g., filesystem server)
|
| 121 |
+
await client.connect({
|
| 122 |
+
transport: 'stdio',
|
| 123 |
+
command: 'npx',
|
| 124 |
+
args: ['-y', '@modelcontextprotocol/server-filesystem', '/path/to/directory']
|
| 125 |
+
});
|
| 126 |
+
|
| 127 |
+
// List available tools
|
| 128 |
+
const tools = await client.listTools();
|
| 129 |
+
console.log('Available tools:', tools);
|
| 130 |
+
|
| 131 |
+
// Call a tool
|
| 132 |
+
const result = await client.callTool({
|
| 133 |
+
name: 'readFile',
|
| 134 |
+
parameters: { path: 'example.txt' }
|
| 135 |
+
});
|
| 136 |
+
console.log('File contents:', result);
|
| 137 |
+
|
| 138 |
+
// Disconnect when done
|
| 139 |
+
await client.disconnect();
|
| 140 |
+
}
|
| 141 |
+
|
| 142 |
+
main().catch(console.error);</code></pre>
|
| 143 |
+
</div>
|
| 144 |
+
<div>
|
| 145 |
+
<h3>Python Example</h3>
|
| 146 |
+
<pre><code>from mcp_client import MCPClient
|
| 147 |
+
import asyncio
|
| 148 |
+
|
| 149 |
+
async def main():
|
| 150 |
+
# Create an MCP client
|
| 151 |
+
client = MCPClient()
|
| 152 |
+
|
| 153 |
+
# Connect to an MCP server (e.g., filesystem server)
|
| 154 |
+
await client.connect(
|
| 155 |
+
transport='stdio',
|
| 156 |
+
command='npx',
|
| 157 |
+
args=['-y', '@modelcontextprotocol/server-filesystem', '/path/to/directory']
|
| 158 |
+
)
|
| 159 |
+
|
| 160 |
+
# List available tools
|
| 161 |
+
tools = await client.list_tools()
|
| 162 |
+
print('Available tools:', tools)
|
| 163 |
+
|
| 164 |
+
# Call a tool
|
| 165 |
+
result = await client.call_tool(
|
| 166 |
+
name='readFile',
|
| 167 |
+
parameters={'path': 'example.txt'}
|
| 168 |
+
)
|
| 169 |
+
print('File contents:', result)
|
| 170 |
+
|
| 171 |
+
# Disconnect when done
|
| 172 |
+
await client.disconnect()
|
| 173 |
+
|
| 174 |
+
asyncio.run(main())</code></pre>
|
| 175 |
+
</div>
|
| 176 |
+
</div>
|
| 177 |
+
</section>
|
| 178 |
+
|
| 179 |
+
<section>
|
| 180 |
+
<h2>Building an MCP Server</h2>
|
| 181 |
+
<p>
|
| 182 |
+
An MCP server exposes data and tools to MCP clients. Here's how to create a basic MCP server:
|
| 183 |
+
</p>
|
| 184 |
+
<div class="two-column">
|
| 185 |
+
<div>
|
| 186 |
+
<h3>TypeScript/JavaScript Example</h3>
|
| 187 |
+
<pre><code>import { createServer, MCPTool } from '@modelcontextprotocol/server';
|
| 188 |
+
|
| 189 |
+
// Define a tool
|
| 190 |
+
const greetingTool: MCPTool = {
|
| 191 |
+
name: 'greeting',
|
| 192 |
+
description: 'Returns a greeting message',
|
| 193 |
+
parameters: {
|
| 194 |
+
type: 'object',
|
| 195 |
+
properties: {
|
| 196 |
+
name: {
|
| 197 |
+
type: 'string',
|
| 198 |
+
description: 'Name to greet'
|
| 199 |
+
}
|
| 200 |
+
},
|
| 201 |
+
required: ['name']
|
| 202 |
+
},
|
| 203 |
+
handler: async (params) => {
|
| 204 |
+
return `Hello, ${params.name}!`;
|
| 205 |
+
}
|
| 206 |
+
};
|
| 207 |
+
|
| 208 |
+
// Create an MCP server
|
| 209 |
+
const server = createServer({
|
| 210 |
+
name: 'greeting-server',
|
| 211 |
+
description: 'A server that provides greeting functionality',
|
| 212 |
+
version: '1.0.0',
|
| 213 |
+
tools: [greetingTool]
|
| 214 |
+
});
|
| 215 |
+
|
| 216 |
+
// Start the server
|
| 217 |
+
server.start();</code></pre>
|
| 218 |
+
</div>
|
| 219 |
+
<div>
|
| 220 |
+
<h3>Python Example</h3>
|
| 221 |
+
<pre><code>from mcp_server import create_server, MCPTool
|
| 222 |
+
|
| 223 |
+
# Define a tool
|
| 224 |
+
greeting_tool = MCPTool(
|
| 225 |
+
name='greeting',
|
| 226 |
+
description='Returns a greeting message',
|
| 227 |
+
parameters={
|
| 228 |
+
'type': 'object',
|
| 229 |
+
'properties': {
|
| 230 |
+
'name': {
|
| 231 |
+
'type': 'string',
|
| 232 |
+
'description': 'Name to greet'
|
| 233 |
+
}
|
| 234 |
+
},
|
| 235 |
+
'required': ['name']
|
| 236 |
+
}
|
| 237 |
+
)
|
| 238 |
+
|
| 239 |
+
# Define the handler function
|
| 240 |
+
async def greeting_handler(params):
|
| 241 |
+
return f"Hello, {params['name']}!"
|
| 242 |
+
|
| 243 |
+
# Attach the handler
|
| 244 |
+
greeting_tool.handler = greeting_handler
|
| 245 |
+
|
| 246 |
+
# Create an MCP server
|
| 247 |
+
server = create_server(
|
| 248 |
+
name='greeting-server',
|
| 249 |
+
description='A server that provides greeting functionality',
|
| 250 |
+
version='1.0.0',
|
| 251 |
+
tools=[greeting_tool]
|
| 252 |
+
)
|
| 253 |
+
|
| 254 |
+
# Start the server
|
| 255 |
+
server.start()</code></pre>
|
| 256 |
+
</div>
|
| 257 |
+
</div>
|
| 258 |
+
</section>
|
| 259 |
+
|
| 260 |
+
<section>
|
| 261 |
+
<h2>Using Existing MCP Servers</h2>
|
| 262 |
+
<p>
|
| 263 |
+
Instead of building your own MCP server from scratch, you can use existing MCP servers to add functionality to your applications:
|
| 264 |
+
</p>
|
| 265 |
+
<div class="card-container">
|
| 266 |
+
<div class="card">
|
| 267 |
+
<h3>Filesystem Server</h3>
|
| 268 |
+
<pre><code>// Install the filesystem server
|
| 269 |
+
npm install -g @modelcontextprotocol/server-filesystem
|
| 270 |
+
|
| 271 |
+
// Connect to the server in your client
|
| 272 |
+
await client.connect({
|
| 273 |
+
transport: 'stdio',
|
| 274 |
+
command: 'npx',
|
| 275 |
+
args: ['@modelcontextprotocol/server-filesystem', '/path/to/directory']
|
| 276 |
+
});</code></pre>
|
| 277 |
+
</div>
|
| 278 |
+
<div class="card">
|
| 279 |
+
<h3>Git Server</h3>
|
| 280 |
+
<pre><code>// Install the Git server
|
| 281 |
+
npm install -g @modelcontextprotocol/server-git
|
| 282 |
+
|
| 283 |
+
// Connect to the server in your client
|
| 284 |
+
await client.connect({
|
| 285 |
+
transport: 'stdio',
|
| 286 |
+
command: 'npx',
|
| 287 |
+
args: ['@modelcontextprotocol/server-git', '/path/to/repository']
|
| 288 |
+
});</code></pre>
|
| 289 |
+
</div>
|
| 290 |
+
<div class="card">
|
| 291 |
+
<h3>Postgres Server</h3>
|
| 292 |
+
<pre><code>// Install the Postgres server
|
| 293 |
+
npm install -g @modelcontextprotocol/server-postgres
|
| 294 |
+
|
| 295 |
+
// Connect to the server in your client
|
| 296 |
+
await client.connect({
|
| 297 |
+
transport: 'stdio',
|
| 298 |
+
command: 'npx',
|
| 299 |
+
args: ['@modelcontextprotocol/server-postgres', '--connection-string', 'postgresql://user:password@localhost:5432/database']
|
| 300 |
+
});</code></pre>
|
| 301 |
+
</div>
|
| 302 |
+
<div class="card">
|
| 303 |
+
<h3>Google Drive Server</h3>
|
| 304 |
+
<pre><code>// Install the Google Drive server
|
| 305 |
+
npm install -g @modelcontextprotocol/server-google-drive
|
| 306 |
+
|
| 307 |
+
// Connect to the server in your client
|
| 308 |
+
await client.connect({
|
| 309 |
+
transport: 'stdio',
|
| 310 |
+
command: 'npx',
|
| 311 |
+
args: ['@modelcontextprotocol/server-google-drive', '--credentials-file', '/path/to/credentials.json']
|
| 312 |
+
});</code></pre>
|
| 313 |
+
</div>
|
| 314 |
+
</div>
|
| 315 |
+
</section>
|
| 316 |
+
|
| 317 |
+
<section>
|
| 318 |
+
<h2>Connecting Claude to MCP Servers</h2>
|
| 319 |
+
<p>
|
| 320 |
+
Claude can connect to MCP servers through various interfaces, including Claude Desktop and the Claude API. Here's how to use MCP with Claude:
|
| 321 |
+
</p>
|
| 322 |
+
<div class="two-column">
|
| 323 |
+
<div>
|
| 324 |
+
<h3>Claude Desktop</h3>
|
| 325 |
+
<p>
|
| 326 |
+
Claude Desktop provides a user-friendly interface for connecting Claude to MCP servers:
|
| 327 |
+
</p>
|
| 328 |
+
<ol style="margin-left: 2rem; margin-bottom: 1.5rem;">
|
| 329 |
+
<li>Install Claude Desktop from Anthropic's website.</li>
|
| 330 |
+
<li>Open Claude Desktop and start a conversation.</li>
|
| 331 |
+
<li>Click on the "Connect" button in the interface.</li>
|
| 332 |
+
<li>Select the MCP server you want to connect to (e.g., filesystem, Git).</li>
|
| 333 |
+
<li>Follow the prompts to configure the server connection.</li>
|
| 334 |
+
<li>Once connected, Claude can access the data and tools provided by the MCP server.</li>
|
| 335 |
+
</ol>
|
| 336 |
+
</div>
|
| 337 |
+
<div>
|
| 338 |
+
<h3>Claude API with MCP</h3>
|
| 339 |
+
<p>
|
| 340 |
+
For programmatic access, you can use the Claude API with MCP:
|
| 341 |
+
</p>
|
| 342 |
+
<pre><code>import { MCPClient } from '@modelcontextprotocol/client';
|
| 343 |
+
import { Claude } from '@anthropic-ai/sdk';
|
| 344 |
+
|
| 345 |
+
async function main() {
|
| 346 |
+
// Create an MCP client
|
| 347 |
+
const mcpClient = new MCPClient();
|
| 348 |
+
|
| 349 |
+
// Connect to an MCP server
|
| 350 |
+
await mcpClient.connect({
|
| 351 |
+
transport: 'stdio',
|
| 352 |
+
command: 'npx',
|
| 353 |
+
args: ['-y', '@modelcontextprotocol/server-filesystem', '/path/to/directory']
|
| 354 |
+
});
|
| 355 |
+
|
| 356 |
+
// List available tools
|
| 357 |
+
const tools = await mcpClient.listTools();
|
| 358 |
+
|
| 359 |
+
// Create a Claude client
|
| 360 |
+
const claude = new Claude({
|
| 361 |
+
apiKey: process.env.ANTHROPIC_API_KEY
|
| 362 |
+
});
|
| 363 |
+
|
| 364 |
+
// Send a message to Claude with MCP tools
|
| 365 |
+
const response = await claude.messages.create({
|
| 366 |
+
model: 'claude-3-opus-20240229',
|
| 367 |
+
max_tokens: 1024,
|
| 368 |
+
messages: [
|
| 369 |
+
{
|
| 370 |
+
role: 'user',
|
| 371 |
+
content: 'Please read the file example.txt and summarize its contents.'
|
| 372 |
+
}
|
| 373 |
+
],
|
| 374 |
+
tools: tools
|
| 375 |
+
});
|
| 376 |
+
|
| 377 |
+
console.log(response.content);
|
| 378 |
+
}
|
| 379 |
+
|
| 380 |
+
main().catch(console.error);</code></pre>
|
| 381 |
+
</div>
|
| 382 |
+
</div>
|
| 383 |
+
</section>
|
| 384 |
+
|
| 385 |
+
<section>
|
| 386 |
+
<h2>Common Use Cases</h2>
|
| 387 |
+
<p>
|
| 388 |
+
Here are some common use cases for MCP and examples of how to implement them:
|
| 389 |
+
</p>
|
| 390 |
+
<div class="card-container">
|
| 391 |
+
<div class="card">
|
| 392 |
+
<h3>Document Processing</h3>
|
| 393 |
+
<p>
|
| 394 |
+
Use MCP to enable AI models to read, analyze, and process documents:
|
| 395 |
+
</p>
|
| 396 |
+
<pre><code>// Connect to the filesystem server
|
| 397 |
+
await client.connect({
|
| 398 |
+
transport: 'stdio',
|
| 399 |
+
command: 'npx',
|
| 400 |
+
args: ['@modelcontextprotocol/server-filesystem', '/path/to/documents']
|
| 401 |
+
});
|
| 402 |
+
|
| 403 |
+
// Read a document
|
| 404 |
+
const content = await client.callTool({
|
| 405 |
+
name: 'readFile',
|
| 406 |
+
parameters: { path: 'report.txt' }
|
| 407 |
+
});</code></pre>
|
| 408 |
+
</div>
|
| 409 |
+
<div class="card">
|
| 410 |
+
<h3>Database Queries</h3>
|
| 411 |
+
<p>
|
| 412 |
+
Use MCP to enable AI models to query databases:
|
| 413 |
+
</p>
|
| 414 |
+
<pre><code>// Connect to the Postgres server
|
| 415 |
+
await client.connect({
|
| 416 |
+
transport: 'stdio',
|
| 417 |
+
command: 'npx',
|
| 418 |
+
args: ['@modelcontextprotocol/server-postgres', '--connection-string', 'postgresql://user:password@localhost:5432/database']
|
| 419 |
+
});
|
| 420 |
+
|
| 421 |
+
// Execute a query
|
| 422 |
+
const results = await client.callTool({
|
| 423 |
+
name: 'executeQuery',
|
| 424 |
+
parameters: { query: 'SELECT * FROM users LIMIT 10' }
|
| 425 |
+
});</code></pre>
|
| 426 |
+
</div>
|
| 427 |
+
<div class="card">
|
| 428 |
+
<h3>Code Repository Access</h3>
|
| 429 |
+
<p>
|
| 430 |
+
Use MCP to enable AI models to access code repositories:
|
| 431 |
+
</p>
|
| 432 |
+
<pre><code>// Connect to the Git server
|
| 433 |
+
await client.connect({
|
| 434 |
+
transport: 'stdio',
|
| 435 |
+
command: 'npx',
|
| 436 |
+
args: ['@modelcontextprotocol/server-git', '/path/to/repository']
|
| 437 |
+
});
|
| 438 |
+
|
| 439 |
+
// List files in the repository
|
| 440 |
+
const files = await client.callTool({
|
| 441 |
+
name: 'listFiles',
|
| 442 |
+
parameters: { path: '.' }
|
| 443 |
+
});</code></pre>
|
| 444 |
+
</div>
|
| 445 |
+
<div class="card">
|
| 446 |
+
<h3>Web Browsing</h3>
|
| 447 |
+
<p>
|
| 448 |
+
Use MCP to enable AI models to browse the web:
|
| 449 |
+
</p>
|
| 450 |
+
<pre><code>// Connect to the Puppeteer server
|
| 451 |
+
await client.connect({
|
| 452 |
+
transport: 'stdio',
|
| 453 |
+
command: 'npx',
|
| 454 |
+
args: ['@modelcontextprotocol/server-puppeteer']
|
| 455 |
+
});
|
| 456 |
+
|
| 457 |
+
// Navigate to a webpage
|
| 458 |
+
const content = await client.callTool({
|
| 459 |
+
name: 'getPageContent',
|
| 460 |
+
parameters: { url: 'https://example.com' }
|
| 461 |
+
});</code></pre>
|
| 462 |
+
</div>
|
| 463 |
+
</div>
|
| 464 |
+
</section>
|
| 465 |
+
|
| 466 |
+
<section>
|
| 467 |
+
<h2>Best Practices</h2>
|
| 468 |
+
<p>
|
| 469 |
+
Here are some best practices to follow when working with MCP:
|
| 470 |
+
</p>
|
| 471 |
+
<div class="two-column">
|
| 472 |
+
<div>
|
| 473 |
+
<h3>Security Considerations</h3>
|
| 474 |
+
<ul style="margin-left: 2rem; margin-bottom: 1.5rem;">
|
| 475 |
+
<li>
|
| 476 |
+
<strong>Limit Access:</strong> Configure MCP servers to access only the resources that are necessary for the application.
|
| 477 |
+
</li>
|
| 478 |
+
<li>
|
| 479 |
+
<strong>Validate Inputs:</strong> Implement proper input validation for tool parameters to prevent security vulnerabilities.
|
| 480 |
+
</li>
|
| 481 |
+
<li>
|
| 482 |
+
<strong>Use Local Transport:</strong> For sensitive operations, use stdio transport to ensure data doesn't leave the local machine.
|
| 483 |
+
</li>
|
| 484 |
+
<li>
|
| 485 |
+
<strong>Secure API Keys:</strong> Protect API keys and credentials used by MCP servers.
|
| 486 |
+
</li>
|
| 487 |
+
</ul>
|
| 488 |
+
</div>
|
| 489 |
+
<div>
|
| 490 |
+
<h3>Performance Optimization</h3>
|
| 491 |
+
<ul style="margin-left: 2rem; margin-bottom: 1.5rem;">
|
| 492 |
+
<li>
|
| 493 |
+
<strong>Cache Tool Lists:</strong> Cache the results of <code>listTools</code> calls to reduce latency.
|
| 494 |
+
</li>
|
| 495 |
+
<li>
|
| 496 |
+
<strong>Optimize Data Transfer:</strong> Transfer only the necessary data between clients and servers to minimize overhead.
|
| 497 |
+
</li>
|
| 498 |
+
<li>
|
| 499 |
+
<strong>Implement Pagination:</strong> For tools that return large amounts of data, implement pagination to avoid performance issues.
|
| 500 |
+
</li>
|
| 501 |
+
<li>
|
| 502 |
+
<strong>Use Efficient Serialization:</strong> Choose efficient serialization formats for data exchange between clients and servers.
|
| 503 |
+
</li>
|
| 504 |
+
</ul>
|
| 505 |
+
</div>
|
| 506 |
+
</div>
|
| 507 |
+
<div class="two-column" style="margin-top: 2rem;">
|
| 508 |
+
<div>
|
| 509 |
+
<h3>Tool Design</h3>
|
| 510 |
+
<ul style="margin-left: 2rem; margin-bottom: 1.5rem;">
|
| 511 |
+
<li>
|
| 512 |
+
<strong>Clear Descriptions:</strong> Provide clear and detailed descriptions for tools and parameters to help AI models understand how to use them.
|
| 513 |
+
</li>
|
| 514 |
+
<li>
|
| 515 |
+
<strong>Consistent Naming:</strong> Use consistent naming conventions for tools and parameters across your MCP servers.
|
| 516 |
+
</li>
|
| 517 |
+
<li>
|
| 518 |
+
<strong>Atomic Operations:</strong> Design tools to perform atomic operations that can be composed to achieve complex tasks.
|
| 519 |
+
</li>
|
| 520 |
+
<li>
|
| 521 |
+
<strong>Error Handling:</strong> Implement robust error handling to provide informative error messages when tools fail.
|
| 522 |
+
</li>
|
| 523 |
+
</ul>
|
| 524 |
+
</div>
|
| 525 |
+
<div>
|
| 526 |
+
<h3>Testing and Debugging</h3>
|
| 527 |
+
<ul style="margin-left: 2rem; margin-bottom: 1.5rem;">
|
| 528 |
+
<li>
|
| 529 |
+
<strong>Unit Testing:</strong> Write comprehensive unit tests for your MCP servers and tools.
|
| 530 |
+
</li>
|
| 531 |
+
<li>
|
| 532 |
+
<strong>Integration Testing:</strong> Test the interaction between your MCP clients and servers to ensure compatibility.
|
| 533 |
+
</li>
|
| 534 |
+
<li>
|
| 535 |
+
<strong>Logging:</strong> Implement detailed logging in your MCP servers to help debug issues.
|
| 536 |
+
</li>
|
| 537 |
+
<li>
|
| 538 |
+
<strong>Mocking:</strong> Use mock MCP servers for testing to isolate client code from external dependencies.
|
| 539 |
+
</li>
|
| 540 |
+
</ul>
|
| 541 |
+
</div>
|
| 542 |
+
</div>
|
| 543 |
+
</section>
|
| 544 |
+
|
| 545 |
+
<section>
|
| 546 |
+
<h2>Next Steps</h2>
|
| 547 |
+
<p>
|
| 548 |
+
Now that you've learned the basics of MCP, here are some next steps to explore:
|
| 549 |
+
</p>
|
| 550 |
+
<div class="card-container">
|
| 551 |
+
<div class="card">
|
| 552 |
+
<h3>Explore the Ecosystem</h3>
|
| 553 |
+
<p>
|
| 554 |
+
Check out the <a href="ecosystem.html">MCP Ecosystem</a> page to discover available MCP servers, tools, and resources.
|
| 555 |
+
</p>
|
| 556 |
+
</div>
|
| 557 |
+
<div class="card">
|
| 558 |
+
<h3>Dive into the Architecture</h3>
|
| 559 |
+
<p>
|
| 560 |
+
Learn more about the <a href="architecture.html">MCP Architecture</a> to understand the technical details of how MCP works.
|
| 561 |
+
</p>
|
| 562 |
+
</div>
|
| 563 |
+
<div class="card">
|
| 564 |
+
<h3>Join the Community</h3>
|
| 565 |
+
<p>
|
| 566 |
+
Join the MCP community forums to ask questions, share ideas, and collaborate with other developers.
|
| 567 |
+
</p>
|
| 568 |
+
</div>
|
| 569 |
+
<div class="card">
|
| 570 |
+
<h3>Build Your Own MCP Server</h3>
|
| 571 |
+
<p>
|
| 572 |
+
Create your own MCP server to expose your data and tools to AI models, and consider contributing it to the community.
|
| 573 |
+
</p>
|
| 574 |
+
</div>
|
| 575 |
+
</div>
|
| 576 |
+
</section>
|
| 577 |
+
</main>
|
| 578 |
+
|
| 579 |
+
<footer>
|
| 580 |
+
<div class="container footer-container">
|
| 581 |
+
<div>
|
| 582 |
+
<h4>MCP Resources</h4>
|
| 583 |
+
<ul>
|
| 584 |
+
<li><a href="https://modelcontextprotocol.io" target="_blank">Official Documentation</a></li>
|
| 585 |
+
<li><a href="https://github.com/modelcontextprotocol" target="_blank">GitHub Repository</a></li>
|
| 586 |
+
<li><a href="https://www.anthropic.com/news/model-context-protocol" target="_blank">Anthropic MCP Announcement</a></li>
|
| 587 |
+
</ul>
|
| 588 |
+
</div>
|
| 589 |
+
<div>
|
| 590 |
+
<h4>Learn More</h4>
|
| 591 |
+
<ul>
|
| 592 |
+
<li><a href="about.html">About MCP</a></li>
|
| 593 |
+
<li><a href="architecture.html">Architecture</a></li>
|
| 594 |
+
<li><a href="benefits.html">Benefits</a></li>
|
| 595 |
+
<li><a href="ecosystem.html">Ecosystem</a></li>
|
| 596 |
+
</ul>
|
| 597 |
+
</div>
|
| 598 |
+
<div>
|
| 599 |
+
<h4>Community</h4>
|
| 600 |
+
<ul>
|
| 601 |
+
<li><a href="https://github.com/modelcontextprotocol/discussions" target="_blank">Discussions</a></li>
|
| 602 |
+
<li><a href="https://github.com/modelcontextprotocol/community-servers" target="_blank">Community Servers</a></li>
|
| 603 |
+
</ul>
|
| 604 |
+
</div>
|
| 605 |
+
</div>
|
| 606 |
+
<div class="copyright container">
|
| 607 |
+
<p>© 2025 MCP Information Hub. Model Context Protocol is an open source project developed by Anthropic, PBC.</p>
|
| 608 |
+
</div>
|
| 609 |
+
</footer>
|
| 610 |
+
|
| 611 |
+
<script src="js/main.js"></script>
|
| 612 |
+
</body>
|
| 613 |
+
</html>
|
index.html
CHANGED
|
@@ -1,19 +1,154 @@
|
|
| 1 |
-
<!
|
| 2 |
-
<html>
|
| 3 |
-
|
| 4 |
-
|
| 5 |
-
|
| 6 |
-
|
| 7 |
-
|
| 8 |
-
|
| 9 |
-
|
| 10 |
-
|
| 11 |
-
|
| 12 |
-
|
| 13 |
-
|
| 14 |
-
|
| 15 |
-
|
| 16 |
-
|
| 17 |
-
|
| 18 |
-
|
| 19 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="en">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8">
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
+
<title>Model Context Protocol (MCP) - Connecting AI Models to Data and Tools</title>
|
| 7 |
+
<meta name="description" content="Learn about the Model Context Protocol (MCP), an open standard that enables seamless integration between AI models and external data sources and tools.">
|
| 8 |
+
<link rel="stylesheet" href="css/styles.css">
|
| 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>
|
| 15 |
+
<div class="container header-container">
|
| 16 |
+
<a href="index.html" class="logo">MCP<span>Hub</span></a>
|
| 17 |
+
<nav>
|
| 18 |
+
<ul>
|
| 19 |
+
<li><a href="index.html">Home</a></li>
|
| 20 |
+
<li><a href="about.html">About</a></li>
|
| 21 |
+
<li><a href="architecture.html">Architecture</a></li>
|
| 22 |
+
<li><a href="benefits.html">Benefits</a></li>
|
| 23 |
+
<li><a href="ecosystem.html">Ecosystem</a></li>
|
| 24 |
+
<li><a href="getting-started.html">Get Started</a></li>
|
| 25 |
+
<li><a href="faq.html">FAQ</a></li>
|
| 26 |
+
</ul>
|
| 27 |
+
</nav>
|
| 28 |
+
</div>
|
| 29 |
+
</header>
|
| 30 |
+
|
| 31 |
+
<section class="hero">
|
| 32 |
+
<div class="container">
|
| 33 |
+
<h1>Model Context Protocol (MCP)</h1>
|
| 34 |
+
<p>An open standard for connecting AI models to data sources and tools</p>
|
| 35 |
+
<a href="getting-started.html" class="cta-button">Get Started</a>
|
| 36 |
+
</div>
|
| 37 |
+
</section>
|
| 38 |
+
|
| 39 |
+
<main class="container">
|
| 40 |
+
<section>
|
| 41 |
+
<h2>What is Model Context Protocol?</h2>
|
| 42 |
+
<p>
|
| 43 |
+
Model Context Protocol (MCP) is an open protocol that standardizes how applications provide context to Large Language Models (LLMs). Think of MCP like a USB-C port for AI applications - it provides a standardized way to connect AI models to different data sources and tools, allowing them to work together seamlessly.
|
| 44 |
+
</p>
|
| 45 |
+
<p>
|
| 46 |
+
Developed by Anthropic and released as an open standard, MCP solves a critical problem in AI development: connecting AI models with the data and tools they need to be truly effective. Instead of requiring custom integrations for each data source, MCP provides a universal interface that works across different AI systems and data repositories.
|
| 47 |
+
</p>
|
| 48 |
+
</section>
|
| 49 |
+
|
| 50 |
+
<section>
|
| 51 |
+
<h2>Key Features</h2>
|
| 52 |
+
<div class="card-container">
|
| 53 |
+
<div class="card">
|
| 54 |
+
<div class="card-icon">🔌</div>
|
| 55 |
+
<h3>Universal Connectivity</h3>
|
| 56 |
+
<p>Connect any AI model to any data source or tool using a standardized protocol, eliminating the need for custom integrations.</p>
|
| 57 |
+
</div>
|
| 58 |
+
<div class="card">
|
| 59 |
+
<div class="card-icon">🔒</div>
|
| 60 |
+
<h3>Secure Architecture</h3>
|
| 61 |
+
<p>Built with security in mind - data sources control access to their information, and there's no need to share API keys with LLM providers.</p>
|
| 62 |
+
</div>
|
| 63 |
+
<div class="card">
|
| 64 |
+
<div class="card-icon">🧩</div>
|
| 65 |
+
<h3>Tool Integration</h3>
|
| 66 |
+
<p>Enable AI models to use external tools and services through a standardized interface for actions like file operations, API calls, and more.</p>
|
| 67 |
+
</div>
|
| 68 |
+
<div class="card">
|
| 69 |
+
<div class="card-icon">🌐</div>
|
| 70 |
+
<h3>Open Standard</h3>
|
| 71 |
+
<p>As an open protocol, MCP can be implemented by any organization or developer, fostering a collaborative ecosystem.</p>
|
| 72 |
+
</div>
|
| 73 |
+
</div>
|
| 74 |
+
</section>
|
| 75 |
+
|
| 76 |
+
<section class="two-column">
|
| 77 |
+
<div>
|
| 78 |
+
<h2>How MCP Works</h2>
|
| 79 |
+
<p>
|
| 80 |
+
MCP follows a client-server architecture where MCP clients (AI applications) connect to MCP servers (data sources and tools). The protocol defines how these components communicate, allowing AI models to access information and functionality from external systems.
|
| 81 |
+
</p>
|
| 82 |
+
<p>
|
| 83 |
+
This separation of concerns means data providers maintain control over their information, while AI applications gain the ability to work with a wide range of tools and data sources through a consistent interface.
|
| 84 |
+
</p>
|
| 85 |
+
<a href="architecture.html" class="cta-button">Learn More About MCP Architecture</a>
|
| 86 |
+
</div>
|
| 87 |
+
<div>
|
| 88 |
+
<pre><code>// Example MCP client-server interaction
|
| 89 |
+
const mcpClient = new MCPClient();
|
| 90 |
+
|
| 91 |
+
// Connect to an MCP server
|
| 92 |
+
await mcpClient.connect({
|
| 93 |
+
transport: "stdio",
|
| 94 |
+
command: "npx",
|
| 95 |
+
args: ["@modelcontextprotocol/server-filesystem"]
|
| 96 |
+
});
|
| 97 |
+
|
| 98 |
+
// List available tools
|
| 99 |
+
const tools = await mcpClient.listTools();
|
| 100 |
+
|
| 101 |
+
// Use a tool from the server
|
| 102 |
+
const result = await mcpClient.callTool({
|
| 103 |
+
name: "readFile",
|
| 104 |
+
parameters: { path: "/path/to/file.txt" }
|
| 105 |
+
});</code></pre>
|
| 106 |
+
</div>
|
| 107 |
+
</section>
|
| 108 |
+
|
| 109 |
+
<section>
|
| 110 |
+
<h2>Getting Started with MCP</h2>
|
| 111 |
+
<p>
|
| 112 |
+
Ready to start building with MCP? Whether you're developing an AI application that needs to access external data, or creating an MCP server to expose your data to AI systems, our documentation will help you get started quickly.
|
| 113 |
+
</p>
|
| 114 |
+
<p>
|
| 115 |
+
Visit our <a href="getting-started.html">Getting Started guide</a> to learn how to install and use MCP in your projects.
|
| 116 |
+
</p>
|
| 117 |
+
</section>
|
| 118 |
+
</main>
|
| 119 |
+
|
| 120 |
+
<footer>
|
| 121 |
+
<div class="container footer-container">
|
| 122 |
+
<div>
|
| 123 |
+
<h4>MCP Resources</h4>
|
| 124 |
+
<ul>
|
| 125 |
+
<li><a href="https://modelcontextprotocol.io" target="_blank">Official Documentation</a></li>
|
| 126 |
+
<li><a href="https://github.com/modelcontextprotocol" target="_blank">GitHub Repository</a></li>
|
| 127 |
+
<li><a href="https://www.anthropic.com/news/model-context-protocol" target="_blank">Anthropic MCP Announcement</a></li>
|
| 128 |
+
</ul>
|
| 129 |
+
</div>
|
| 130 |
+
<div>
|
| 131 |
+
<h4>Learn More</h4>
|
| 132 |
+
<ul>
|
| 133 |
+
<li><a href="about.html">About MCP</a></li>
|
| 134 |
+
<li><a href="architecture.html">Architecture</a></li>
|
| 135 |
+
<li><a href="benefits.html">Benefits</a></li>
|
| 136 |
+
<li><a href="ecosystem.html">Ecosystem</a></li>
|
| 137 |
+
</ul>
|
| 138 |
+
</div>
|
| 139 |
+
<div>
|
| 140 |
+
<h4>Community</h4>
|
| 141 |
+
<ul>
|
| 142 |
+
<li><a href="https://github.com/modelcontextprotocol/discussions" target="_blank">Discussions</a></li>
|
| 143 |
+
<li><a href="https://github.com/modelcontextprotocol/community-servers" target="_blank">Community Servers</a></li>
|
| 144 |
+
</ul>
|
| 145 |
+
</div>
|
| 146 |
+
</div>
|
| 147 |
+
<div class="copyright container">
|
| 148 |
+
<p>© 2025 MCP Information Hub. Model Context Protocol is an open source project developed by Anthropic, PBC.</p>
|
| 149 |
+
</div>
|
| 150 |
+
</footer>
|
| 151 |
+
|
| 152 |
+
<script src="js/main.js"></script>
|
| 153 |
+
</body>
|
| 154 |
+
</html>
|
js/main.js
ADDED
|
@@ -0,0 +1,37 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
// MCP Website JavaScript
|
| 2 |
+
|
| 3 |
+
// Highlight active navigation link based on current page
|
| 4 |
+
document.addEventListener('DOMContentLoaded', () => {
|
| 5 |
+
const currentLocation = window.location.pathname;
|
| 6 |
+
const navLinks = document.querySelectorAll('nav a');
|
| 7 |
+
|
| 8 |
+
navLinks.forEach(link => {
|
| 9 |
+
if (link.getAttribute('href') === currentLocation ||
|
| 10 |
+
(currentLocation.endsWith('/') && link.getAttribute('href') === '/index.html')) {
|
| 11 |
+
link.classList.add('nav-active');
|
| 12 |
+
}
|
| 13 |
+
});
|
| 14 |
+
});
|
| 15 |
+
|
| 16 |
+
// Mobile navigation toggle (if needed for responsive design)
|
| 17 |
+
function toggleMobileNav() {
|
| 18 |
+
const nav = document.querySelector('nav ul');
|
| 19 |
+
nav.classList.toggle('mobile-nav-active');
|
| 20 |
+
}
|
| 21 |
+
|
| 22 |
+
// Smooth scroll to anchor links
|
| 23 |
+
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
| 24 |
+
anchor.addEventListener('click', function(e) {
|
| 25 |
+
e.preventDefault();
|
| 26 |
+
|
| 27 |
+
const targetId = this.getAttribute('href');
|
| 28 |
+
const targetElement = document.querySelector(targetId);
|
| 29 |
+
|
| 30 |
+
if (targetElement) {
|
| 31 |
+
window.scrollTo({
|
| 32 |
+
top: targetElement.offsetTop - 80, // Adjust for header height
|
| 33 |
+
behavior: 'smooth'
|
| 34 |
+
});
|
| 35 |
+
}
|
| 36 |
+
});
|
| 37 |
+
});
|