EmDashには、AIとつなぐための「MCPサーバー」が最初から入っています。Claude CodeやCodexといったAIツールを接続すると、「トップページのデザインを変えて」「この内容でブログの下書きを作って」のように、日本語でお願いするだけでサイトを構築・更新できるようになります。

この記事は、【公開編】Cloudflareで構築して独自ドメインで公開するまでの続編です。EmDashのプロジェクトを作り、独自ドメインで公開できていることを前提に説明します。

MCPとは

MCP（Model Context Protocol）は、AIが外部のサービスを操作するための共通の仕組みです。たとえるなら、「AI専用の受付窓口」のようなものです。

通常、ブログを更新するには管理画面を開いて、自分で入力して、公開ボタンを押します。MCPでつなぐと、AIがこの窓口を通して、記事の作成や更新を代わりに行えるようになります。もちろん、AIができることは、あなたが許可した範囲だけです。

EmDashとAIをつなぐ3つの仕組み

EmDashのAI連携には、役割の違う3つの仕組みがあります。

サイトのMCPサーバー：あなたのサイトの記事や画像、メニュー、設定を操作します。サイトごとに用意されていて、URLは https://あなたのドメイン/_emdash/api/mcp です。使うにはログイン（認証）が必要です
ドキュメントのMCPサーバー：EmDashの公式ドキュメントを検索します。AIが古い知識や思い込みではなく、最新の使い方を確認しながら作業できます。読み取り専用で、ログインは不要です
Agent Skills：AIがEmDashのページやデザインを作るときに参照する「手順書」です。プロジェクトの .agents/skills フォルダに入っています

公開編で npm create emdash@latest を使ってプロジェクトを作った方は、ドキュメントのMCPサーバーとAgent Skillsがすでに設定されています。つまり、この記事でやることは、主に「サイトのMCPサーバーをつなぐこと」です。

Claude Codeで使う

Claude Codeは、Anthropicが提供しているAIの開発ツールです。ターミナルのほか、デスクトップアプリやVS Codeなどでも使えます。利用にはClaudeの有料プランなどが必要なので、最新の条件は公式サイトで確認してください。

1. Claude Codeをインストールする

Claude Codeの公式ページの手順に沿ってインストールします。インストールできたら、EmDashのプロジェクトのフォルダに移動して起動します。

cd my-site
claude

初回はログインを求められるので、画面の案内に沿ってClaudeのアカウントでログインします。また、フォルダを信頼するか聞かれたら許可します。このとき、プロジェクトに入っているドキュメントのMCPサーバーを使うかも聞かれるので、許可しておきましょう。

2. サイトのMCPサーバーを追加する

いったんClaude Codeを終了して、ターミナルで次のコマンドを実行します。example.com の部分は、あなたのドメインに置き換えてください。emdash-site は、あとで見分けるための名前なので自由に付けられます。

claude mcp add --transport http emdash-site https://example.com/_emdash/api/mcp

コマンドの代わりに、プロジェクトにある .mcp.json というファイルに追記する方法もあります。当社のサイトもこの方法でつないでいます。

{
  "mcpServers": {
    "emdash-docs": {
      "type": "http",
      "url": "https://docs.emdashcms.com/mcp"
    },
    "emdash-site": {
      "type": "http",
      "url": "https://example.com/_emdash/api/mcp"
    }
  }
}

3. ブラウザで認証する

もう一度 claude で起動し、入力欄に /mcp と入力します。MCPサーバーの一覧が表示されるので、emdash-site を選んで認証を始めます。

ブラウザが開き、EmDashのログイン画面が表示されます。公開編で登録したパスキーでログインすると、AIに許可する権限を選ぶ画面になります（権限の選び方は後で説明します）。承認すれば接続は完了です。

接続できたか確認するには、Claude Codeに「ブログの記事一覧を見せて」とお願いしてみてください。記事のタイトルが返ってくれば成功です。

Codexで使う

Codexは、OpenAIが提供しているAIの開発ツールです。こちらも利用にはChatGPTのプランなどが必要なので、最新の条件は公式サイトで確認してください。

CodexのCLIをインストールしたら、次の2つのコマンドでサイトのMCPサーバーを追加し、認証します。

codex mcp add emdash-site --url https://example.com/_emdash/api/mcp
codex mcp login emdash-site

2つ目のコマンドでブラウザが開くので、Claude Codeと同じようにパスキーでログインして、権限を選んで承認します。

Codexは、プロジェクトの .mcp.json を読みません。ドキュメントのMCPサーバーも使いたい場合は、次のコマンドで追加しておきましょう。

codex mcp add emdash-docs --url https://docs.emdashcms.com/mcp

CodexのCLIで追加したMCPサーバーは、同じパソコンのCodexアプリやIDE拡張機能とも共有されます。

AIに許可する権限の選び方

認証の途中で表示される権限の画面では、最初はすべての項目にチェックが入っています。AIにやってほしいことに合わせて、不要なチェックは外してから承認しましょう。

記事を書かせたいだけ：コンテンツの読み取りと書き込み、メディアの読み取りと書き込みがあれば十分です
メニューやカテゴリーも任せたい：メニューとタクソノミー（カテゴリー・タグ）の管理を追加します
サイトの構造ごと任せたい：スキーマ（記事の項目の定義）や設定の変更も許可します。影響が大きいので、慣れてからにしましょう

また、AIができることは、ログインしたユーザーの役割によっても制限されます。

管理者：スキーマやサイト設定の変更を含め、すべて
編集者：すべての記事・画像・メニューなどの管理
投稿者：自分の記事の作成・編集・公開
寄稿者：下書きの作成と編集のみ（公開はできない）

