基于Python+Flask的MCP SDK响应式文档展示系统设计与实现

以下是使用Python + Flask + HTML实现的MCP文档展示系统:

# 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)

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 Documentationtitle>
    <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 SDKa>
            <div class="collapse navbar-collapse">
                <ul class="navbar-nav me-auto">
                    <li class="nav-item"><a class="nav-link" href="/">Overviewa>li>
                    <li class="nav-item"><a class="nav-link" href="/installation">Installationa>li>
                    <li class="nav-item"><a class="nav-link" href="/core-concepts">Core Conceptsa>li>
                    <li class="nav-item"><a class="nav-link" href="/examples">Examplesa>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>

{% extends "base.html" %}

{% block content %}
<h1>MCP Python SDKh1>
<div class="card mt-4">
    <div class="card-body">
        <h5 class="card-title">Overviewh5>
        <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 serverli>
            <li>Creating MCP servers exposing resources and toolsli>
            <li>Using standard transports like stdio and SSEli>
            <li>Handling all MCP protocol messagesli>
        ul>
    div>
div>

<div class="card mt-4">
    <div class="card-body">
        <h5 class="card-title">Quickstarth5>
        <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 %}

{% extends "base.html" %}

{% block content %}
<h2>Installationh2>
<div class="card mt-4">
    <div class="card-body">
        <h5 class="card-title">Using uvh5>
        <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 piph5>
        <pre><code class="language-bash">pip install mcpcode>pre>
    div>
div>

<div class="card mt-4">
    <div class="card-body">
        <h5 class="card-title">Running Development Toolsh5>
        <pre><code class="language-bash">mcp dev server.pycode>pre>
    div>
div>
{% endblock %}

{% extends "base.html" %}

{% block content %}
<h2>Core Conceptsh2>

<div class="card mt-4">
    <div class="card-body">
        <h5 class="card-title">Serverh5>
        <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">Resourcesh5>
        <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">Toolsh5>
        <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 %}

{% extends "base.html" %}

{% block content %}
<h2>Examplesh2>

<div class="card mt-4">
    <div class="card-body">
        <h5 class="card-title">Echo Serverh5>
        <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 Explorerh5>
        <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 %}

这个实现包含以下特点:

  1. 使用Bootstrap进行响应式布局
  2. 导航栏包含主要文档部分
  3. 代码高亮显示(需要额外添加prism.js等库)
  4. 卡片式内容展示
  5. 主要功能模块分页展示
  6. 代码示例直接来自原始文档内容
  7. 使用Flask模板继承实现布局复用

要运行这个应用:

  1. 安装依赖:pip install flask
  2. 创建模板文件夹和上述HTML文件
  3. 运行python app.py
  4. 访问http://localhost:5000

可以通过以下方式进一步改进:

  1. 添加代码语法高亮支持
  2. 实现搜索功能
  3. 添加更多交互式示例
  4. 集成实际MCP服务器演示
  5. 添加侧边栏导航
  6. 实现暗黑模式切换
  7. 添加文档版本切换功能
    基于Python+Flask的MCP SDK响应式文档展示系统设计与实现_第1张图片

你可能感兴趣的:(python,flask,开发语言,MCP)