以下是使用Python + Flask + HTML實現的MCP文檔展示系統：
# app.py
from flask import Flask, render_templateapp = Flask(__name__)@app.route('/')
def index():return render_template('index.html')@app.route('/installation')
def installation():return render_template('installation.html')@app.route('/core-concepts')
def core_concepts():return render_template('core_concepts.html')@app.route('/examples')
def examples():return render_template('examples.html')if __name__ == '__main__':app.run(debug=True)
<!-- templates/base.html -->
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>MCP Python SDK Documentation</title><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body><nav class="navbar navbar-expand-lg navbar-dark bg-dark"><div class="container"><a class="navbar-brand" href="/">MCP SDK</a><div class="collapse navbar-collapse"><ul class="navbar-nav me-auto"><li class="nav-item"><a class="nav-link" href="/">Overview</a></li><li class="nav-item"><a class="nav-link" href="/installation">Installation</a></li><li class="nav-item"><a class="nav-link" href="/core-concepts">Core Concepts</a></li><li class="nav-item"><a class="nav-link" href="/examples">Examples</a></li></ul></div></div></nav><div class="container mt-4">{% block content %}{% endblock %}</div><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
<!-- templates/index.html -->
{% extends "base.html" %}{% block content %}
<h1>MCP Python SDK</h1>
<div class="card mt-4"><div class="card-body"><h5 class="card-title">Overview</h5><p class="card-text">The Model Context Protocol (MCP) allows applications to provide context for LLMs in a standardized way.This Python SDK implements the full MCP specification, enabling:</p><ul><li>Building MCP clients connecting to any MCP server</li><li>Creating MCP servers exposing resources and tools</li><li>Using standard transports like stdio and SSE</li><li>Handling all MCP protocol messages</li></ul></div>
</div><div class="card mt-4"><div class="card-body"><h5 class="card-title">Quickstart</h5><pre><code class="language-python"># server.py
from mcp.server.fastmcp import FastMCPmcp = FastMCP("Demo")@mcp.tool()
def add(a: int, b: int) -> int:return a + b@mcp.resource("greeting://(name)")
def get_greeting(name: str) -> str:return f"Hello, {name}!"</code></pre></div>
</div>
{% endblock %}
<!-- templates/installation.html -->
{% extends "base.html" %}{% block content %}
<h2>Installation</h2>
<div class="card mt-4"><div class="card-body"><h5 class="card-title">Using uv</h5><pre><code class="language-bash">uv add "mcp[cli]"</code></pre></div>
</div><div class="card mt-4"><div class="card-body"><h5 class="card-title">Using pip</h5><pre><code class="language-bash">pip install mcp</code></pre></div>
</div><div class="card mt-4"><div class="card-body"><h5 class="card-title">Running Development Tools</h5><pre><code class="language-bash">mcp dev server.py</code></pre></div>
</div>
{% endblock %}
<!-- templates/core_concepts.html -->
{% extends "base.html" %}{% block content %}
<h2>Core Concepts</h2><div class="card mt-4"><div class="card-body"><h5 class="card-title">Server</h5><pre><code class="language-python">from mcp.server.fastmcp import FastMCPmcp = FastMCP("My App")</code></pre></div>
</div><div class="card mt-4"><div class="card-body"><h5 class="card-title">Resources</h5><pre><code class="language-python">@mcp.resource("users://(user_id)/profile")
def get_user_profile(user_id: str) -> str:return f"Profile data for user {user_id}"</code></pre></div>
</div><div class="card mt-4"><div class="card-body"><h5 class="card-title">Tools</h5><pre><code class="language-python">@mcp.tool()
def calculate_bmi(weight_kg: float, height_m: float) -> float:return weight_kg / (height_m**2)</code></pre></div>
</div>
{% endblock %}
<!-- templates/examples.html -->
{% extends "base.html" %}{% block content %}
<h2>Examples</h2><div class="card mt-4"><div class="card-body"><h5 class="card-title">Echo Server</h5><pre><code class="language-python">@mcp.resource("echo://(message)")
def echo_resource(message: str) -> str:return f"Resource echo: {message}"</code></pre></div>
</div><div class="card mt-4"><div class="card-body"><h5 class="card-title">SQLite Explorer</h5><pre><code class="language-python">@mcp.tool()
def query_data(sql: str) -> str:conn = sqlite3.connect("database.db")result = conn.execute(sql).fetchall()return "\n".join(str(row) for row in result)</code></pre></div>
</div>
{% endblock %}
這個實現包含以下特點：
- 使用Bootstrap進行響應式布局
- 導航欄包含主要文檔部分
- 代碼高亮顯示（需要額外添加prism.js等庫）
- 卡片式內容展示
- 主要功能模塊分頁展示
- 代碼示例直接來自原始文檔內容
- 使用Flask模板繼承實現布局復用
要運行這個應用：
- 安裝依賴：
pip install flask - 創建模板文件夾和上述HTML文件
- 運行
python app.py - 訪問http://localhost:5000
可以通過以下方式進一步改進：
- 添加代碼語法高亮支持
- 實現搜索功能
- 添加更多交互式示例
- 集成實際MCP服務器演示
- 添加側邊欄導航
- 實現暗黑模式切換
- 添加文檔版本切換功能