権限を少なく選んでも、役割で許されている範囲を超えることはありません。「AIには下書きまでしかさせたくない」という場合は、寄稿者のユーザーを作って、そのユーザーで認証するという方法もあります。

AIにお願いできること

接続できたら、あとは普段の言葉でお願いするだけです。ツールの名前を覚える必要はありません。

サイトを構築する

デザインやページの追加など、プロジェクトのファイルを変える作業です。AIはAgent SkillsとドキュメントのMCPサーバーを参照しながら作業します。

「トップページを、白を基調にしたシンプルな会社サイトのデザインにして」
「ヘッダーに、トップ・会社概要・ブログ・お問い合わせのメニューを付けて」
「お問い合わせフォームを付けて、Resendでメールが届くようにして」

お問い合わせフォームの仕組みや、自分でやる場合の手順は、【フォーム編】お問い合わせフォームを設置してResendでメール送信で解説しています。AIに任せる場合も、Resendの登録やAPIキーの発行は自分で行う必要があるので、一度目を通しておくとスムーズです。

ファイルを変えた内容は、ビルドしてデプロイするまで本番のサイトには反映されません。まず npm run dev でパソコン上で確認し、問題がなければ公開編と同じ手順でデプロイします。

記事を書く・更新する

こちらはサイトのMCPサーバーを使う作業です。デプロイは不要で、公開すればすぐにサイトに反映されます。

「このメモをもとに、ブログ記事の下書きを作って。公開はまだしないで」
「昨日の記事の誤字を直して、下書きと公開中の内容の違いを見せて」
「公開中の記事を一覧にして、抜粋（要約）が空のものを教えて」
「ブログの項目に、どんな入力欄があるか教えて」

「ブログの記事」のように、どの種類のコンテンツかをはっきり伝えると、AIが迷いません。

当社の実例：このサイトもAIと一緒に作っています

このサイト（wow-jp.com）は、以前のサイトからEmDashへの移行を、Claude Codeと一緒に進めました。デザインの再現、ブログの目次やOGP画像の設定、お問い合わせフォームの作成など、構築の作業の多くをAIにお願いしています。

この「EmDashの始め方」シリーズも、構成を相談して決めたあと、Claude CodeがサイトのMCPサーバーを使って下書きを作りました。その下書きを人がプレビューで確認してから公開する、という流れで運用しています。

一方で、本番へのデプロイや、DNSの変更、APIキーの登録など、やり直しがきかない作業は人が最後に確認して実行しています。AIに任せる部分と、人が判断する部分を分けておくと、安心して使えます。

安全に使うためのポイント

記事は必ず下書きで作らせる：「下書きで作って」と伝え、管理画面のプレビューで確認してから公開しましょう。AIは、事実と異なることをもっともらしく書くことがあります
APIキーやパスワードをチャットに貼らない：ResendのAPIキーなどは、自分で npx wrangler secret put を実行して登録します
デプロイは自分で実行する：パソコン上で確認してから、自分の手で公開すると安心です
権限は必要な分だけ：使わない権限は、認証のときにチェックを外しておきます

つまずきやすいポイント

当社で実際に使ってみて気づいたことをまとめます。

管理画面にログインしているのに、AIがサイトを操作できない

ブラウザで管理画面にログインしていても、MCPサーバーには別に認証が必要です。Claude Codeなら /mcp、Codexなら codex mcp login で、認証が済んでいるか確認してください。

Claudeアプリの「コネクタ」にEmDashが表示されない

Claude Codeで追加したMCPサーバーは、Claudeアプリ（claude.ai）の「設定」→「コネクタ」には表示されません。この2つは別の設定です。Claude Codeの設定は、そのプロジェクトでClaude Codeを起動したときだけ有効です。普段のClaudeのチャットでも使いたい場合は、「コネクタ」にカスタムコネクタとしてサイトのMCPサーバーのURLを追加します。

記事の中の「_」が消えて、文字が斜めになる

AIは記事の本文をMarkdownという書き方で送ることが多く、EmDashがそれを記事の形式に変換します。このとき、1つの段落に「_」（アンダースコア）が2つ以上あると、その間の文字が斜体になり、「_」が消えてしまうことがありました。設定名などを書くときは、「コードとして書いて」と伝えるか、公開前にプレビューで確認しましょう。

区切り線のつもりが「---」という文字になる

Markdownの区切り線（---）は、線ではなくそのままの文字として表示されました。区切りは見出しで付けるようにお願いすると確実です。

画像のアップロードがうまくいかない

MCPで画像をアップロードするときは、画像を文字のデータに変換して送るため、大きな画像だと送りきれないことがあります。そのようなときは、画像は管理画面の「メディア」から自分でアップロードし、「メディアにある〇〇の画像を使って」とAIにお願いするとスムーズです。

まとめ

EmDashには、サイトのMCPサーバー、ドキュメントのMCPサーバー、Agent Skillsの3つのAI連携が用意されている
テンプレートから作ったプロジェクトなら、やることは主に「サイトのMCPサーバーを追加して認証する」だけ
Claude Codeは claude mcp add、Codexは codex mcp add で追加し、ブラウザで認証する
記事は下書きで作らせて確認し、デプロイやAPIキーの登録は自分で行う

まだサイトを公開していない方は【公開編】Cloudflareで構築して独自ドメインで公開するまでから、お問い合わせフォームを付けたい方は【フォーム編】お問い合わせフォームを設置してResendでメール送信もあわせてご覧ください。