Spaces:

airabbitX
/

mcp

Running

App Files Files Community

airabbitX commited on May 6

Commit

ab38bab

verified ·

1 Parent(s): f94c05c

Upload 10 files

Browse files

Files changed (10) hide show

README.md +85 -10
code-diagram.svg +208 -0
company-logos.svg +64 -0
deploy.sh +39 -0
favicon.svg +32 -0
index.html +315 -114
mcp-diagram.svg +105 -0
script.js +71 -0
security-diagram.svg +115 -0
styles.css +489 -0

README.md CHANGED Viewed

@@ -1,10 +1,85 @@
----
-title: Mcp
-emoji: 🏆
-colorFrom: green
-colorTo: gray
-sdk: static
-pinned: false
----
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

+# Model Context Protocol (MCP) Website
+This is a comprehensive, technically accurate website about the Model Context Protocol (MCP), the open standard for connecting AI models to external data sources and tools.
+## Website Contents
+- `index.html` - The main HTML structure of the website
+- `styles.css` - CSS styling for the website
+- `script.js` - JavaScript for interactive elements
+- `README.md` - This file with deployment instructions
+## Technical Details
+This website contains factual information about the Model Context Protocol, including:
+- Overview and core purpose of MCP
+- Technical architecture and implementation details
+- Industry adoption across major AI companies
+- Security considerations and best practices
+- Links to official resources and documentation
+## Deployment Instructions
+### Local Testing
+1. Clone or download this repository to your local machine
+2. Open the `index.html` file in a web browser to view the website locally
+### Web Hosting Deployment
+#### Standard Web Hosting:
+1. Upload all files to your web hosting provider via FTP or their control panel
+2. Ensure the files maintain their directory structure
+3. Point your domain to the directory containing these files
+#### GitHub Pages:
+1. Create a new GitHub repository
+2. Push these files to the repository
+3. Go to repository Settings > Pages
+4. Select the main branch as the source
+5. Your site will be published at `https://[username].github.io/[repository-name]`
+#### Vercel or Netlify:
+1. Connect your GitHub repository to Vercel or Netlify
+2. Configure the build settings (not needed for simple static sites)
+3. Deploy the site
+4. Configure your custom domain if desired
+## Customization
+### Google Analytics
+To add Google Analytics:
+1. Open `index.html`
+2. Locate the Google Analytics script section in the `<head>`
+3. Replace `G-XXXXXXXXXX` with your Google Analytics tracking ID
+### Custom Domain
+If you're using a custom domain:
+1. Update all absolute URLs in the website
+2. Update the Open Graph and meta tags with your domain information
+3. Configure your DNS settings according to your hosting provider's instructions
+## SEO Optimization
+The website is already optimized for search engines with:
+- Semantic HTML structure
+- Proper meta tags in the head section
+- Descriptive page titles and headings
+- Mobile-responsive design
+- Fast loading time
+- Proper element hierarchy
+## License and Attribution
+This website template is provided for educational purposes. All references to companies, organizations, and technologies are based on publicly available information.
+The content about the Model Context Protocol is factual and based on public sources. When deploying this website, ensure you comply with all applicable regulations regarding factual representation of technical information.

code-diagram.svg ADDED Viewed

company-logos.svg ADDED Viewed

deploy.sh ADDED Viewed

	@@ -0,0 +1,39 @@

+#!/bin/bash
+# MCP Website Deployment Script
+echo "MCP Website Deployment Tool"
+echo "==========================="
+echo
+# Check for dependencies
+command -v zip >/dev/null 2>&1 || { echo "Error: zip is required but not installed. Aborting."; exit 1; }
+# Create a deployment package
+echo "Creating deployment package..."
+zip -r mcp-website.zip *.html *.css *.js *.svg README.md
+echo "Deployment package created: mcp-website.zip"
+echo
+# Print deployment options
+echo "Deployment Options:"
+echo "------------------"
+echo "1. Standard Web Hosting:"
+echo "   - Upload mcp-website.zip to your web hosting provider"
+echo "   - Extract the files maintaining directory structure"
+echo
+echo "2. GitHub Pages Deployment:"
+echo "   - Create a new GitHub repository"
+echo "   - Push these files to the repository"
+echo "   - Enable GitHub Pages in repository settings"
+echo
+echo "3. Vercel or Netlify Deployment:"
+echo "   - Connect your GitHub repository to Vercel or Netlify"
+echo "   - Configure build settings (not needed for this static site)"
+echo "   - Deploy the site"
+echo
+echo "For all options, you can use your custom domain by configuring DNS settings"
+echo "according to your hosting provider's instructions."
+echo
+echo "Deployment package is ready!"

