|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Model Context Protocol (MCP) - Connecting AI Models to Data and Tools</title> |
|
|
<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."> |
|
|
<link rel="stylesheet" href="css/styles.css"> |
|
|
<link rel="preconnect" href="https://fonts.googleapis.com"> |
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> |
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet"> |
|
|
</head> |
|
|
<body> |
|
|
<header> |
|
|
<div class="container header-container"> |
|
|
<a href="index.html" class="logo">MCP<span>Hub</span></a> |
|
|
<nav> |
|
|
<ul> |
|
|
<li><a href="index.html">Home</a></li> |
|
|
<li><a href="about.html">About</a></li> |
|
|
<li><a href="architecture.html">Architecture</a></li> |
|
|
<li><a href="benefits.html">Benefits</a></li> |
|
|
<li><a href="ecosystem.html">Ecosystem</a></li> |
|
|
<li><a href="getting-started.html">Get Started</a></li> |
|
|
<li><a href="faq.html">FAQ</a></li> |
|
|
</ul> |
|
|
</nav> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
<section class="hero"> |
|
|
<div class="container"> |
|
|
<h1>Model Context Protocol (MCP)</h1> |
|
|
<p>An open standard for connecting AI models to data sources and tools</p> |
|
|
<a href="getting-started.html" class="cta-button">Get Started</a> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
<main class="container"> |
|
|
<section> |
|
|
<h2>What is Model Context Protocol?</h2> |
|
|
<p> |
|
|
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. |
|
|
</p> |
|
|
<p> |
|
|
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. |
|
|
</p> |
|
|
</section> |
|
|
|
|
|
<section> |
|
|
<h2>Key Features</h2> |
|
|
<div class="card-container"> |
|
|
<div class="card"> |
|
|
<div class="card-icon">🔌</div> |
|
|
<h3>Universal Connectivity</h3> |
|
|
<p>Connect any AI model to any data source or tool using a standardized protocol, eliminating the need for custom integrations.</p> |
|
|
</div> |
|
|
<div class="card"> |
|
|
<div class="card-icon">🔒</div> |
|
|
<h3>Secure Architecture</h3> |
|
|
<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> |
|
|
</div> |
|
|
<div class="card"> |
|
|
<div class="card-icon">🧩</div> |
|
|
<h3>Tool Integration</h3> |
|
|
<p>Enable AI models to use external tools and services through a standardized interface for actions like file operations, API calls, and more.</p> |
|
|
</div> |
|
|
<div class="card"> |
|
|
<div class="card-icon">🌐</div> |
|
|
<h3>Open Standard</h3> |
|
|
<p>As an open protocol, MCP can be implemented by any organization or developer, fostering a collaborative ecosystem.</p> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
<section class="two-column"> |
|
|
<div> |
|
|
<h2>How MCP Works</h2> |
|
|
<p> |
|
|
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. |
|
|
</p> |
|
|
<p> |
|
|
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. |
|
|
</p> |
|
|
<a href="architecture.html" class="cta-button">Learn More About MCP Architecture</a> |
|
|
</div> |
|
|
<div> |
|
|
<pre><code>// Example MCP client-server interaction |
|
|
const mcpClient = new MCPClient(); |
|
|
|
|
|
// Connect to an MCP server |
|
|
await mcpClient.connect({ |
|
|
transport: "stdio", |
|
|
command: "npx", |
|
|
args: ["@modelcontextprotocol/server-filesystem"] |
|
|
}); |
|
|
|
|
|
// List available tools |
|
|
const tools = await mcpClient.listTools(); |
|
|
|
|
|
// Use a tool from the server |
|
|
const result = await mcpClient.callTool({ |
|
|
name: "readFile", |
|
|
parameters: { path: "/path/to/file.txt" } |
|
|
});</code></pre> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
<section> |
|
|
<h2>Getting Started with MCP</h2> |
|
|
<p> |
|
|
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. |
|
|
</p> |
|
|
<p> |
|
|
Visit our <a href="getting-started.html">Getting Started guide</a> to learn how to install and use MCP in your projects. |
|
|
</p> |
|
|
</section> |
|
|
</main> |
|
|
|
|
|
<footer> |
|
|
<div class="container footer-container"> |
|
|
<div> |
|
|
<h4>MCP Resources</h4> |
|
|
<ul> |
|
|
<li><a href="https://modelcontextprotocol.io" target="_blank">Official Documentation</a></li> |
|
|
<li><a href="https://github.com/modelcontextprotocol" target="_blank">GitHub Repository</a></li> |
|
|
<li><a href="https://www.anthropic.com/news/model-context-protocol" target="_blank">Anthropic MCP Announcement</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h4>Learn More</h4> |
|
|
<ul> |
|
|
<li><a href="about.html">About MCP</a></li> |
|
|
<li><a href="architecture.html">Architecture</a></li> |
|
|
<li><a href="benefits.html">Benefits</a></li> |
|
|
<li><a href="ecosystem.html">Ecosystem</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h4>Community</h4> |
|
|
<ul> |
|
|
<li><a href="https://github.com/modelcontextprotocol/discussions" target="_blank">Discussions</a></li> |
|
|
<li><a href="https://github.com/modelcontextprotocol/community-servers" target="_blank">Community Servers</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
<div class="copyright container"> |
|
|
<p>© 2025 MCP Information Hub. Model Context Protocol is an open source project developed by Anthropic, PBC.</p> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script src="js/main.js"></script> |
|
|
</body> |
|
|
</html> |
