Easy Email Builder

Easy Email Builder MCP 服务

让 AI 助手（Claude、Cursor、VS Code、……）使用 Easy Email Builder 设计 HTML 邮件模板。助手编写模板，服务负责验证并渲染，你将获得：

• 最终的 邮件 HTML，
• 一个预览链接，打开后可在可视化编辑器中继续编辑并导出，
• 模板的变量（{{first_name}}、{%unsubscribe_link%}、……）及其回退值，
• 可选的编辑器 JSON，用于加载到 EmailBuilder React 组件中。

将其添加到你的 AI Agent

适用于任何支持本地 MCP 服务的 Agent。命令行配置需要 Node.js 18+。

Claude Desktop：一键扩展（最简单）

1. 下载 easy-email-builder.mcpb。
2. 双击该文件（或将其拖入 Claude Desktop → Settings → Extensions），然后点击 Install。

无需 Node.js，也无需编辑配置：Claude Desktop 会使用内置的 Node 运行它。

Claude Code

claude mcp add easy-email-builder --scope user -- npx -y easy-email-builder-mcp

--scope user 会使其在你的所有项目中可用；省略该选项则只会将其添加到当前项目。

OpenAI Codex

codex mcp add easy-email-builder -- npx -y easy-email-builder-mcp

或在 ~/.codex/config.toml 中：

[mcp_servers.easy-email-builder]
command = "npx"
args = ["-y", "easy-email-builder-mcp"]

VS Code（GitHub Copilot）

code --add-mcp '{"name":"easy-email-builder","command":"npx","args":["-y","easy-email-builder-mcp"]}'

或在项目中的 .vscode/mcp.json 中：

{
  "servers": {
    "easy-email-builder": {
      "command": "npx",
      "args": ["-y", "easy-email-builder-mcp"]
    }
  }
}

Gemini CLI

gemini mcp add easy-email-builder npx -y easy-email-builder-mcp

Cursor、Windsurf、Cline 和其他客户端

将以下内容添加到客户端的 MCP 配置中：

{
  "mcpServers": {
    "easy-email-builder": {
      "command": "npx",
      "args": ["-y", "easy-email-builder-mcp"]
    }
  }
}

客户端	配置文件
Cursor	~/.cursor/mcp.json（或项目中的 .cursor/mcp.json）
Windsurf	~/.codeium/windsurf/mcp_config.json
Cline / Roo Code	MCP Servers 面板 → Configure
Claude Desktop（手动配置）	Settings → Developer → Edit Config

如果服务因 spawn npx ENOENT 或 env: node: No such file or directory 而无法启动（使用 nvm 时很常见，因为桌面应用不会加载 shell 的 PATH），请将 which npx 输出的完整路径用作 command，并将 Node 文件夹添加到 PATH：

{
  "mcpServers": {
    "easy-email-builder": {
      "command": "/Users/you/.nvm/versions/node/v22.0.0/bin/npx",
      "args": ["-y", "easy-email-builder-mcp"],
      "env": { "PATH": "/Users/you/.nvm/versions/node/v22.0.0/bin:/usr/local/bin:/usr/bin:/bin" }
    }
  }
}

**ChatGPT 和 claude.ai（网页版）：**它们只能连接托管在 URL 上的 MCP 服务。此服务运行在你的计算机上，因此请通过 Claude Desktop、Claude Code、Codex 或上述客户端之一使用它。

试试看

例如，可以这样提问：“为我的咖啡店创建一封欢迎邮件，附带 10% 折扣码和客户的名字。”

工具

工具	功能
get_block_reference	模板格式：区块、属性、颜色、变量
list_templates	31 个入门模板，以及内置的页眉和页脚 ID
get_template	可供改编的入门模板（嵌套“树”格式或扁平编辑器 JSON）
build_email	验证模板、渲染 HTML、列出变量并返回预览链接。会针对 Outlook 或 Gmail 中可能出问题的内容发出警告（嵌套列、尺寸过大的图片、不支持的 CSS、Gmail 截断）。还可以将 HTML/JSON 保存到文件

预览链接

模板会被压缩到链接本身中（…/Easy-Email-Builder/#z/…）。没有任何内容会上传或存储到服务上。模板特别大时会生成很长的链接，而某些应用会截断这类链接；build_email 会在链接较长时发出警告。

若要在你自己部署的编辑器中打开链接，请设置 EASY_EMAIL_BUILDER_EDITOR_URL：

"env": { "EASY_EMAIL_BUILDER_EDITOR_URL": "https://email.example.com/editor/" }

你的部署必须能够解码 #z/ 链接；请参阅 src/getConfiguration 中的 decodeTemplateHash。

开发

该服务会复用编辑器自身位于 ../src 的代码（渲染、模板、变量），并将其打包为单个文件。

pnpm install            # in the repo root (email block packages)
cd mcp && pnpm install
pnpm test               # build, pack the extension, end-to-end tests over stdio
pnpm pack:extension     # build dist/easy-email-builder.mcpb (Claude Desktop extension)
pnpm typecheck

可使用 MCP Inspector 进行测试：npx @modelcontextprotocol/inspector node dist/index.js。

发布

1. 在 package.json 和 server.json（version 和 packages[0].version）中设置相同的版本。扩展会从 package.json 获取版本。
2. 运行 pnpm test，然后运行 npm publish --otp=<code>。
3. 运行 mcp-publisher publish（在 npm 发布后执行：注册表会检查 npm 包）。
4. 创建 GitHub 发布版本，并附上 dist/easy-email-builder.mcpb（保留该文件名：README 的下载链接指向最新发布版本中的 easy-email-builder.mcpb）。

许可证

MIT