favicon.svg ADDED Viewed

index.html CHANGED Viewed

@@ -3,152 +3,353 @@
 <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>&copy; 2025 MCP Information Hub. Model Context Protocol is an open source project developed by Anthropic, PBC.</p>
     </div>
   </footer>
-  <script src="js/main.js"></script>
 </body>
 </html>

 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Model Context Protocol (MCP) - The Universal Standard for AI Integration</title>
+  <meta name="description" content="Comprehensive technical guide to the Model Context Protocol (MCP), the open standard for connecting AI models to external data sources and tools.">
+  <meta name="keywords" content="Model Context Protocol, MCP, AI integration, Anthropic, OpenAI, Google, Microsoft, AI tools, LLM connectivity, JSON-RPC">
+  <link rel="stylesheet" href="styles.css">
+  <link rel="icon" href="favicon.svg" type="image/svg+xml">
 </head>
 <body>
   <header>
+    <div class="container">
+      <h1>Model Context Protocol (MCP)</h1>
+      <p class="tagline">The Universal Standard for AI Integration</p>
       <nav>
         <ul>
+          <li><a href="#overview">Overview</a></li>
+          <li><a href="#architecture">Architecture</a></li>
+          <li><a href="#implementation">Implementation</a></li>
+          <li><a href="#adoption">Industry Adoption</a></li>
+          <li><a href="#security">Security</a></li>
+          <li><a href="#resources">Resources</a></li>
         </ul>
       </nav>
     </div>
   </header>
+  <section id="overview" class="container">
+    <h2>What is the Model Context Protocol?</h2>
+    <div class="intro-box">
+      <p>The Model Context Protocol (MCP) is an open standard created by Anthropic in November 2024 that solves the fundamental problem of connecting AI models to external data sources and tools. Often described as the <strong>"USB-C port for AI applications,"</strong> MCP standardizes how AI systems access real-world information and functionality beyond their training data.</p>
+    </div>
+    <div class="two-column">
+      <div class="column">
+        <h3>The Problem MCP Solves</h3>
+        <p>Even the most sophisticated AI models remain isolated from real-time data—trapped behind information silos and legacy systems. MCP transforms what would be an "M×N integration problem" (where M applications must independently connect to N data sources) into a simpler "M+N" problem through a universal interface.</p>
+        <p>Without MCP, developers face:</p>
+        <ul>
+          <li>Building custom integrations for each data source</li>
+          <li>Managing inconsistent implementations across AI platforms</li>
+          <li>Reimplementing similar functionality for each AI service</li>
+        </ul>
+      </div>
+      <div class="column">
+        <h3>Key Capabilities</h3>
+        <p>MCP provides three primary capabilities:</p>
+        <ul>
+          <li><strong>Tools:</strong> Executable functions that models can invoke (similar to function calling)</li>
+          <li><strong>Resources:</strong> Read-only data sources that models can query</li>
+          <li><strong>Prompts:</strong> Pre-defined templates to optimize interactions</li>
+        </ul>
+        <p>These capabilities enable AI models to seamlessly interact with databases, APIs, local files, and other systems while maintaining a consistent implementation pattern.</p>
+      </div>
+    </div>
+    <div class="quote-box">
+      <blockquote>
+        "MCP addresses a fundamental challenge facing AI systems today: even the most sophisticated models remain isolated from real-time data—trapped behind information silos and legacy systems."
+      </blockquote>
+      <cite>— <a href="https://www.anthropic.com/news/model-context-protocol" target="_blank">Anthropic's MCP Announcement</a></cite>
     </div>
   </section>
