MyCOS blog

MCP対応で実現する、デザインシミュレーターの拡張性

admin

こんにちは。
株式会社スプール ディレクターの高橋です。

今回は、よりデザインシミュレーターシステムを便利にするために、デザインシミュレーターシステムのMCP化を検討してみました。

MCPサーバーを用いることで、これまで複雑だった業務や実務処理を効率化することが可能です。

MCPとは

MCP（Model Context Protocol） は、AIエージェント（ChatGPT、Claudeなど）が外部のツールやデータソースと対話するための標準化されたプロトコルです。

AIが様々なシステムを操作できるようにする「共通言語」で、USBのように一度対応すれば、どのAIツールからも使える統一規格です。

Anthropic（Claudeの開発元）が2024年11月に発表した、比較的新しい技術標準です。

MCP化の狙い

1. AI エージェント（Claude等）が、デザイン候補の参照・カスタム生成・見積・受注・決済確認までを 実行できるようにする。

2. 最終的な構成

  • 既WordPress: デザインシミュレーター + 管理画面 +データベース
  • MCPサーバー: 注文・決済・データ処理
  • 連携: WordPress API ↔ MCPサーバー

具体的なユースケース

  • AIチャット（Claudeなどの外部サービス）で、「人気のあるデザインやカラーを分析したい」→自動で処理
  • 受注データをMCP経由で生産管理システムに自動送信
  • 在庫状況を確認しながら、納期を自動算出

現在の主要機能

1.商品カタログ管理

  • 管理画面での商品設定
  • アイテム商品表示 (シャツ・パンツ・ストッキング)

2.注文処理システム

  • 注文フォーム
  • 注文確認
  • 注文完了
  • メール送信機能

3.キャンペーン機能

  • キャンペーンコード検証API
  • 期限付きキャンペーン管理

4.管理機能

  • 注文管理画面
  • デザイン管理画面
  • CSV出力
  • サイト設定管理

システムを安定させる準備作業

初めに、MCP化する前に壊れにくいシステムに変更し、システムの安定化を行います。

  1. コードを理解しやすくする（重要なファイルにはコメント追加、システムの流れを図解、外部サービス連携を明確化など）
  2. 自動テストの導入（注文までの流れ、追加注文、データ形式）
  3. エラー監視の強化（エラーログを整理、決済・メール送信の成功/失敗の監視）

読み取り系API整備

次に、WordPressにAPIを追加して、MCPサーバーがデータを取得できるようにする準備を行います。

1. WordPressプラグイン作成

  • mycos-mcp-bridge プラグインを新規作成
  • REST API処理をテーマから分離

2. APIエンドポイント追加

  • /catalog – デザイン候補データ
  • /pricing – 価格情報
  • /campaigns – キャンペーン情報

3. セキュリティ対策

  • 管理者のみアクセス可能な機密情報（Stripe鍵など）
  • 専用APIキーでMCPサーバー用アクセス制御

書き込み系・決済API

次に、注文・決済・ファイル処理をAPI化して、MCPサーバーから操作できるようにします。

1. 注文API作成

  • /orders (POST) エンドポイントで注文作成
  • WordPressのカスタムフィールド依存を排除
  • 注文データをJSON形式で返却

2. Stripe決済の整理

  • 決済処理をStripeServiceクラスに分離
  • Composerでライブラリ管理
  • APIから呼び出し可能に

3. ファイル処理の分離

  • 画像保存: /design-files/upload
  • ロゴ生成: /design-files/render
  • セキュリティ: WordPress nonce → アプリケーションキー署名

4. エラー管理

  • エラーコードをerror-catalog.mdに整理
  • MCPサーバー側でエラー → ユーザー向けメッセージに変換

MCPサーバー骨格

次に、MCPサーバーの基盤を作って、WordPress APIと連携できるようにします。

1. MCPサーバー環境構築

  • mcp-server/ ディレクトリを新設
  • Node.js 18+ + pnpm で初期化
  • 必要なライブラリをインストール

2. ディレクトリ構造

mcp-server/
  src/
    index.ts           # MCPサーバーの起点
    transport.ts       # 通信ラッパー
    tools/             # 機能別ツール
      design.ts        # カタログ・プレビュー
      order.ts         # 見積・注文・決済
      admin.ts         # 管理機能
    services/          # 外部連携
      wordpress-client.ts  # WordPress API連携
      stripe-service.ts    # Stripe決済
      render-service.ts    # 画像生成

3. WordPress連携

  • Phase1とPhase2で作ったAPIを呼び出し
  • 認証トークンでセキュア接続
  • エラー時は503を返却してリトライ

MCPツールを定義して実装

 MCPサーバーの機能を定義して、ユーザーが使えるツールとして実装します。

デザイン関連

  • design.list_catalog – デザイン候補一覧（カテゴリ・ブランドフィルタ対応）
  • design.generate_preview – プレビュー画像生成

価格・注文関連

  • pricing.estimate – 見積もり計算（価格テーブル + キャンペーン適用）
  • order.create_draft – 注文下書き作成（注文ID・Stripe Intent ID返却）
  • payment.capture_intent – 決済実行（メール送信ON/OFF切り替え可能）

管理機能

  • admin.refresh_cache – 設定データ再生成

クライアント統合と移行

新旧システムを並行稼働させながら、段階的にMCP化を完了させます。

1. 既存システムとの並行稼働

  • AIエージェント・外部クライアントがMCP経由で操作可能
  • 使用例をdocs/api-usage-samples/に整備

2. フロントエンド刷新

  • 描画処理スクリプトをTypeScript化
  • MCP API呼び出しでデータ取得

3. 決済整合性監視

  • Stripe webhookでMCPサーバーも支払い完了を監視
  • 失敗時のリカバリ手順を文書化

データ連携

WordPressのDBをそのまま使用し、MCP経由でAPI呼び出しするシンプルな構成にします。

  • WordPress DBを単一の正とする（コピーは作らない）
  • MCP経由でAPI呼び出し（オンデマンド取得）

セキュリティ・運用考慮

セキュリティ

  • API認証: アプリケーションパスワード + IP制限
  • 機密情報: Stripe鍵・メール設定をSecrets Managerに移動
  • ファイル: 画像をオブジェクトストレージに移行

ログ・監視

  • ログ: MCPサーバー、WordPress
  • 保管: 監査ログ90日保存
  • 監視: API呼び出し・セキュリティイベント

テストとリリースチェックリスト

Phase別テスト

  • Phase1: API動作・負荷テスト
  • Phase2: Stripe決済テスト
  • Phase3/4: MCP動作テスト
  • Phase5: 並行稼働テスト（誤差±3%以内）

ロールバック

  • MCP呼び出し無効化
  • APIプラグイン停止
  • 旧構成復帰確認

まとめ

今回は、弊社のデザインシミュレーターシステム「MyCOS」をMCP化して、AIエージェント経由での注文・分析を可能にするための検討を行いました。

想定していたよりも工数がかかる印象ですが、既存システムを壊さずに、AIエージェント経由での注文・分析を実現する現実的なアプローチとなっています。

Trending