🤖

MCP*Agentにおける開発体験向上をチームに知って欲しい！のでDemoを作ってみた

2025/05/08に公開

VS Code

Copilot

Model Context Protocol

LLM

tech

 本記事のゴール： MCPとAgentがあれば開発体験爆上がりすることをチームに伝える僕の周りだと今日時点でまだMCPサーバを知らない人や、RAGと比較してそこまでimpactを感じていない人もまだまだいると感じています。

しかしMCPサーバって結構やることいっぱいだと思います。権限管理して、guardrailとか設定して、社内で命令系統を統一して、資産化して、いろんな準備がある中で送れるわけには行きません。
なのでいち早くMCPってすごいぞっていうところを、今回はその中の一例であるAgent開発に寄せてデモし、社内普及と啓蒙を頑張るためのそんな記事にしたいと思います。

 どのように進めるかまずスタートはここから、READMEと copilot Agentだけが用意されています。



最初のプロンプトはこちら
Flaskで適当にアプリケーション作りたいんだけど、仕様書をまずは書いて。

READMEに書いて欲しい。内容は本当に hello world 程度でいいんだけど、このあとその仕様書を元にあなたに作ってもらうから、雛形としては少し項目として細かくお願い
次のプロンプトはこちら
readmeに書いてある内容を元に、flask appのコードを書いてください
from flask import Flask

app = Flask(__name__)

@app.route('/')
def hello_world():
    return "Hello, World!"

if __name__ == '__main__':
    app.run(debug=True)
そしてpython app.pyで起動させると。

はい！ここまでは何一つ面白くないです。

 demoのレシピ一番見せたいところは個人的には複数のMCPサーバの連携です。そもそもプロトコルが統一されようとしていることの本質は、複数のツール、複数のエージェントが通信可能となり協力することができる様になった、これだと思うのです。

なので以下の手順で進めます。
基本のコードを用意しておきます
Azure MCPと github MCPに接続します
issueの情報を元に開発方針を捉え、Azureの中の情報を元にリソースを利用して開発を実現します

 下準備
 Azure Blobに画像ファイルを置いておこうAzure Blobに画像を配置します。今回はこれを表示するアプリを作ろうと思います。



画像はシンプルにChatGPTに作成させました。

そして以下の様に作成しました。hiradevmcptestという名前のstorage accountです。



さらにimages containerを作成し、その中にsuchi.pngを配置します。



最後にネットワークを確認しておきましょう。一時的に実験した後は消すので、一旦publicにオープンしておきます。


 github issueの準備github の issueも準備しましょう。

下記の様に、sushiの画像が表示されないことをしっかりと記載します。



このあとworkして欲しいpointとして、この 1.Azure 2.Storage 3.account/filename三つを明記していることで、この情報だけでAzureからデータを正しく取得できるか試します。

 MCPを接続してみる
 Azure MCP Serverに接続するこちらの記事を参考にしました。

https://techblog.ap-com.co.jp/entry/2025/04/18/120000

リポジトリはこちらです。

https://github.com/Azure/azure-mcp?tab=readme-ov-file

 azureに関してはもう二つ設定VS Code上で az loginしておきます。
ストレージ BLOB データ共同作成者を az loginするときのアカウントに付与しておきます。

 Github MCP Serverに接続するリポジトリはこちらです。

https://github.com/github/github-mcp-server



参考にした手順等はないのですが、Azure MCP Serverと同じ様に、install Serverからinstallしました。
二つのMCPServerを接続した結果がこちらです。



Azure MCPは npxで動くのに対し、githubは dockerが必要だったので一瞬つまづきましたが、無事起動はできている様です。
右下には工具マークで70と書かれており、クリックするとMCPサーバのツールがずらりと並んでいます。

今これだけのツールがあります。心強い。


 MCP Server２つを利用して開発体験は爆上げできるのか？それでは早速三つのお願いをしてみようと思います。この3つだけでアプリは実装できるのでしょうか？
github issueのリストをください
Azureのblob内に当該のファイルは確認できますか？
そのissueの内容を元に修正を行なってください

 1.github issueのリストをくださいgithubで hirayukis/MCP-demo のリポジトリの issueのリストを取得して

 2.Azureのblob内に当該のファイルは確認できますか？azure の blob内に当該のファイルは確認できますか？

 3.そのissueの内容を元に修正を行なってくださいそのissueの内容を元に修正を行なってください
しかし、この命令だけでは残念ながらうまく行きませんでした。