+  <section id="architecture" class="container alt-bg">
+    <h2>Technical Architecture</h2>
+    <p>MCP follows a client-server architecture with well-defined components and communication patterns.</p>
+    <div class="arch-diagram">
+      <img src="mcp-diagram.svg" alt="MCP Client-Server Architecture Diagram" width="800" height="400">
+      <p class="caption">MCP Client-Server Architecture</p>
+    </div>
+    <div class="components">
+      <div class="component">
+        <h3>MCP Hosts</h3>
+        <p>AI applications like Claude Desktop that need external data access</p>
+      </div>
+      <div class="component">
+        <h3>MCP Clients</h3>
+        <p>Protocol clients that maintain connections with servers</p>
       </div>
+      <div class="component">
+        <h3>MCP Servers</h3>
+        <p>Lightweight programs exposing specific capabilities</p>
+      </div>
+      <div class="component">
+        <h3>Data Sources</h3>
+        <p>Local or remote systems that servers can access</p>
+      </div>
+    </div>
+    <h3>Protocol Details</h3>
+    <ul class="tech-details">
+      <li><strong>Message Protocol:</strong> JSON-RPC 2.0</li>
+      <li><strong>Transport Mechanisms:</strong>
+        <ul>
+          <li>STDIO: For local server communication (running in subprocess)</li>
+          <li>Streamable HTTP: For remote server communication (replaced earlier HTTP+SSE)</li>
+        </ul>
+      </li>
+      <li><strong>Security Model:</strong>
+        <ul>
+          <li>Isolation: Each client maintains a 1:1 relationship with a server</li>
+          <li>Access Control: Servers define capabilities and access boundaries</li>
+          <li>OAuth 2.1 Support: Required for authenticating remote HTTP servers (added March 2025)</li>
+        </ul>
+      </li>
+    </ul>
+    <div class="tech-note">
+      <p><strong>Note:</strong> MCP draws significant inspiration from Microsoft's Language Server Protocol (LSP), adapting many of its concepts to the AI domain while building on proven foundations like JSON-RPC 2.0.</p>
+    </div>
+  </section>
+  <section id="implementation" class="container">
+    <h2>Implementation Guide</h2>
+    <h3>Supported Languages</h3>
+    <p>MCP provides official SDK support for multiple languages:</p>
+    <div class="language-grid">
+      <div class="language">TypeScript/JavaScript</div>
+      <div class="language">Python</div>
+      <div class="language">Java</div>
+      <div class="language">Kotlin</div>
+      <div class="language">C#</div>
+      <div class="language">Swift</div>
+      <div class="language">Rust</div>
+    </div>
+    <h3>TypeScript Example</h3>
+    <div class="diagram-container">
+      <img src="code-diagram.svg" alt="MCP Server Implementation in TypeScript" width="800" height="420" class="code-diagram">
+    </div>
+    <div class="code-block">
+      <pre><code>import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
+import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
+import { z } from "zod";
+// Create an MCP server
+const server = new McpServer({
+  name: "Demo",
+  version: "1.0.0"
 });
