はじめてのMCP: プロジェクトの技術選定に活用する

このチュートリアルでは、Prime Style MCPの主要な機能の一つであるproject_builderプロンプトを使い、新しいWebアプリケーションの技術選定プロセスを体験します。

🎯 このチュートリアルのゴール

MCPの基本的な使い方を理解する。
project_builderプロンプトを使って、プロジェクトの要件に基づいた技術スタックの提案を受け取る。
MCPからの応答を解釈し、次のアクションに繋げる方法を学ぶ。

fictional シナリオ設定

あなたはスタートアップのエンジニアチームの一員です。今回、社内の情報共有を円滑にするためのシンプルな「社内ブログシステム」を開発することになりました。

このチュートリアルでは、このシナリオに沿ってMCPに技術選定の相談をしてみます。

Step 1: 要件を整理し、説明を作成する

まず、開発したいアプリケーションの要件を整理します。project_builderプロンプトはtask_descriptionパラメータを受け取るので、ここに要件を記述します。

今回は、以下のような簡単な要件をまとめてみました。

text:要件

- マークダウンで記事を投稿できる
- 記事にはコメントが付けられる
- Googleアカウントで認証できる
- 開発チームは3名（フロントエンド1名、バックエンド2名）
- 開発期間は3ヶ月を目標とする
- インフラはAWSを利用したい

この要件をtask_descriptionとしてMCPに渡します。

Step 2: `project_builder`プロンプトを実行する

Claude CodeからMCPのプロンプトを呼び出す方法は、主に2つあります。

方法1: スラッシュコマンド (推奨)

プロンプト名が分かっている場合は、スラッシュコマンドで直接呼び出すのが最も確実です。 claudeを起動し、以下のように入力します。パラメータはコマンドの後に続けて記述します。

/mcp__psm__project_builder task_description="社内ブログシステムの開発。\n- マークダウンで記事を投稿できる\n- 記事にはコメントが付けられる\n- Googleアカウントで認証できる\n- 開発チームは3名（フロントエンド1名、バックエンド2名）\n- 開発期間は3ヶ月を目標とする\n- インフラはAWSを利用したい"

psmの部分は、あなたがサーバー登録時に指定した名前です。
task_description="..." のように、パラメータ名="値"の形式で引数を渡します。

方法2: メンション

@<サーバー名>形式でメンションし、自然言語で依頼することもできます。

@psm project_builder プロンプトを使って、社内ブログシステムの技術スタックを提案してください。

要件：
- マークダウンで記事を投稿できる
- 記事にはコメントが付けられる
- Googleアカウントで認証できる
- 開発チームは3名（フロントエンド1名、バックエンド2名）
- 開発期間は3ヶ月
- インフラはAWS

Claudeが文脈を理解し、適切なパラメータに変換してプロンプトを実行してくれます。

参考: curl を使ってAPIを直接呼び出す場合

MCPサーバーは標準的なHTTPエンドポイントも提供しています。何らかの理由でClaude Codeが使えない場合や、他のスクリプトから呼び出したい場合は、curlなどのツールで直接APIを呼び出すことも可能です。

bash

# 環境変数 MCP_SERVER_URL と MCP_API_KEY が設定されている必要があります
curl -X POST "$MCP_SERVER_URL/prompts/project_builder" \
  -H "Authorization: Bearer $MCP_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "task_description": "社内ブログシステムの開発。\n- マークダウンで記事を投稿できる\n- 記事にはコメントが付けられる\n- Googleアカウントで認証できる\n- 開発チームは3名（フロントエンド1名、バックエンド2名）\n- 開発期間は3ヶ月を目標とする\n- インフラはAWSを利用したい"
  }'

Step 3: 結果を解釈し、意思決定に繋げる

MCPは、あなたの要件に基づいて、いくつかの技術スタックの選択肢と、それぞれのメリット・デメリットをまとめたレポートを返却します。（※以下は応答のサンプルです）

json:MCPからの応答（サンプル）

{
  "project_id": "proj_internal_blog_01",
  "summary": "社内ブログシステム開発のための技術スタック提案",
  "options": [
    {
      "name": "React (Next.js) + Python (FastAPI)",
      "pros": [
        "フロントエンドとバックエンドが明確に分離しており、分業しやすい。",
        "Next.jsによるSSRで初期表示が高速。",
        "FastAPIは非同期処理に強く、パフォーマンスが高い。"
      ],
      "cons": [
        "フロントエンドとバックエンドの両方の知識が必要になる。",
        "小規模なチームでは管理コストがやや高い可能性がある。"
      ],
      "recommended_for": "モダンな開発スタイルを重視し、将来的な拡張性を見据える場合に最適。"
    },
    {
      "name": "Python (Django) + HTMX",
      "pros": [
        "モノリシックな構成で、バックエンドエンジニアが中心となって開発を進めやすい。",
        "学習コストが比較的低い。",
        "迅速なプロトタイピングが可能。"
      ],
      "cons": [
        "複雑なフロントエンドのインタラクションには向かない。",
        "SPAのようなリッチなUI/UXの実現は難しい。"
      ],
      "recommended_for": "バックエンド中心のチームで、迅速にMVPを開発したい場合に最適。"
    }
  ],
  "recommendation": "チーム構成と開発期間を考慮すると、`Python (Django) + HTMX`の構成が最もリスクが低く、迅速な立ち上がりが期待できます。もし将来的にリッチなUIが必要になった場合は、フロントエンドを分離するリファクタリングを検討してください。"
}

この結果を見て、チームで議論しましょう。MCPは意思決定の材料を提供してくれるアシスタントです。最終的な判断は、チームのスキルセットやプロダクトの将来像を元に行いましょう。

まとめ

このチュートリアルでは、project_builderプロンプトを使って、プロジェクトの要件から具体的な技術選定の選択肢を得るプロセスを体験しました。

MCPの他のプロンプトも、同様にあなたのタスクを構造化し、意思決定をサポートしてくれます。APIリファレンスを参考に、ぜひ他の機能も試してみてください。

はじめてのMCP: プロジェクトの技術選定に活用する ​

🎯 このチュートリアルのゴール ​

fictional シナリオ設定 ​

Step 1: 要件を整理し、説明を作成する ​

Step 2: project_builderプロンプトを実行する ​

方法1: スラッシュコマンド (推奨) ​

方法2: メンション ​

Step 3: 結果を解釈し、意思決定に繋げる ​

まとめ ​