git clone <repo-url> ppt-generator-mcp
cd ppt-generator-mcp
npm install

npm run demo

{
  "mcpServers": {
    "ppt-generator": {
      "command": "npx",
      "args": ["tsx", "src/server.ts"],
      "cwd": "${workspaceFolder}"
    }
  }
}

{
  "mcpServers": {
    "ppt-generator": {
      "command": "npx",
      "args": ["tsx", "/absolute/path/to/src/server.ts"]
    }
  }
}

npm start

npx @modelcontextprotocol/inspector npx tsx src/server.ts

编排层 (Claude Code / OpenCode / 自定义 Agent)
    │  MCP Protocol (stdio)
    ▼
┌─────────────────────────────────────────────────┐
│  src/server.ts          MCP Server（7 工具注册）  │
│  src/lib/                                              │
│  ├── template-parser.ts   模板扫描 / 占位符解析       │
│  └── llm-client.ts        OpenAI + Anthropic 客户端    │
│  src/tools/                                             │
│  ├── fill-placeholders.ts 文生文填充（核心）           │
│  ├── generate-image.ts    DALL-E 文生图                │
│  ├── render-icons.ts      <icon> → SVG <img>           │
│  ├── assemble-page.ts     组装 HTML + 复制 CSS          │
│  └── validate-page.ts     残留占位符 / HTML 合法性检查   │
└─────────────────────────────────────────────────┘

1. list_templates     → 浏览模板库，按 usecase/format 选择合适模板
2. load_template      → 加载 HTML，获取占位符和图标清单
3. fill_placeholders  → 用 direct 文本或 LLM 扩写填充所有占位符
4. render_icons       → 将 <icon name="x"> 替换为 SVG <img>
5. generate_image     → 将 <figures> 提示词替换为 DALL-E 生成的图片
6. assemble_page      → 移除注释、复制 CSS、写入输出文件
7. validate_page      → 检查残留占位符、图片引用、HTML 合法性

# Agent 伪代码 — 展示编排层如何调用 MCP 工具
templates = mcp.call("list_templates")
tpl = pick_best(templates, usecase="标书技术方案", format="A4横向")

parsed = mcp.call("load_template", slug=tpl.slug)
# parsed.placeholders → [{tag: "component-title", count: 5}, ...]

content = build_content_from_user_document(user_doc, parsed.placeholders)
# content.direct = {"component-title": [...], "paragraph": [...], ...}

filled = mcp.call("fill_placeholders", html=parsed.html, content=content)

icons = mcp.call("render_icons", html=filled.html, iconBasePath=tpl.iconDir)

images = mcp.call("generate_image", html=icons.html, imageConfig={...})

page = mcp.call("assemble_page", html=images.html,
    config={outputPath: "output/page-1.html", templateDir: tpl.dir})

result = mcp.call("validate_page", html=page.html, checks=["no-xml-tags", ...])
assert result.valid

<!-- 模板头部 XML 注释：元数据 -->
<!-- @name 绿色信息图型标书页（A4横向） @slug green-infographic-... -->

<title><page-title>第N页｜页面主题标题</page-title></title>
...
<h4 class="component-title"><component-title>卡片标题</component-title></h4>
<p><paragraph>正文段落内容。</paragraph></p>
<img src="..."><icon name="calendar">图标描述</icon>
<figures>文生图提示词</figures>

├── src/
│   ├── server.ts              # MCP Server 入口
│   ├── lib/
│   │   ├── template-parser.ts # 模板扫描、元数据解析、占位符提取
│   │   └── llm-client.ts      # OpenAI / Anthropic 统一客户端
│   └── tools/
│       ├── fill-placeholders.ts # 文生文填充（direct + LLM 扩写）
│       ├── generate-image.ts    # DALL-E 文生图
│       ├── render-icons.ts      # <icon> → <img> SVG 渲染
│       ├── assemble-page.ts     # 组装 HTML、复制 CSS、写文件
│       └── validate-page.ts     # 残留占位符 / HTML 合法性检查
├── templates/
│   └── green-infographic/      # 绿色信息图模板
│       ├── green-infographic-bid-a4-landscape.html  # 模板 HTML
│       ├── green-infographic-theme.css              # 主题 CSS
│       ├── assets/icons/                            # SVG 图标（Tabler Icons）
│       └── README.md          # 模板文档
├── tests/
│   └── demo.ts                 # 端到端 Demo
├── .mcp.json                   # Claude Code MCP 配置
├── package.json
└── tsconfig.json