+// Add a tool with Zod schema validation
+server.tool(
+  "add",
+  { a: z.number(), b: z.number() },
+  async ({ a, b }) => ({
+    content: [{ type: "text", text: String(a + b) }]
+  })
+);
+// Connect using STDIO transport
+const transport = new StdioServerTransport();
+await server.connect(transport);</code></pre>
+    </div>
+    <h3>Best Practices</h3>
+    <div class="best-practices">
+      <div class="practice">
+        <h4>Tool Design</h4>
+        <ul>
+          <li>Create goal-oriented tools at the right abstraction level</li>
+          <li>Provide clear, descriptive names and documentation</li>
+          <li>Avoid exposing low-level functions directly</li>
+        </ul>
+      </div>
+      <div class="practice">
+        <h4>Security</h4>
+        <ul>
+          <li>Implement OAuth 2.1 for remote server authentication</li>
+          <li>Apply the principle of least privilege to tool permissions</li>
+          <li>Rigorously validate all incoming messages</li>
+          <li>Implement user approval for destructive operations</li>
+        </ul>
+      </div>
+      <div class="practice">
+        <h4>Performance</h4>
+        <ul>
+          <li>Use caching for resource results to reduce redundant operations</li>
+          <li>Prefer Streamable HTTP for remote servers</li>
+          <li>Be mindful of context window sizes when returning large text responses</li>
+        </ul>
+      </div>
+    </div>
+    <div class="resource-link">
+      <a href="https://github.com/modelcontextprotocol/typescript-sdk" target="_blank" class="btn">Official TypeScript SDK</a>
+      <a href="https://github.com/modelcontextprotocol/python-sdk" target="_blank" class="btn">Official Python SDK</a>
+      <a href="https://modelcontextprotocol.io/specification/2025-03-26" target="_blank" class="btn">Full Specification</a>
+    </div>
+  </section>
+  <section id="adoption" class="container alt-bg">
+    <h2>Industry Adoption</h2>
+    <p>Since its introduction, MCP has experienced remarkable adoption across the AI ecosystem, positioning it as the de facto standard for connecting AI models to external tools and data sources.</p>
+    <div class="adoption-grid">
+      <img src="company-logos.svg" alt="Major Companies Supporting MCP" width="800" height="260" class="company-diagram">
+    </div>
+    <h3>Ecosystem Growth</h3>
+    <div class="stats">
+      <div class="stat">
+        <div class="stat-number">250+</div>
+        <div class="stat-label">Distinct MCP Servers Available</div>
+      </div>
+      <div class="stat">
+        <div class="stat-number">1,000+</div>
+        <div class="stat-label">Community-Built Connectors</div>
       </div>
+      <div class="stat">
+        <div class="stat-number">7</div>
+        <div class="stat-label">Official SDK Languages</div>
+      </div>
+    </div>
+    <h3>Development Tools with MCP Support</h3>
+    <div class="tool-list">
+      <div class="tool">Zed</div>
+      <div class="tool">Replit</div>
+      <div class="tool">Codeium</div>
+      <div class="tool">Sourcegraph</div>
+      <div class="tool">Cursor</div>
+    </div>
+  </section>
+  <section id="security" class="container">
+    <h2>Security Considerations</h2>
+    <p>While MCP offers significant benefits for AI capabilities and alignment, security researchers have identified several critical vulnerabilities that must be addressed as the protocol matures.</p>
+    <div class="security-diagram">
+      <img src="security-diagram.svg" alt="MCP Security Vulnerabilities and Mitigations" width="800" height="400">
+    </div>
+    <div class="security-warning">
+      <h3>Known Vulnerabilities</h3>
+      <ul>
+        <li><strong>Tool poisoning attacks:</strong> Malicious instructions embedded in tool descriptions can cause AI systems to leak sensitive data</li>
+        <li><strong>MCP rug pulls:</strong> Servers can change their tool definitions after installation, potentially introducing malicious functionality</li>
+        <li><strong>Cross-server tool shadowing:</strong> Malicious servers can override legitimate tools from other servers</li>
+      </ul>
+    </div>
+    <h3>Mitigation Strategies</h3>
+    <div class="mitigation-grid">
+      <div class="strategy">
+        <h4>Tool Verification</h4>
+        <p>Implement cryptographic verification of tool definitions and pin trusted tool versions</p>
+      </div>
+      <div class="strategy">
+        <h4>UI Transparency</h4>
+        <p>Improve visibility into tool operations and show tool descriptions to users</p>
+      </div>
+      <div class="strategy">
+        <h4>Cross-Origin Protections</h4>
+        <p>Implement strict protections against cross-origin resource sharing vulnerabilities</p>
+      </div>
+      <div class="strategy">
+        <h4>Security Scanning</h4>
+        <p>Develop automated tools to scan MCP servers for potential security issues</p>
+      </div>
+    </div>
+    <div class="security-resources">
+      <h3>Security Research</h3>
+      <ul>
+        <li><a href="https://arxiv.org/abs/2504.03767" target="_blank">MCP Safety Audit: LLMs with the Model Context Protocol Allow Major Security Exploits</a></li>
+        <li><a href="https://www.wiz.io/blog/mcp-security-research-briefing" target="_blank">MCP and LLM Security Research Briefing</a></li>
+        <li><a href="https://github.com/slowmist/MCP-Security-Checklist" target="_blank">SlowMist MCP Security Checklist</a></li>
+      </ul>
+    </div>
+  </section>
+  <section id="resources" class="container alt-bg">
+    <h2>Additional Resources</h2>
+    <div class="resource-categories">
+      <div class="resource-category">
+        <h3>Official Resources</h3>
         <ul>
