連携

WordPressストアとつながるAI

WordPress AI MCP

ストアのMCP接続を使って、WordPress内のAlter ProductプロジェクトをAIで編集できます。ChatGPTでは会話の横にエディターを表示できます。ストア管理者は、自分のサイトに埋め込まれたエディターも接続できます。

例では架空のストアshop.exampleを使用します。パスワード、アクセストークン、ペアリングコードをスクリーンショットに掲載しないでください。

WordPressプラグインのインストールネイティブのAbilities APIを備えたWordPress、WooCommerce、Alter Productプラグイン、依存関係を含む公式WordPress MCP Adapterが必要です。

始める前に

必要な機能をストアに用意し、対象プロジェクトの編集権限を持つアカウントを使用してください。

WordPress + WooCommerce

必要な機能をストアに用意し、対象プロジェクトの編集権限を持つアカウントを使用してください。

  • ネイティブのAbilities APIを備えたWordPress 6.9+、WooCommerce、Alter Productプラグイン、依存関係を含む公式WordPress MCP Adapterが必要です。
  • ストアは公開HTTPSアドレスでアクセスできる必要があります。権限のあるWordPressアカウントと、カスタムMCP接続が許可されたChatGPTアカウントまたはワークスペースを使用します。
  • エディターのフロントエンドがWordPress MCP転送に対応している必要があります。PHPプラグインだけを更新しても、別途ホストされているエディターは更新されません。
  • Businessプラン、プラグイン設定で接続済みのAlter Product API、WordPressにダウンロード済みの必要なアセット。MCPは既存のAlter Product連携を置き換えるものではありません。
  • MCPの設定はWordPress管理者が行います。商品の作成にはWooCommerce管理と商品編集の権限が必要で、通常はAdministratorまたはShop Managerが対象です。

どのファイルが必要ですか?

必要なプラグインはWordPressにインストールします。ChatGPTで手動接続するときは、ストアのサーバーURLとOAuthを使用します。

  • WordPress:MCP、OAuth、ビジュアルエディターを備えた最新のAlter Productと、別の公式WordPress MCP Adapterおよびその依存関係をインストールします。ZIPはChatGPTではなくWordPressにアップロードします。OAuthはAlter Productに含まれるため、別のOAuthプラグインは不要です。
  • ChatGPT:Add custom MCP serverを選んでURLを入力します。この手動接続に、連携用ZIP、エクスポートしたJSON、アクセストークン、クライアントシークレットは不要です。

WordPressをChatGPTに接続する

ストアで一度設定した後、自分のWordPressアカウントでアクセスを許可します。

WordPressでMCPを有効にする

WordPress管理画面でAlter Product → MCP authoringを開きます。

  1. 認証付きMCP編集、ブラウザーエディターへのアクセス、OAuthログインを有効にします。設定を保存し、必要なWordPressコンポーネントを確認します。
  2. プラグインに表示されるOAuth MCPサーバーURLをコピーします。自分のストアのアドレスを使用してください。以下の例は架空のアドレスです。
ストアのOAuth MCP URL
https://shop.example/wp-json/alter-wc/v1/mcp
WordPressでMCPを有効にする
認証付きMCP編集、ブラウザーエディターへのアクセス、OAuthログインを有効にします。設定を保存し、必要なWordPressコンポーネントを確認します。

ChatGPTに接続を追加する

