MERN MCP

MERN MCP

AI を活用した MERN スタック CRUD スキャフォルダー兼 MCP サーバー

mern-mcp は、既存のコードベース内に MERN スタックの CRUD リソースをスキャフォールドするためのオープンソース Model Context Protocol（MCP）サーバーです。Claude Code と Codex CLI の両方に対応したセットアップ機能を備えています。MongoDB および Mongoose のモデル、Express のサービスとルート、React クライアントモジュールに加え、安全性を高めるプレビュー後に適用するワークフローで、新しいリソースを実際のアプリケーションに組み込むために必要な配線を生成します。

MERN スタック開発向けの MCP サーバー、MongoDB・Express・React・Node.js の CRUD ジェネレーター、Mongoose と Express のボイラープレートジェネレーター、または AI コーディングアシスタントと連携する React 管理画面のスキャフォルダーをお探しなら、このリポジトリはまさにその用途のために作られています。

目次： 役立つ理由 · 生成されるファイル · インストール · 設定 · Claude Code · Codex CLI · Docker · MCP ツール · 例 · プロジェクトのスタイル · 自然言語 · プレビューのワークフロー · 対象ユーザー

このリポジトリが役立つ理由

チームが必要としているのは、たいていの場合、汎用的なコードジェネレーターではありません。プロジェクトを調査し、既存のフォルダー構成に従い、繰り返し使える CRUD の一連の実装を作成し、無計画な書き込みを避けられるローカル MCP ツールです。mern-mcp は、こうした実用的なワークフローに重点を置いています。

Next.js、Node.js、MongoDB 向けの MCP をすでに使っていても、それらのツールは通常、フレームワークやデータベースのレベルで支援します。mern-mcp が役立つのは、モデル、サービス、コントローラー、ルート、バリデーター、クライアント API、フック、フォーム、一覧画面、詳細画面、統合パッチといったリソースの一連のワークフローを、ひとつの場所で扱えるためです。アシスタントに各レイヤーを個別に接続するよう頼む代わりに、開発者は CRUD の一連の実装全体を一度にスキャフォールドし、計画を確認して、より早くビジネスロジックに取りかかれます。これにより、繰り返しのセットアップ作業が減り、統合手順の見落としを防ぎ、日々のフルスタック開発が大幅に楽になります。

次のような場合に特に役立ちます。

• リソーススキーマから MERN の CRUD API と React UI をスキャフォールドする
• Mongoose モデル、Express コントローラー、サービス、ルート、バリデーターを生成する
• React のフォーム、一覧画面、詳細画面、フック、共有型、API モジュールを生成する
• MCP 対応のコーディングアシスタントを使って、自分のリポジトリ内にリソースを作成する
• 適用前にファイル変更をプレビューする
• フィールド追加や削除のワークフローを使って、生成したリソースを継続的に管理する
• モノレポや、サーバーとクライアントが分かれたプロジェクトに対応する

mern-mcpが生成するもの

各リソースについて、mern-mcpは以下を生成できます。

• サーバーのモデルファイル
• サーバーのサービスファイル
• サーバーのコントローラーファイル
• サーバーのルートファイル
• バリデーションが有効な場合のサーバーのバリデーターファイル
• JWT 認証が有効な場合の認証ミドルウェアファイル
• クライアントの共有型定義ファイル
• クライアントの API モジュール
• クライアントのデータフック
• クライアントのフォームコンポーネント
• クライアントのリストコンポーネント
• クライアントの詳細コンポーネント

生成されるパスの例は次のとおりです。

server/models/product.model.ts
server/services/product.service.ts
server/controllers/product.controller.ts
server/routes/product.routes.ts
server/validators/product.validator.ts
client/types/product.types.ts
client/api/product.api.ts
client/hooks/useProduct.ts
client/components/ProductForm.tsx
client/components/ProductList.tsx
client/components/ProductDetail.tsx

プランナーは、対応するパターンを検出した場合、既存ファイルにパッチを適用することもできます。

• サーバーのエントリーファイルに新しい Express ルートをマウントする
• React Router ファイルに新しいルートを登録する
• 検出したストアの構造に対応している場合、Redux ストアにリデューサーを登録する

インストール

npm install
npm run build

コンパイル済みの MCP サーバーを対象の MERN プロジェクトに対して実行します。

node dist/index.js --project-root /absolute/path/to/target-project

ローカルで開発する場合：

npm run dev -- --project-root /absolute/path/to/target-project

設定

対象プロジェクトのルートにmern-mcp.config.jsonを作成します。

React Query を使用するモノレポの TypeScript プロジェクトの例：