+          <li><a href="https://www.anthropic.com/news/model-context-protocol" target="_blank">Anthropic's MCP Announcement</a></li>
+          <li><a href="https://modelcontextprotocol.io/specification/2025-03-26" target="_blank">MCP Specification (March 2025)</a></li>
+          <li><a href="https://github.com/modelcontextprotocol" target="_blank">Official GitHub Organization</a></li>
+          <li><a href="https://modelcontextprotocol.io/development/roadmap" target="_blank">MCP Development Roadmap</a></li>
         </ul>
       </div>
+      <div class="resource-category">
+        <h3>Implementation Guides</h3>
         <ul>
+          <li><a href="https://github.com/cyanheads/model-context-protocol-resources" target="_blank">Comprehensive MCP Resources</a></li>
+          <li><a href="https://www.philschmid.de/mcp-introduction" target="_blank">MCP Technical Overview</a></li>
+          <li><a href="https://dev.to/tak089/what-is-model-context-protocol-mcp-and-why-is-it-trending-in-2025-14lc" target="_blank">MCP Trends in 2025</a></li>
+          <li><a href="https://github.com/ivo-toby/mcp-openapi-server" target="_blank">OpenAPI to MCP Server Converter</a></li>
         </ul>
       </div>
+      <div class="resource-category">
+        <h3>Comparison with Alternatives</h3>
         <ul>
+          <li><a href="https://mcpa2a.com/" target="_blank">MCP vs A2A Protocol Comparison</a></li>
+          <li><a href="https://blog.fotiecodes.com/function-calling-vs-model-context-protocol-mcp-what-you-need-to-know-cm88zfwik000108ji0a1d54fc" target="_blank">Function Calling vs. MCP</a></li>
+          <li><a href="https://norahsakal.com/blog/mcp-vs-api-model-context-protocol-explained/" target="_blank">MCP vs Traditional APIs</a></li>
         </ul>
       </div>
     </div>
+    <div class="newsletter">
+      <h3>Stay Updated on MCP Developments</h3>
+      <p>Subscribe to our newsletter for the latest MCP news, implementation guides, and security updates.</p>
+      <form id="newsletter-form">
+        <input type="email" placeholder="Your email address" required>
+        <button type="submit" class="btn">Subscribe</button>
+      </form>
+    </div>
+  </section>
+  <footer>
+    <div class="container">
+      <div class="footer-content">
+        <div class="footer-section">
+          <h3>Model Context Protocol (MCP)</h3>
+          <p>The universal standard for connecting AI models to external data sources and tools.</p>
+        </div>
+        <div class="footer-section">
+          <h3>Important Links</h3>
+          <ul>
+            <li><a href="https://www.anthropic.com/news/model-context-protocol" target="_blank">Official MCP Site</a></li>
+            <li><a href="https://github.com/modelcontextprotocol" target="_blank">GitHub</a></li>
+            <li><a href="https://modelcontextprotocol.io/specification/2025-03-26" target="_blank">Specification</a></li>
+          </ul>
+        </div>
+        <div class="footer-section">
+          <h3>Connect</h3>
+          <ul class="social-links">
+            <li><a href="#" target="_blank">Twitter</a></li>
+            <li><a href="#" target="_blank">LinkedIn</a></li>
+            <li><a href="#" target="_blank">GitHub</a></li>
+          </ul>
+        </div>
+      </div>
+      <div class="copyright">
+        <p>&copy; 2025 MCP Resource Hub. All information based on public sources. Not affiliated with Anthropic, Inc.</p>
+        <p>Last updated: May 6, 2025</p>
+      </div>
     </div>
   </footer>
