htmlgen-mcp 0.5.3

AI-powered HTML website generator with auto-upload functionality via Model Context Protocol

HTML Generator MCP

一个基于 Model Context Protocol (MCP) 的智能网页生成服务，支持AI驱动的网站创建、实时进度追踪和自动部署功能。

✨ 主要特性

• 🤖 AI驱动生成: 使用大语言模型智能分析需求，生成个性化网站
• ⚡ Generative UI: 基于 Google Research 论文，单次调用生成完整交互式应用
• 📊 实时进度追踪: 支持任务状态监控和进度查询
• 🚀 自动部署上传: 构建完成后自动打包上传到云端
• 🎨 现代化设计: 响应式布局，支持移动端适配
• 🔧 灵活配置: 支持多种模型和自定义配置

🚀 快速开始

安装

pip install agent-mcp

基本使用

1. 创建网站计划

import asyncio
from MCP.web_agent_server import create_simple_site

async def main():
    result = await create_simple_site(
        description="创建一个现代化的咖啡店网站",
        site_title="星巴克咖啡",
        context_content="地址：北京市朝阳区，营业时间：7:00-22:00"
    )
    print(f"计划ID: {result['plan_id']}")

asyncio.run(main())

2. 执行构建（含自动上传）

from MCP.web_agent_server import execute_plan

result = await execute_plan(
    plan_id="your_plan_id",
    project_root="/path/to/project",
    auto_upload=True,  # 🎯 构建完成后自动上传
    save_output=True
)

3. 查询进度

from MCP.web_agent_server import get_progress

progress = await get_progress(job_id=result["job_id"])
print(f"状态: {progress['job']['status']}")

# 如果启用了自动上传
if progress['job'].get('upload_status') == 'success':
    if progress['job'].get('upload_url'):
        print(f"部署包下载: {progress['job']['upload_url']}")
    if progress['job'].get('web_url'):
        print(f"网站地址: {progress['job']['web_url']}")

🛠️ MCP 工具

传统多步骤生成

• create_simple_site() - 生成网站计划
• execute_plan() - 执行网站构建
• get_progress() - 查询构建进度

Generative UI (推荐)

• generate_interactive_page() - 单次生成完整交互式页面
• get_generative_ui_status() - 查询 Generative UI 模块状态

部署工具

• upload_project_to_mcp_server() - 打包上传至 OSS 并部署到 EdgeOne Pages
• deploy_folder_or_zip() - 部署到EdgeOne Pages

🔧 环境配置

创建 .env 文件：

# AI模型配置（传统模式）
OPENAI_BASE_URL=https://dashscope.aliyuncs.com/compatible-mode/v1
OPENAI_API_KEY=your_api_key
WEB_AGENT_MODEL=qwen3-coder-plus-2025-09-23

# Generative UI 配置（推荐）
GOOGLE_API_KEY=your_google_api_key
GENERATIVE_UI_MODEL=gemini-2.0-flash-exp
GENERATIVE_UI_FALLBACK_MODEL=gemini-1.5-flash

# 项目路径（可选）
WEB_AGENT_PROJECT_ROOT=/path/to/projects

# EdgeOne Pages 部署（可选）
EDGEONE_PAGES_API_TOKEN=your_token
EDGEONE_PAGES_PROJECT_NAME=your_project
EDGEONE_AUTO_DEPLOY_ENV=Production  # 支持 Production / Preview
KEEP_OSS_UPLOAD=true               # 保留 OSS 压缩包上传（false 则跳过）

⚡ Generative UI (推荐)

基于 Google Research 论文的单次生成方法，一次 LLM 调用即可生成完整的交互式 HTML 应用。

使用示例

from MCP.web_agent_server import generate_interactive_page

# 生成交互式时钟应用
result = await generate_interactive_page(
    prompt="创建一个实时时钟应用，支持多时区切换",
    style="default",
    auto_deploy=True
)

if result["status"] == "success":
    print(f"页面ID: {result['page_id']}")
    print(f"本地路径: {result['output_path']}")
    print(f"生成耗时: {result['generation_time']:.2f}秒")
    if result.get("web_url"):
        print(f"访问地址: {result['web_url']}")

支持的应用类型

请求类型	生成结果
时间查询	功能完整的时钟应用
地点查询	交互式地图应用
人物查询	丰富的个人资料页
教育内容	交互式学习工具
游戏请求	可玩的游戏应用
数据展示	交互式图表

风格选项

• default - 现代默认风格
• classic - 经典专业风格
• wizard_green - 魔法绿色主题
• minimal - 极简风格

🎯 自动上传功能

构建完成时自动部署到 EdgeOne Pages，同时保留 OSS 压缩包链接：

# 启动带自动上传的构建
result = await execute_plan(
    plan_id="plan_id",
    project_root="./my-website",
    auto_upload=True  # 关键参数
)

# 监听进度变化
while True:
    progress = await get_progress(job_id=result["job_id"])

    status = progress['job']['status']
    if status == 'completed':
        upload_status = progress['job'].get('upload_status')
        if upload_status == 'success':
            if progress['job'].get('upload_url'):
                print(f"📦 部署包下载: {progress['job']['upload_url']}")
            if progress['job'].get('web_url'):
                print(f"🎉 网站已上线: {progress['job']['web_url']}")
            break
        elif upload_status == 'failed':
            print("❌ 上传失败")
            break

    await asyncio.sleep(2)

📋 进度状态

• 构建阶段: running → completed
• 上传阶段: uploading → success/failed
• 最终结果: upload_url (OSS 压缩包下载地址，可选)、web_url (EdgeOne 访问地址)

🤝 贡献

欢迎提交 Issue 和 Pull Request！

📄 许可证

MIT License