基于Python+Flask的MCP SDK响应式文档展示系统设计与实现
以下是使用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服务器演示
- 添加侧边栏导航
- 实现暗黑模式切换
- 添加文档版本切换功能