ストアで一度設定した後、自分のWordPressアカウントでアクセスを許可します。

  1. ブラウザーのChatGPTでPluginsを開き、プラスボタンからAdd custom MCP serverを選びます。アカウントとワークスペースでこの操作が許可されている必要があります。
  2. 名前にAlter Product WordPressを入力します。説明は任意です。
  3. ConnectionにストアのMCP URL(例:https://shop.example/wp-json/alter-wc/v1/mcp)を入力し、OAuthを選びます。shop.exampleは自分のストアに置き換えてください。
  4. 警告を読み、ストアのサーバーを信頼する場合だけ進みます。Create as a pluginを選び、必要に応じて非公開プラグインをインストールします。
  5. プラグインを接続し、自分のWordPressサイトでログインしてアクセスを許可します。WordPressのパスワードはそのサイトにのみ入力します。
  6. 会話に戻り、@でインストール済みプラグインを選んで、変更する前にローカルプロジェクトの一覧を確認します。

エディターを表示して作業する

対応するChatGPTクライアントでDesignerやProduct Generatorを開くと、操作の結果を確認できます。

Designer · Customizer · Configurator · Viewer · Product Generator

対応するChatGPTクライアントでDesignerやProduct Generatorを開くと、操作の結果を確認できます。

  1. DesignerまたはProduct Generatorを開くよう依頼し、対象のプロジェクトを選びます。
  2. エディターの読み込みを待ちます。小さな変更を加え、プレビューとUndo/Redoを確認します。
  3. 下書きをWordPressに保存するには、エディターのSaveを使います。公開済み商品を変更する前に結果を確認してください。
MCP
alter-product-app-catalog
alter-product-open-editor
3DのTシャツと2DのUV作業領域を表示するWordPress接続済みDesigner
WordPress MCPから開いたDesigner。3Dの衣服と、その横にグリッドと定規付きの2D UV作業領域が表示されています。保存は個別の操作です。

自分のサイトのエディターを使う

ストア管理者は、対応する埋め込みエディターを同じWordPress MCPに接続できます。

WordPress → AI MCP

自分のサイトの所有者用ワークスペースでは、MCPとブラウザーエディターへのアクセスを有効にします。ChatGPT内の接続には追加でOAuthが必要です。対応するローカルクライアントは、代わりにWordPressのアプリケーションパスワードを使用できます。

  1. AIクライアントで許可したアカウントを使い、ストアのWordPressにログインします。ローカルの埋め込み商品でAIで編集を選びます。デザインにローカルのGeneratorプロジェクトが紐付いていれば、AIでジェネレーターを開くも表示されます。
  2. 別に開く所有者用ワークスペースは、ストアのWordPress MCPに自動接続します。既存の管理者用エディターではAI MCPを開き、プラグインのWordPress接続を選びます。
  3. 会話で接続中のエディターを一覧表示し、正しいプロジェクトとタブを選びます。AIの作業中はタブを開いたままにしてください。
  4. 埋め込みプレビューで変更を確認します。終了時はAI MCPを切断します。保存は別の操作です。

処理とデータの保存場所

MCPコマンドはWordPressが処理し、編集や3D計算は接続先のブラウザーで実行します。

WordPress + Alter Product

WordPressはユーザーと権限を確認し、AIとエディターの間で制限付きのジョブと結果を受け渡します。布のシミュレーションはWordPressでは実行しません。

ローカルデザインとGeneratorプロジェクトは、プラグインの通常のWordPress保存機能を使います。エディターのJavaScript、連携認証、アセット、任意の外部サービスは、通常の設定に従ってAlter Productへ接続する場合があります。外部通信なしの利用やオフライン動作を保証するものではありません。

接続の構成図 - WordPress AI MCP
接続の構成図. MCPコマンドはWordPressが処理し、編集や3D計算は接続先のブラウザーで実行します。

保存、権限、アクセスの取り消し

OAuthはログインしたWordPressユーザーの権限を使い、新しい管理者権限は付与しません。ブラウザー内の編集はUndo/Redoに対応します。サーバーの商品変更には別の保存・公開ルールがあります。アカウントへのアクセスを止めるにはAIクライアントの許可を取り消し、ブラウザーセッションを終了するにはエディターを切断します。

接続やプレビューが動かない場合

編集コマンドを繰り返す前に、失敗した段階を確認してください。

MCP · OAuth · MCP Apps

編集コマンドを繰り返す前に、失敗した段階を確認してください。

  • クラウドクライアントには公開HTTPS URLが必要です。ローカルテストには明示的に設定した一時HTTPSトンネルを使います。localhostはChatGPT用サーバーのアドレスにはなりません。
  • ツールが表示されない場合は、MCP、OAuth、Abilities API、公式MCP Adapter、正確なURL、WordPressユーザーの権限を確認します。
  • ツールが動くのにエディターが見えない場合は、MCP Apps、フロントエンドのバージョン、クライアントのフレーム制限を確認します。WordPressのラッパーで埋め込みポリシーを回避することはできません。
  • ブラウザーセッションが利用できない場合は、正しい所有者用エディターを開き直し、AI MCPを接続してセッションを選びます。結果が不明な書き込みを再実行する前に、現在のプロジェクト状態を読み取ってください。