{
  "structure": "monorepo",
  "language": "typescript",
  "reactStack": "react-query",
  "validation": "zod",
  "auth": "none",
  "rbac": false,
  "paths": {
    "serverRoot": "./server",
    "clientRoot": "./client",
    "serverEntry": "index.ts",
    "clientRouter": "router.tsx"
  }
}

Redux と JWT 認証を使用する、クライアントアプリとサーバーアプリが分かれた構成の例：

{
  "structure": "separate",
  "language": "typescript",
  "reactStack": "redux",
  "validation": "both",
  "auth": "jwt",
  "paths": {
    "serverRoot": "./server",
    "clientRoot": "./client",
    "modelsDir": "src/models",
    "servicesDir": "src/services",
    "controllersDir": "src/controllers",
    "routesDir": "src/routes",
    "validatorsDir": "src/validators",
    "middlewareDir": "src/middleware",
    "componentsDir": "src/components",
    "hooksDir": "src/hooks",
    "apiDir": "src/api",
    "typesDir": "src/types",
    "serverEntry": "src/index.ts",
    "clientRouter": "src/router.tsx",
    "clientStore": "src/store.ts"
  }
}

pathsを使って、すべての成果物のディレクトリを上書きできます。

Claude Code で使う

1. このリポジトリの依存関係をインストールしてビルドします。

npm install
npm run build

2. スキャフォールドする対象の MERN プロジェクトにmern-mcp.config.jsonを作成します。
3. MCP サーバーを Claude Code に追加します。

claude mcp add mern-mcp -- node /absolute/path/to/mern-mcp/dist/index.js --project-root /absolute/path/to/project

4. Claude Code でサーバーが利用可能であることを確認します。
5. scaffold_resourceを apply モードで使用する前に、preview_scaffoldから始めます。

Codex CLI で使う

1. このリポジトリの依存関係をインストールしてビルドします。

npm install
npm run build

2. スキャフォールドする対象の MERN プロジェクトにmern-mcp.config.jsonを作成します。
3. MCP サーバーを Codex CLI に追加します。

codex mcp add mern-mcp --command node --args /absolute/path/to/mern-mcp/dist/index.js --project-root /absolute/path/to/project

4. Codex に MCP サーバーが表示されていることを確認します。
5. preview_scaffoldから始めて、生成プランを確認し、返されたpreviewHashを apply モードで再利用します。

Docker で実行する

ホストに Node.js を直接インストールしたくない場合は、Docker でmern-mcpを実行できます。

1. このリポジトリからイメージをビルドします。

docker build -t mern-mcp .

2. 対象の MERN プロジェクトにmern-mcp.config.jsonがあることを確認します。
3. コンテナを実行し、対象プロジェクトをコンテナにマウントします。

docker run --rm -i \
  -v /absolute/path/to/target-project:/workspace \
  mern-mcp \
  --project-root /workspace

4. Docker 化したサーバーを MCP クライアントに登録する場合は、コマンドに Docker を指定し、同じ引数を渡します。

設定例：

docker run --rm -i -v /absolute/path/to/target-project:/workspace mern-mcp --project-root /workspace

MCP ツール

現在、サーバーには以下のツールが登録されています。

• preview_scaffold
• scaffold_resource
• list_resources
• add_field
• delete_resource

preview_scaffold

ファイルを変更する前に、スキャフォールドのドライランを行い、生成される書き込みプランを確認します。

scaffold_resource

リソース用の完全な MERN CRUD スキャフォールドをプレビューまたは適用します。

list_resources

マニフェストで管理されているリソースを一覧表示し、必要に応じてプロジェクト内の未管理リソースをスキャンします。

add_field

既存の生成済みリソースに新しいフィールドを追加する操作をプレビューまたは適用します。

delete_resource

生成済みリソースの削除をプレビューまたは適用し、そのマニフェストレコードを削除します。

scaffold_resource、add_field、delete_resourceで重要な入力は次のとおりです。

• mode："preview"または"apply"
• previewHash："apply"モードで必須
• conflictStrategy："abort"、"overwrite"、または"skip"

リソース入力の例

product リソースのプレビューリクエストの例：

{
  "resourceName": "Product",
  "fields": [
    { "name": "title", "type": "string", "required": true },
    { "name": "price", "type": "number", "required": true },
    { "name": "inStock", "type": "boolean", "required": false }
  ],
  "mode": "preview"
}

プレビュー後、返されたpreviewHashを apply モードで再利用します。

サポートするプロジェクトスタイル

mern-mcp は、以下の各項目を設定して MERN コードを生成できます。