ここでうまくいくとめちゃくちゃかっこよかったのですが。

何が起きたかというと画像をlocalの架空のフォルダから読み取るスタイルで記述されてしまいました。

めげずに一旦続けようと思います。次の命令は以下です。
備考欄に注意してください、画像は Azure上にあります。
しかしこれも残念ながら connection stringを要求されてしまいました。せめてstorage account名に対しては何らかのアクションを見せて欲しかったところです。

az login しているので default credentialを利用してください。その上で storage account名は issueの中に明記されているはずです。
この命令文の時点ですでに若干エンジニアとしての経験が必要ですが、、、それでもこれで到達できれば個人的には十分です。
そして生成されたコードが以下です。
from flask import Flask, send_file
from azure.identity import DefaultAzureCredential
from azure.storage.blob import BlobServiceClient
import io

app = Flask(__name__)

# Azure Blob Storageの接続情報
STORAGE_ACCOUNT_NAME = "hiradevmcptest"
CONTAINER_NAME = "images"
BLOB_NAME = "sushi.png"

@app.route('/')
def hello_world():
    return f'<h1>Hello, World!</h1><img src="/sushi" alt="Sushi Image">'

@app.route('/sushi')
def sushi_image():
    try:
        # DefaultAzureCredentialを使用してBlobServiceClientを初期化
        credential = DefaultAzureCredential()
        blob_service_client = BlobServiceClient(account_url=f"https://{STORAGE_ACCOUNT_NAME}.blob.core.windows.net", credential=credential)
        blob_client = blob_service_client.get_blob_client(container=CONTAINER_NAME, blob=BLOB_NAME)

        # Blobデータのダウンロード
        blob_data = blob_client.download_blob().readall()
        return send_file(io.BytesIO(blob_data), mimetype='image/png')
    except Exception as e:
        print(e)
        return f"Error retrieving image: {str(e)}", 500

if __name__ == '__main__':
    app.run(debug=True)
そしてアプリは動くのか？どん！

おっけーい！！

 Blob内の更新を読み取れるか？Blobの中の変更に気づいてそれをコードに反映できるか試してみます。

え？コード上で list blobしたらいいのでは？っていうは置いておいて、CopilotとMCPの凄さをみてみましょう！（正直必要なケースは今想像できてないですが）

では以下の様に質問してみます。
blobの同じcontainerに今画像が一個増えているのは気がつきましたか？
お返事はこちらです。

優秀！もう１ラリー必要かと思いましたが話が早いですね！

実際のアプリもどん！

（実は一個手動で修正しましたが・・・１行程度なので）

優秀ー！（見切れていますが下の方に寿司が残っています。

 （まとめ）本当のことをいうと一つのプロンプトでまとめて Issueから課題を引っ張る＞それをそのままBlobの情報を参照し、画像を読み込んで表示ということがしたかったです。

英語で書いたissueも途中から日本語になっていることも忘れていましたし、僕のpromptの問題もあるかもしれません。。。ということで

 追加検証： promptと issueの中身を少し変えてみようまず Issueの中身を少し変えます。Issueも具体的すぎて正直よく考えたらAzureの中を読みにいく必要がないため、 「Blobの中にある複数のファイル」という抽象的な表現に変えます。
promptを以下の様に変更します。
github の hirayukis/MCP-demoというリポジトリにある issueの一覧から一つissueを見つけてそれを実装して欲しい。

また、Azureから情報を取得して実装する必要があるが、その旨もissue内に記載があるため、それを参照し、必要な情報はAzureから取得して実装して欲しい。

よろしく。
これでどうなるでしょうか？

結果はissueの探索から＞Blobの中の探索へ、理想の動きをしました！

なので結論、promptとissue次第でちゃんとできる。ということです。

 まとめMCPサーバを使えば開発体験がかなりあげられそうだと感じています。

社内のコード規約、terraformのサーバのリソース情報、slack/teamsの会話履歴、アプリケーションログなど気を遣うべき様々な情報を加味しながら最速かつ精度の高い開発ができるかもしれません。
意外とまだ僕の感覚としては、そこまですごいと思っていない人、まだ知らない人もちょっといると思います。そんなチームや社内に向けて役立つでもになれば幸いです。

 referenceまた、本記事の作成においては当日参加した AI駆動開発 Conferenceから大きなインスピレーションを得ました。

ありがとうございました。

https://aid.connpass.com/event/347756/