MCP Dynamic Html App

🚀 MCP动态HTML应用程序

一个基于Python的模型上下文协议（MCP）服务器，演示 实时数据的动态HTML渲染 用于ChatGPT应用程序。

🎯 这有什么作用

此应用程序展示了如何构建 动态ChatGPT应用程序 哪里：

• HTML基于以下内容呈现 实时数据 （非静态资产）
• 数据从模拟数据库中提取
• 内容根据用户查询动态更改
• 非常适合仪表板、报告和数据可视化

🏗️ 建筑

基于 服务器端动态HTML渲染 图案：

ChatGPT → MCP Tool Call → Python Server → Fetch DB Data → Render HTML → Return to ChatGPT

📦 特性

✅ 三种动态工具：

1. get_dynamic_dashboard -具有主题支持的实时指标仪表板
2. get_user_profile -带有实时数据的用户资料卡
3. get_metrics_table -交互式数据表（销售、绩效、参与度）

✅ 模拟数据库 -无需设置，开箱即用

✅ 漂亮的HTML -使用CSS的现代、响应式设计

✅ 轻松部署 -部署到Railway、Render或任何Python宿主

🚀 快速开始

1.克隆存储库

git clone https://github.com/vikkysarswat/mcp-dynamic-html-app.git
cd mcp-dynamic-html-app

2.安装依赖项

pip install -r requirements.txt

3.运行服务器

python server.py

🔧 如何使用

使用克劳德桌面（推荐）

添加到您的 claude_desktop_config.json:

{
  "mcpServers": {
    "dynamic-html": {
      "command": "python",
      "args": ["/path/to/mcp-dynamic-html-app/server.py"]
    }
  }
}

示例提示

"Show me the dashboard"
"Get user profile for user_001"
"Display sales metrics table"
"Show me performance metrics with dark theme"

📁 项目结构

mcp-dynamic-html-app/
├── server.py           # Main MCP server with tool definitions
├── database.py         # Simulated database with sample data
├── html_renderer.py    # HTML rendering templates
├── requirements.txt    # Python dependencies
└── README.md          # This file

🛠️ 定制

添加您自己的数据源

替换中的模拟数据库 database.py:

import sqlite3

async def get_user_data(user_id: str):
    conn = sqlite3.connect('your_database.db')
    cursor = conn.cursor()
    cursor.execute("SELECT * FROM users WHERE id = ?", (user_id,))
    return cursor.fetchone()

创建自定义HTML模板

在中添加新的渲染函数 html_renderer.py:

def render_custom_view(data):
    return f"""
    
    
        
    
    """

添加新工具

在中扩展工具列表 server.py:

@server.list_tools()
async def handle_list_tools():
    return [
        # ... existing tools
        types.Tool(
            name="your_custom_tool",
            description="Your tool description",
            inputSchema={...}
        )
    ]

🚢 部署选项

部署到铁路

1. 分叉此存储库
2. 首选 Railway.app
3. 点击“新建项目”→ “从GitHub部署”
4. 选择此存储库
5. Railway将自动检测Python并部署

部署以渲染

1. 首选 Render.com
2. 点击“新建”→ “后台工作人员”
3. 连接您的GitHub存储库
4. 设置构建命令： pip install -r requirements.txt
5. 设置启动命令： python server.py

部署到Heroku

heroku create your-app-name
git push heroku main

📊 示例用例

• 业务仪表板 -实时KPI和指标
• 用户管理 -动态用户配置文件和列表
• 数据报告 -交互式表格和图表
• 分析视图 -绩效和参与度跟踪
• 管理面板 -系统监控和警报

🧪 测试

直接测试工具：

import asyncio
from database import get_user_data
from html_renderer import render_user_card

async def test():
    user = await get_user_data("user_001")
    html = render_user_card(user)
    print(html)

asyncio.run(test())

📚 了解更多

• MCP文件
• 克劳德·艾
• MCP Python SDK

🤝 贡献

欢迎投稿！请随意：

• 添加新的HTML模板
• 创建其他工具
• 改进数据库层
• 添加测试

📄 许可证

麻省理工学院许可证-请在您的项目中自由使用！

🎉 鸣谢

由Nilesh Vikky基于MCP动态HTML渲染模式创建。

______________________________________________________________________

幸福大厦！ 🚀

如果您有疑问或需要帮助，请提出问题或联系我们！