+  <script src="script.js"></script>
 </body>
 </html>

mcp-diagram.svg ADDED Viewed

script.js ADDED Viewed

	@@ -0,0 +1,71 @@

+// MCP Website JavaScript
+document.addEventListener('DOMContentLoaded', function() {
+  // Newsletter subscription form
+  const newsletterForm = document.getElementById('newsletter-form');
+  if (newsletterForm) {
+    newsletterForm.addEventListener('submit', function(e) {
+      e.preventDefault();
+      const email = this.querySelector('input[type="email"]').value;
+      // In a real implementation, this would send the email to a server
+      // For demonstration purposes, we'll show an alert
+      alert(`Thank you for subscribing with ${email}! You'll receive MCP updates soon.`);
+      this.reset();
+    });
+  }
+  // Smooth scrolling for navigation links
+  const navLinks = document.querySelectorAll('nav a[href^="#"]');
+  navLinks.forEach(link => {
+    link.addEventListener('click', function(e) {
+      e.preventDefault();
+      const targetId = this.getAttribute('href');
+      const targetElement = document.querySelector(targetId);
+      if (targetElement) {
+        window.scrollTo({
+          top: targetElement.offsetTop - 80,
+          behavior: 'smooth'
+        });
+      }
+    });
+  });
+  // Add active class to navigation items on scroll
+  const sections = document.querySelectorAll('section[id]');
+  window.addEventListener('scroll', function() {
+    const scrollPosition = window.scrollY + 150;
+    sections.forEach(section => {
+      const sectionTop = section.offsetTop;
+      const sectionHeight = section.offsetHeight;
+      const sectionId = section.getAttribute('id');
+      if (scrollPosition >= sectionTop && scrollPosition < sectionTop + sectionHeight) {
+        document.querySelector(`nav a[href="#${sectionId}"]`).classList.add('active');
+      } else {
+        document.querySelector(`nav a[href="#${sectionId}"]`).classList.remove('active');
+      }
+    });
+  });
+  // Create a simple syntax highlighting effect for code blocks
+  const codeBlocks = document.querySelectorAll('pre code');
+  codeBlocks.forEach(block => {
+    // Simple keyword highlighting
+    const keywords = ['import', 'const', 'let', 'var', 'function', 'return', 'async', 'await', 'new', 'class'];
+    const punctuation = ['{', '}', '[', ']', '(', ')', ',', ';', '.', ':'];
+    const strings = ['"', "'", '`'];
+    // Get the text content
+    let content = block.textContent;
+    // This is a very simple implementation - in a real-world scenario,
+    // you would use a proper syntax highlighting library like Prism.js or highlight.js
+    // For now, we'll just add a CSS class to the block to enable some basic styling
+    block.classList.add('syntax-highlighted');
+  });
+});

security-diagram.svg ADDED Viewed

styles.css ADDED Viewed

	@@ -0,0 +1,489 @@

