Easy Email Builder

io.github.Shahkarkhan440v0.1.1更新於 Oct 9, 2026

Design HTML email templates with AI: render to HTML and open them in a visual editor

概覽

AI 產生的概覽

讓助理設計 HTML 郵件範本、驗證並渲染它們,並產生可在視覺化編輯器中開啟的預覽連結。

功能
這台伺服器提供助理處理 HTML 郵件範本的工具:get_block_reference 說明範本格式(區塊、屬性、顏色、變數),list_templates 列出 31 個起始範本以及內建的頁首與頁尾 id,get_template 回傳可改寫的起始範本。build_email 會驗證範本、渲染出最終郵件 HTML、列出範本變數與其預設值,並回傳一個可在視覺化編輯器中開啟該郵件的預覽連結;它也能把 HTML 或編輯器 JSON 存成檔案。
適用情境
當你希望助理草擬或改寫行銷類、交易類郵件範本,並直接給出渲染後的 HTML 與可繼續編輯的預覽時,適合使用它。它適合歡迎郵件、電子報等範本工作,方便之後繼續以視覺化方式編輯並匯出。
執行需求
以 npm 套件 easy-email-builder-mcp 透過 stdio 在本機執行,需要 Node.js 18+(Claude Desktop 可透過擴充功能使用其內建 Node 執行)。未宣告需要帳號或 API 金鑰。選用環境變數 EASY_EMAIL_BUILDER_EDITOR_URL 可把預覽連結指向你自己部署的編輯器,該部署必須能解析 #z/ 連結格式。
安裝前請注意
預覽連結會把整個範本壓縮進 URL 本身,因此任何取得連結的人都能讀取範本內容;伺服器不會上傳或儲存任何內容。範本很大時連結會很長,部分應用程式會截斷,build_email 在連結過長時會提出警告。build_email 也能把 HTML 或 JSON 寫入磁碟檔案。

安裝

在 SourceWeft 中

  1. 開啟 儀表板中的 Easy Email Builder,將其新增到工作區。
  2. 為需要使用其工具的對話啟用該服務。

Desktop only,透過 STDIO。 STDIO 服務會啟動本機處理程序,因此需要 SourceWeft 桌面主機。

其他 MCP 客戶端

參照 儲存庫 中的啟動說明。

README

Easy Email Builder MCP server

Let AI assistants (Claude, Cursor, VS Code, …) design HTML email templates with Easy Email Builder. The assistant writes the template, the server validates and renders it, and you get:

  • the final email HTML,
  • a preview link that opens the email in the visual editor, where you can keep editing and export it,
  • the template's variables ({{first_name}}, {%unsubscribe_link%}, …) with their fallback values,
  • optionally the editor JSON, to load into the EmailBuilder React component.

Add it to your AI agent

Works with any agent that supports local MCP servers. The command-line setups need Node.js 18+.

Claude Desktop: one-click extension (easiest)

  1. Download easy-email-builder.mcpb.
  2. Double-click it (or drag it into Claude Desktop → Settings → Extensions) and click Install.

No Node.js or config editing needed: Claude Desktop runs it with its built-in Node.

Claude Code

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

--scope user makes it available in all your projects; leave it out to add it to the current project only.

OpenAI Codex

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

or in ~/.codex/config.toml:

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

VS Code (GitHub Copilot)

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

or .vscode/mcp.json in your project:

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

Gemini CLI

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

Cursor, Windsurf, Cline and others

Add this to the client's MCP config:

json
{  "mcpServers": {    "easy-email-builder": {      "command": "npx",      "args": ["-y", "easy-email-builder-mcp"]    }  }}
ClientConfig file
Cursor~/.cursor/mcp.json (or .cursor/mcp.json in a project)
Windsurf~/.codeium/windsurf/mcp_config.json
Cline / Roo CodeMCP Servers panel → Configure
Claude Desktop (manual)Settings → Developer → Edit Config

If the server fails to start with spawn npx ENOENT or env: node: No such file or directory (common with nvm, because desktop apps don't load your shell's PATH), use the full path from which npx as the command and add your Node folder to PATH:

json
{  "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 and claude.ai (web): these only connect to MCP servers hosted at a URL. This server runs on your machine, so use it from Claude Desktop, Claude Code, Codex or one of the clients above.

Try it

Ask, for example: "Create a welcome email for my coffee shop with a 10% discount code and the customer's first name."

Tools

ToolWhat it does
get_block_referenceThe template format: blocks, properties, colors, variables
list_templates31 starter templates, plus the built-in header and footer ids
get_templateA starter template to adapt (nested "tree" format or flat editor JSON)
build_emailValidates a template, renders the HTML, lists its variables and returns a preview link. Can also save the HTML/JSON to files

Preview links

The template is compressed into the link itself (…/Easy-Email-Builder/#z/…). Nothing is uploaded or stored on a server. Very large templates make long links, and some apps cut those off; build_email warns when a link is long.

To open links in your own deployment of the editor, set EASY_EMAIL_BUILDER_EDITOR_URL:

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

Your deployment must decode #z/ links; see decodeTemplateHash in src/getConfiguration.

Development

The server reuses the editor's own code from ../src (rendering, templates, variables) and bundles it into a single file.

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

Try it with the MCP Inspector: npx @modelcontextprotocol/inspector node dist/index.js.

Releasing

  1. Set the same version in package.json and in server.json (version and packages[0].version). The extension takes its version from package.json.
  2. pnpm test, then npm publish --otp=<code>.
  3. mcp-publisher publish (after npm: the registry checks the npm package).
  4. Create a GitHub release and attach dist/easy-email-builder.mcpb (keep that file name: the README's download link points to the latest release's easy-email-builder.mcpb).

License

MIT

來源:mcp/README.md,提交 e1edd83

工具

0
工具後設資料尚未被收錄。

版本歷史

1
  1. v0.1.1最新Oct 9, 2026