• プロジェクト構成：monorepo または separate
• 言語：typescript または javascript
• React のデータスタック：plain、react-query、redux、または axios
• バリデーション：zod、express-validator、both、または none
• 認証：jwt または none

パスも設定できるため、src/models、src/routes、src/components、src/store.ts などのカスタムディレクトリを生成先に指定できます。

自然言語または明示的なフィールド

リソースをスキャフォールドする方法は 2 つあります。

1. 明示的なフィールドスキーマを渡します。
2. 自然言語の説明を渡し、プランナーにフィールドを推測させます。

自然言語入力の例：

a blog post with title, body, author, tags

この形式の入力はリソース構造に解析されます。たとえば、author のような語は objectId の参照になり、tags のような語は文字列配列になります。

サポートされているフィールド型は次のとおりです。

• string
• number
• boolean
• date
• objectId

サポートされている UI ウィジェットのヒントは次のとおりです。

• text
• textarea
• number
• checkbox
• date
• select
• multiselect
• tags

プレビューを優先する、より安全なワークフロー

このリポジトリの特に優れた点の 1 つは、プレビューと適用の仕組みです。

• preview モードでは、プラン、成果物、統合アクション、競合、および決定論的な previewHash が返されます
• apply モードでは、一致する previewHash が必要です
• 管理対象外のファイルとの競合は、abort、overwrite、または skip で処理できます
• 生成されたリソースのパスは .mern-mcp-manifest.json で追跡されます

これにより、AI ツールや人間のオペレーターは、無関係な作業を気付かないうちに上書きすることなく、より管理された方法でコードをスキャフォールドできます。

このプロジェクトの対象ユーザー

mern-mcp は、次のような方に適しています。

• リソースのスキャフォールディングを高速化したい MERN スタック開発者
• MCP を使った AI 支援コーディングのワークフローに取り組む方
• 管理ダッシュボードや CRUD バックオフィスを繰り返し構築するエージェンシー
• 社内ツールや SaaS のコントロールパネルをリリースするスタートアップチーム
• 一貫した規約を維持する TypeScript および JavaScript チーム
• 単なるコードテンプレートではなく、生成と統合の両方を求める開発者

検索意図とキーワード

このようなプロジェクトは、次のような語句で検索されることがよくあります。

• MERN スタック向け MCP サーバー
• MERN スタック CRUD ジェネレーター
• MongoDB Express React Node スキャフォルダー
• Mongoose モデルジェネレーター
• Express API ボイラープレートジェネレーター
• React Query CRUD ジェネレーター
• Redux CRUD スキャフォルダー
• MERN アプリ向け AI コードジェネレーター
• フルスタック JavaScript 向けローカル MCP ツール
• フルスタック TypeScript CRUD スキャフォールディング

このサーバーが、これらの成果物や統合機能を直接生成するため、これらの語句はこのプロジェクトに関連しています。

地域に関連する検索での発見性

米国、カナダ、英国、ヨーロッパ、中東、インド、バングラデシュ、パキスタン、シンガポール、またはオーストラリアから MERN スタックのスキャフォールディングツールを探している場合も、答えは同じです。mern-mcp は自分のプロジェクト内でローカルに動作し、特定のクラウドリージョンやホスティングプラットフォームに依存しません。

そのため、プロジェクトが Node.js と MCP 対応クライアントを使用していれば、分散型の開発チーム、リモートエージェンシー、スタートアップチーム、フリーランス開発者、プロダクト企業に適しています。ニューヨーク、トロント、ロンドン、ベルリン、ドバイ、ベンガルール、ダッカ、シンガポール、シドニーなど、どの都市で作業していても利用できます。

このリポジトリが関連する検索で上位表示される理由

このリポジトリは、単なるテンプレートの寄せ集めではありません。次の機能を備えています。

• 実行可能な MCP サーバー
• Zod を使った型付き入力スキーマ
• 設定可能なプロジェクトパスの解決
• サーバーとクライアントの登録に対応する AST ベースの統合パッチャー
• マニフェストに基づくリソース管理
• プレビュー、適用、フィールド追加、一覧表示、削除のワークフロー
• メインのライフサイクルを対象としたテストとスモークテスト

これらの組み合わせは、MERN コード生成、MCP ツール、CRUD スキャフォールディング、Express ルート生成、Mongoose モデル生成、React Query CRUD ヘルパー、Redux スキャフォールディング、TypeScript のフルスタック自動化に関する検索に直接関連しています。

開発時のチェック

npm run check
npm test
npm run build
npm run smoke

ライセンス

MIT