+/* Base styles */
+:root {
+  --primary-color: #4a6cf7;
+  --secondary-color: #7e53f1;
+  --accent-color: #ff594f;
+  --text-color: #333;
+  --text-light: #666;
+  --background-light: #f8f9fc;
+  --background-dark: #161c2d;
+  --box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
+  --border-radius: 8px;
+  --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  --font-mono: 'JetBrains Mono', monospace;
+}
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+html {
+  scroll-behavior: smooth;
+}
+body {
+  font-family: var(--font-sans);
+  line-height: 1.6;
+  color: var(--text-color);
+  background-color: #fff;
+}
+.container {
+  width: 90%;
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 40px 0;
+}
+h1, h2, h3, h4, h5, h6 {
+  margin-bottom: 1rem;
+  line-height: 1.3;
+  font-weight: 700;
+}
+h1 {
+  font-size: 2.5rem;
+}
+h2 {
+  font-size: 2rem;
+}
+h3 {
+  font-size: 1.5rem;
+}
+p {
+  margin-bottom: 1.5rem;
+}
+a {
+  color: var(--primary-color);
+  text-decoration: none;
+}
+a:hover {
+  text-decoration: underline;
+}
+ul, ol {
+  margin-bottom: 1.5rem;
+  padding-left: 1.5rem;
+}
+.btn {
+  display: inline-block;
+  padding: 0.75rem 1.5rem;
+  background-color: var(--primary-color);
+  color: white;
+  border-radius: var(--border-radius);
+  text-decoration: none;
+  font-weight: 600;
+  transition: all 0.3s ease;
+}
+.btn:hover {
+  background-color: var(--secondary-color);
+  text-decoration: none;
+  transform: translateY(-2px);
+}
+.alt-bg {
+  background-color: var(--background-light);
+}
+/* Header */
+header {
+  background: linear-gradient(135deg, var(--background-dark) 0%, #233152 100%);
+  color: white;
+  padding: 20px 0;
+}
+header h1 {
+  margin-bottom: 0.25rem;
+}
+.tagline {
+  font-size: 1.25rem;
+  margin-bottom: 2rem;
+  opacity: 0.9;
+}
+nav ul {
+  display: flex;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+nav ul li {
+  margin-right: 1.5rem;
+}
+nav ul li a {
+  color: white;
+  text-decoration: none;
+  font-weight: 500;
+  padding: 0.5rem 0;
+  transition: all 0.3s ease;
+}
+nav ul li a:hover {
+  color: var(--accent-color);
+}
+/* Overview section */
+.intro-box {
+  background-color: var(--background-light);
+  border-left: 5px solid var(--primary-color);
+  padding: 1.5rem;
+  margin-bottom: 2rem;
+  border-radius: 0 var(--border-radius) var(--border-radius) 0;
+}
+.two-column {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 2rem;
+}
+.quote-box {
+  background-color: rgba(74, 108, 247, 0.1);
+  padding: 2rem;
+  border-radius: var(--border-radius);
+  margin: 2rem 0;
+}
+blockquote {
+  font-style: italic;
+  font-size: 1.15rem;
+  margin-bottom: 1rem;
+}
+cite {
+  font-style: normal;
+  font-weight: 600;
+  font-size: 0.9rem;
+}
+/* Architecture section */
+.arch-diagram {
+  background-color: white;
+  border: 1px solid #ddd;
+  border-radius: var(--border-radius);
+  padding: 1rem;
+  margin: 2rem 0;
+  text-align: center;
+}
+.diagram-placeholder {
+  background-color: #eee;
+  padding: 8rem 0;
+  margin-bottom: 1rem;
+  border-radius: var(--border-radius);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-weight: bold;
+  color: #666;
+}
+.caption {
+  font-size: 0.9rem;
+  color: var(--text-light);
+  margin-top: 0.5rem;
+}
+.components {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 1.5rem;
+  margin: 2rem 0;
+}
+.component {
+  background-color: white;
+  padding: 1.5rem;
+  border-radius: var(--border-radius);
+  box-shadow: var(--box-shadow);
+}
+.tech-details {
+  background-color: white;
+  padding: 1.5rem;
+  border-radius: var(--border-radius);
+  box-shadow: var(--box-shadow);
+  margin: 2rem 0;
+}
+.tech-note {
+  background-color: rgba(255, 89, 79, 0.1);
+  padding: 1rem;
+  border-radius: var(--border-radius);
+  margin-top: 2rem;
+}
+/* Implementation section */
+.language-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+  gap: 1rem;
+  margin-bottom: 2rem;
+}
+.language {
+  background-color: var(--background-light);
+  padding: 1rem;
+  border-radius: var(--border-radius);
+  text-align: center;
+  font-weight: 600;
+}
+.code-block {
+  background-color: var(--background-dark);
+  border-radius: var(--border-radius);
+  overflow: hidden;
+  margin: 2rem 0;
+}
+pre {
+  padding: 1.5rem;
+  overflow-x: auto;
+}
+code {
+  font-family: var(--font-mono);
+  color: #e0e0e0;
+  font-size: 0.9rem;
+}
+.best-practices {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 1.5rem;
+  margin: 2rem 0;
+}
+.practice {
+  background-color: white;
+  padding: 1.5rem;
+  border-radius: var(--border-radius);
+  box-shadow: var(--box-shadow);
+}
+.resource-link {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+  margin: 2rem 0;
+}
+/* Adoption section */
+.adoption-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 2rem;
+  margin: 2rem 0;
+}
+.company {
+  background-color: white;
+  padding: 1.5rem;
+  border-radius: var(--border-radius);
+  box-shadow: var(--box-shadow);
+  text-align: center;
+}
+.company-logo {
+  height: 100px;
+  background-color: #eee;
+  border-radius: var(--border-radius);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: 1rem;
+  font-weight: bold;
+  font-size: 1.2rem;
+}
+.stats {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 2rem;
+  margin: 2rem 0;
+  text-align: center;
+}
+.stat-number {
+  font-size: 3rem;
+  font-weight: 700;
+  color: var(--primary-color);
+  line-height: 1.2;
+}
+.stat-label {
+  font-size: 1rem;
+  color: var(--text-light);
+}
+.tool-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+  margin: 2rem 0;
+}
+.tool {
+  background-color: var(--background-light);
+  padding: 0.75rem 1.5rem;
+  border-radius: var(--border-radius);
+  font-weight: 600;
+}
+/* Security section */
+.security-warning {
+  background-color: rgba(255, 89, 79, 0.1);
+  padding: 1.5rem;
+  border-radius: var(--border-radius);
+  margin: 2rem 0;
+  border-left: 5px solid var(--accent-color);
+}
+.mitigation-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 1.5rem;
+  margin: 2rem 0;
+}
+.strategy {
+  background-color: white;
+  padding: 1.5rem;
+  border-radius: var(--border-radius);
+  box-shadow: var(--box-shadow);
+}
+.security-resources {
+  background-color: var(--background-light);
+  padding: 1.5rem;
+  border-radius: var(--border-radius);
+  margin: 2rem 0;
+}
+/* Resources section */
+.resource-categories {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 2rem;
+  margin: 2rem 0;
+}
+.resource-category {
+  background-color: white;
+  padding: 1.5rem;
+  border-radius: var(--border-radius);
+  box-shadow: var(--box-shadow);
+}
+.newsletter {
+  background-color: var(--secondary-color);
+  color: white;
+  padding: 2rem;
+  border-radius: var(--border-radius);
+  margin-top: 3rem;
+}
+.newsletter h3 {
+  margin-bottom: 1rem;
+}
+#newsletter-form {
+  display: flex;
+  gap: 1rem;
+  margin-top: 1.5rem;
+}
+#newsletter-form input {
+  flex: 1;
+  padding: 0.75rem 1rem;
+  border: none;
+  border-radius: var(--border-radius);
+  font-size: 1rem;
+}
+#newsletter-form .btn {
+  background-color: var(--accent-color);
+}
+#newsletter-form .btn:hover {
+  background-color: #e4483f;
+}
+/* Footer */
+footer {
+  background-color: var(--background-dark);
+  color: white;
+  padding: 3rem 0;
+}
+.footer-content {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 2rem;
+  margin-bottom: 2rem;
+}
+.footer-section h3 {
+  margin-bottom: 1.5rem;
+  color: white;
+}
+.footer-section ul {
+  list-style: none;
+  padding: 0;
+}
+.footer-section ul li {
+  margin-bottom: 0.5rem;
+}
+.footer-section a {
+  color: #a0b4fe;
+}
+.copyright {
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+  padding-top: 2rem;
+  text-align: center;
+  color: rgba(255, 255, 255, 0.6);
+  font-size: 0.9rem;
+}
+/* Responsive styles */
+@media (max-width: 768px) {
+  h1 {
+    font-size: 2rem;
+  }
+  h2 {
+    font-size: 1.75rem;
+  }
+  .two-column {
+    grid-template-columns: 1fr;
+  }
+  nav ul {
+    flex-direction: column;
+  }
+  nav ul li {
+    margin-bottom: 0.5rem;
+  }
+  #newsletter-form {
+    flex-direction: column;
+  }
+}