Elementor MCPとAIツールを接続してサイト制作するための設定方法を解説していきます。
参考にした動画はこちらです（https://youtu.be/Cx1LAlyk-MQ）。
参考にしたオフィシャルサイトはこちらです（https://elementor.com/help/how-to-connect-elementor-to-an-ai-tool-using-mcp/）。

Elementor MCPとAIツールを接続

まず確認したいのがElementor MCPを使うには、WordPressのバージョンがWordPress 6.8以上が必要です。
また、Elementor と Elementor Pro のバージョンが4.3.0以上が必要です。

WordPressのバージョンの確認方法はElementorのシステム情報から確認できます（下図参照）。

条件を満たしていたら、ElementorとElementorPROを有効化しておきましょう。
つぎに「Angie」というプラグインを探してインストール＆有効化します（下図参照）。

有効化するとサインインを求められますので、規約とプライバシーポリシーに同意してサインインします（下図参照）。

次にAngieとサイトの接続について聞かれますので、「Continue」をクリックします（下図参照）。

このあと、画面が真っ白の時間が続きますが、慌てず待ちます・・・

次に下のPOPUPが表示される場合がありますが、「Start Building」をクリックするしか選択肢がないので、クリックします。

Elementor MCPとAIツールを接続

これで準備は完了ですので、実際にElementorとAIツールを接続していきます。
Elementorのメニューから「Elementor MCP」を選択します（下図参照）。

接続できるAIツールは、Claude Code、Claude Desktop、CodeX、Cursorとその他です。
とりあえず、わたしは、無料で使える「CodeX」を選択しましたが、他のAIツールを選択しても、同じですので、お好みのAIツールを選択してください。

（1）AIツールを選択
（2）I understand…　にチェックを入れる
（3）Generate Promptをクリック

しばらくすると画面が切り替わり右の窓にプロンプトが表示されますのでコピーします（下図参照）。
コピーはピンクのボタン「Copy prompt」からでも窓の右に表示されているコピーアイコンでもどちらも同じです。

コピーしたプロンプトをCodeXのチャット欄に貼ります。
自分はChatGPTのデスクトップ版アプリを使いました。
矢印の箇所からCodeXに切り替えて、先ほどコピーしたプロンプトをチャット欄に貼り付けて送信します。

しばらくすると以下の画面がでますが、「一度だけ許可」をクリックします。

以上でElementorとAIツールの接続は完了です。
しばらくすると、完了報告があります。
下図のようにリスタート（再起動）するように言われますので、ChatGPTを終了してから起動します。

接続確認と機能確認

正しく接続できたかどうか、確認してみたいと思います。

add a new page called “built with codex” and build any hero section you want inside it.

とチャット欄に入力して送信しました。
もちろん、日本語でもいけます。

しばらく（結構長い時間）待たされますが、WordPressのダッシュボードから固定ページを見ると下書きで「built with codex」というページができています。

「Elementorで編集」で編集画面に行くと上図のように編集可能な状態でAtomicエレメントでページが生成されていました。
ボタンはボタンエレメントでスタイルのタブで背景色など変更可能です。

まとめ

基本的にデザインはAIの時代に移行していくことが予想されますので、ElementorとAIツールとを接続していくと良いでしょう。
設定は今見てもらったとおり、それほど難しくはないと思いますが、日本語で解説しているサイトはないので、ぜひ、この記事を参考に接続してみてください。