以下是使用Python + Flask + HTML实现的MCP文档展示系统：
python
# app.py
from flask import Flask, render_template
app = 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)
html
<!-- 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/[email protected]/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/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
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 FastMCP
mcp = 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 %}
html
<!-- 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 %}
html
<!-- 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 FastMCP
mcp = 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 %}
html
<!-- 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服务器演示
- 添加侧边栏导航
- 实现暗黑模式切换
- 添加文档版本切换功能
