Easy Email Builder

Easy Email Builder MCP サーバー

AI アシスタント（Claude、Cursor、VS Code、…）がEasy Email BuilderでHTMLメールテンプレートをデザインできるようにします。アシスタントがテンプレートを作成し、サーバーが検証してレンダリングすると、次のものが得られます。

• 完成したメールHTML、
• ビジュアルエディターでメールを開くプレビューリンク。そこで編集を続け、エクスポートできます。
• テンプレートの変数（{{first_name}}、{%unsubscribe_link%}、…）とそのフォールバック値、
• オプションで、EmailBuilder React コンポーネントに読み込めるエディターのJSON。

AI エージェントに追加する

ローカル MCP サーバーに対応するあらゆるエージェントで動作します。コマンドラインでセットアップする場合は、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 でサーバーの起動に失敗する場合（デスクトップアプリがシェルの PATH を読み込まないため、nvm を使用しているとよく発生します）、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