NEW 新たにAIワーカー機能が登場。あなただけのAI社員をつくろう! 詳しくはこちら
AIワーカー機能であなただけのAI社員をつくろう! 詳しくはこちら
VS CodeのMCPサーバーとは?基礎知識と設定方法を解説
GitHubでIssueが作成されたら、AIワーカーで優先度判定と担当アサインを自動で行う
Yoomを詳しくみる
この記事のフローボットを試す
VS CodeのMCPサーバーとは?基礎知識と設定方法を解説
AI最新トレンド

2026-06-30

VS CodeのMCPサーバーとは?基礎知識と設定方法を解説

Tomomi Aizawa
Tomomi Aizawa

VS Codeで開発を進める中で、外部ツールのデータをもとにAIを活用できたら便利だと感じたことはありませんか?

そんな願いを叶えるのが、VS CodeのMCPサーバーです。

この記事では、MCP(Model Context Protocol)の基本的な仕組みから、設定方法までを分かりやすく解説します。

AIとの連携をスムーズにし、日々の開発作業を効率化するための第一歩として、ぜひ参考にしてみてください。

📉VS CodeのMCPサーバーとは?

VS CodeのMCPサーバーは、AIが外部の知識やツールにアクセスするための架け橋となる画期的な仕組みです。
まずは、その基盤となる技術とVS Code内での役割について詳しく見ていきましょう。

MCP(Model Context Protocol)の概要

MCP(Model Context Protocol)とは、AIクライアントが外部のデータソースや各種ツールに対して、統一された方式で接続・連携するための標準規格です。
これまで、AIが特定のデータベースや外部APIと連携するには、それぞれの仕様に合わせた専用の開発が必要でした。
しかしMCPの登場により、規格に沿ったサーバーを用意することで、MCP対応のAIクライアントがローカルファイルや社内データ、各種ツールにアクセスしやすくなります。
AIにとっての「共通の接続プラグ」のようなものであり、システムごとに異なっていた連携方法を標準化し、より柔軟なデータ活用を実現する技術として注目されています。

VS CodeにおけるMCPサーバーの役割

VS CodeにおけるMCPサーバーの主な役割は、GitHub CopilotなどのAI機能が、外部ツールやデータソースを利用できるようにすることです。
MCPを使わない場合でもAIはワークスペース内のファイルや一部の開発支援機能を扱えますが、ワークスペース外の情報へのアクセスは限定的です。MCPサーバーを適切に設定すれば、GitHubのIssueや外部ドキュメントなども参照しながら、より文脈に沿ったコード生成や修正を行えるようになります。

📉MCPサーバーを使うとVS Codeで何ができる?

MCPサーバーを活用すると、VS Code上のAIアシスタントは外部のデータベースやAPI、ドキュメント検索などと連携しやすくなります。
一方で、ファイル編集やローカルGit操作のように、MCPがなくても対応できる作業もあります。
違いを整理すると、次のようになります。


MCPを導入すると、こうした外部情報へのアクセスや連携を、より一貫した形で扱いやすくなります。対応するMCPサーバーを導入・設定することで、VS Code上のAIが外部サービスや社内情報を扱いやすくなります。 

※「△」は、ターミナル操作や既存の拡張機能などを使えば対応できる場合があることを示しています。

具体的にどんなことができるのか?詳しく見ていきましょう。

1.外部サービスや社内情報を参照しながら開発できる

対応するMCPサーバーを導入・設定することで、データベース、API、社内ナレッジなどの情報をVS Codeから参照しやすくなります。

たとえば、以下のような活用が可能です。

  • 社内ドキュメントや仕様書を参照しながらコードを生成する
  • データベースのスキーマを確認しながらSQLを作成する
  • API仕様をもとに連携コードを実装する

ツールを何度も切り替えずに必要な情報へアクセスしやすくなる点がメリットです。

2.AIが複数のツールを横断して作業しやすくなる

MCPを利用すると、ファイル編集だけでなく、外部サービスや各種ツールを組み合わせた作業もAIが扱いやすくなります。
たとえば、GitHubに対応したMCPサーバーや拡張機能を利用すれば、Issueの内容を確認し、その情報をもとにコード修正案を作成するといった流れを進めやすくなります。単発の操作だけでなく、複数ステップにまたがる開発作業との相性が良いのも特徴です。

3.VS Code中心の開発フローを作りやすくなる

情報収集、コーディング、検証、外部ツールとの連携などを、できるだけVS Code上に集約して進めやすくなります。
もちろん、すべての作業が完全にVS Code内で完結するわけではありません。しかし、複数のツールを行き来する場面を減らし、日常的な開発フローをよりスムーズに進めやすくなります。

⭐YoomはGitHubをはじめとしたツールの連携を自動化できます

VS Code MCPはエディタ内でAIと外部データを直接連携できて便利ですが、サーバーの初期設定や権限管理など、運用準備に手間がかかりますよね。
Yoomを使えば、複数ツール間の連携をノーコードで自動化しやすくなり、周辺業務の効率化につなげやすくなります。

[Yoomとは]

開発現場では、VS Codeでのコーディングだけでなく、周辺ツールの連携や通知の管理も重要です。
Yoomを利用することで、GitHubでIssueが更新された際にSlackやMicrosoft Teamsへ自動で通知を送るなど、日常的なワークフローをノーコードで簡単に自動化できます。専門的な開発知識がなくても扱いやすいため、プロジェクトの進行をスムーズにするサポートツールとして活躍します。


■概要
GitHubのIssue管理において、新しいIssueが作成されるたびに内容を確認し、優先度を判断して担当者を割り当てる作業は、プロジェクトが大きくなるほど煩雑になりがちです。このワークフローを活用すれば、Issue作成をトリガーとしてAIが内容を解析し、優先度付けと担当者のアサインを自動で行うため、まるで専属のGitHub AIエージェントのようにIssue管理の初動を効率化し、開発チームがより本質的な業務に集中できる環境を構築します。
■このテンプレートをおすすめする方
  • GitHubでのIssue管理における優先度付けや担当者割り振りに手間を感じている方
  • GitHub AIエージェントのような仕組みを導入し、Issueのトリアージを自動化したい方
  • 手作業によるIssueの仕分け作業をなくし、開発チームの生産性を向上させたい方
■このテンプレートを使うメリット
  • Issue作成後の優先度判定と担当者アサインが自動化されるため、手作業での確認や割り振りにかかる時間を短縮できます
  • AIが設定された基準で判断するため、担当者による判断のブレがなくなり、Issue管理業務の属人化を解消します
■フローボットの流れ
  1. はじめに、GitHubをYoomと連携します
  2. 次に、トリガーでGitHubを選択し、「Issueが新しく作成されたら」というアクションを設定します
  3. 最後に、オペレーションでAIワーカーを選択し、受け取ったIssueの情報をもとに優先度判定と担当者のアサインを行うためのマニュアル(指示)を作成します
※「トリガー」:フロー起動のきっかけとなるアクション、「オペレーション」:トリガー起動後、フロー内で処理を行うアクション
■このワークフローのカスタムポイント
  • GitHubのトリガー設定では、対象としたいリポジトリのオーナー名とリポジトリ名を任意で設定してください
  • AIワーカーの設定では、利用したいAIモデルを選択し、Issueの内容からどのように優先度を判定し、誰をアサインするかの基準を指示として具体的に設定してください
■注意事項
  • GitHubとYoomを連携してください。AIワーカー内で使用するツール(アプリ)についてもマイアプリ連携が必要です。
  • トリガーは5分、10分、15分、30分、60分の間隔で起動間隔を選択できます。
  • プランによって最短の起動間隔が異なりますので、ご注意ください。
  • AIワーカーの基本設定は「【AIワーカー】基本的な設定方法」をご参照ください。 
  • AIワーカーの同時実行数・作成可能なAIワーカー数・利用可能なAIモデルはご契約中のプランによって異なります。
  • AIワーカー内でご利用いただけるアプリやオペレーション等はフローボットの利用制限と同様です。
  • AIワーカーは、テスト実行でも本番実行と同様にタスクを消費しますのでご注意ください。詳細は「【AIワーカー】タスク実行数の計算方法」ご参照ください。 
  • AIワーカーはマニュアルを詳細に設定することで適切な処理を実行しやすくなります。詳細は「【AIワーカー】マニュアルの作成方法」をご参照ください。 


■概要
GitHubでの開発プロセスにおいて、プルリクエストごとの技術ドキュメント作成は重要ですが、手作業では手間がかかり、作成漏れも起こりがちです。このワークフローを活用すれば、GitHubでプルリクエストが作成されると、AIエージェント(AIワーカー)が技術ドキュメントの作成を自動で行い、開発の変更点を正確に記録するため、こうした課題を円滑に解消できます。
■このテンプレートをおすすめする方
  • GitHubを利用した開発プロセスにおけるドキュメント作成を効率化したいエンジニアの方
  • AIエージェントを活用した技術ドキュメント作成の自動化に関心がある開発チームのリーダーの方
  • 手作業によるドキュメントの作成漏れや品質のばらつきに課題を感じている方
■このテンプレートを使うメリット
  • プルリクエスト作成を起点にドキュメント作成が自動化されるため、これまで手作業に費やしていた時間を短縮できます。
  • 手作業によるドキュメントの作成漏れや記載ミスといったヒューマンエラーのリスクを軽減し、情報の正確性を保ちます。
■フローボットの流れ
  1. はじめに、GitHubとNotionをYoomと連携します。
  2. 次に、トリガーでGitHubを選択し、「プルリクエストが作成されたら」というアクションを設定します。
  3. 最後に、AIワーカーを用いて、取得した情報を基に技術ドキュメントを作成しNotionに記録するためのマニュアル(指示)を作成します。
※「トリガー」:フロー起動のきっかけとなるアクション、「オペレーション」:トリガー起動後、フロー内で処理を行うアクション
■このワークフローのカスタムポイント
  • GitHubのトリガー設定では、自動化の対象としたい任意のリポジトリ名を設定してください。
  • AIワーカーの設定では、利用したい任意のAIモデルを選択することが可能です。
  • AIワーカーへの指示(プロンプト)を任意の内容に設定し、生成する技術ドキュメントの形式や内容を調整してください。
■注意事項
  • GitHub、NotionのそれぞれとYoomを連携してください。AIワーカー内で使用するツール(アプリ)についてもマイアプリ連携が必要です。
  • トリガーは5分、10分、15分、30分、60分の間隔で起動間隔を選択できます。
  • プランによって最短の起動間隔が異なりますので、ご注意ください。
  • AIワーカーの基本設定は「【AIワーカー】基本的な設定方法」をご参照ください。
  • AIワーカーの同時実行数・作成可能なAIワーカー数・利用可能なAIモデルはご契約中のプランによって異なります。
  • AIワーカー内でご利用いただけるアプリやオペレーション等はフローボットの利用制限と同様です。
  • AIワーカーは、テスト実行でも本番実行と同様にタスクを消費しますのでご注意ください。詳細は「【AIワーカー】タスク実行数の計算方法」ご参照ください。
  • AIワーカーはマニュアルを詳細に設定することで適切な処理を実行しやすくなります。詳細は「【AIワーカー】マニュアルの作成方法」をご参照ください。

✅実体験!VS CodeでMCPサーバーを設定する方法

VS CodeでのMCPサーバー対応が進んだことで、以前より導入を試しやすくなっています。
ここでは基本的な設定の流れを順番に見ていきます。

今回はGitHubと連携させてVS CodeのMCPサーバー経由でGitHubを操作します。

1.MCP設定ファイルを作成する 

「.vscode」フォルダを作成し、その中に 「mcp.json」ファイルを作成します。

mcp.jsonファイルにMCPサーバーの設定情報を記載することでデータとAIを連携することができます。

2. GitHub用MCPサーバーの設定テンプレートを取得する 

GitHubと連携する場合はgithub/github-mcp-serverの公式READMEにある設定例を参考にします。

GitHub MCP Serverを利用する方法はいくつかあり、VS Codeではリモート接続で利用する方法のほか、Dockerでローカル実行する方法などがあります。今回はNPXを使ってGitHubのMCPサーバーを動かすため、Node.jsがインストールされている必要があります。

3. Node.jsをインストールして実行環境を準備する 

Node.js公式サイトの案内に従ってインストールします。

Windows用とMac用と別れているので、ご自身の環境に合ったものをインストールしましょう。


Node.jsベースの方法を利用する場合は、インストール後に node -v と npm -v を実行し、バージョンが表示されることを確認します。 

先ほどのGitHubのページに記載されているjsonの記述をコピーします。

先ほど作成したmcp.jsonファイルに貼り付けます。

「command」というのはMCPサーバーを起動するためのコマンドで、「args」が引数、「env」が環境変数の設定になります。

次は環境変数にGitHubのアクセストークンを設定していきます。

アクセストークンを取得するにはGitHubのページを開いて右上の自分のアイコンをクリックして「Settings」から左のメニューバーの1番下にある「Developer settings」というところをクリックします。

「Personal access tokens」→「Fine-grained tokens」→「Generate new token」とクリックしていきます。

「Token name」に適当な名前を設定します。
「Resource owner」が自分になっていることを確認し、「Expiration」の有効期限は適切なものを選択します。

そして「Repository access」で適切なものを選択し、「Permissions」から操作したい内容を選択します。
画像では「Issues」を選択し、アクセスを「Read and write」に変更しました。

他にも「プルリクエストを作りたい」や「コミットを操作したい」などGitHubでやりたいことをそれぞれを選択することができます。

入力が終わったら「Generate token」をクリックしていきましょう。

確認のためのポップアップが表示されるので内容を確認して「Generate token」を押します。
そうするとアクセストークンが表示されるので、これをコピーします。

※このページは一度閉じてしまうと二度と表示できなくなるので、ご注意ください。

VS Codeに戻り、ターミナルにWindowsPC、Macそれぞれ違うコマンドを実行して環境変数を設定します。

  • Windows

setx GITHUB_PERSONAL_ACCESS_TOKEN "あなたのトークン"

  • Mac

echo 'export GITHUB_PERSONAL_ACCESS_TOKEN="あなたのトークン"' >> ~/.zshrc

"あなたのトークン"に先ほどコピーしたトークンを貼り付けましょう。

成功すると保存されます。

※GitHubのアクセストークンは、mcp.jsonにそのまま書かず、環境変数やenvFile、inputsを使って設定するのがおすすめです。
こうしておくと、設定ファイルを他人と共有するときや保存するときに、トークンが見えてしまう危険を減らせます。

※OSの環境変数を使う方法は環境によって反映タイミングが異なるため、inputs や envFile を使う方法のほうが扱いやすい場合があります。 

4.MCPサーバー経由でGitHubを操作してみる 

では実際にテストしてみましょう。

「〇〇のtestリポジトリに『VS Codeのissueテストです』というissueを追加してください。」と入力しました。

内容を確認し、承認ダイアログが表示された場合は「許可」をクリックして進みます。

完了すると、作成されたIssueの詳細が表示されます。

GitHubを確認すると、指定のリポジトリにIssueが作成されています。

💡実際に使って感じたメリット・注意点


MCPサーバーを実際の開発に導入してみてわかった、実体験に基づくメリットと、運用上で気をつけるべきポイントをまとめました。

メリット

  • VS Codeと外部サービスを行き来する場面が減り、作業を進めやすくなる
  • GitHubのIssueや外部ドキュメント、API関連の情報を参照しながらAIの提案を受けやすくなる
  • 必要な情報確認や作業の切り替えにかかる手間の削減
  • 開発中の状況に合わせて、より文脈に沿った回答や提案を得やすくなる
  • 設定や認証が整っていれば、VS Code上で対応できる作業の幅が広がる

導入時の注意点

  • 外部サービスとの連携では、権限を広く与えすぎないよう注意が必要
  • アクセストークンなどの機密情報は、安全な方法で管理する必要がある
  • サーバーによっては、初期設定や認証に手間がかかる
  • 連携先や設定内容によっては、導入時の確認項目が増える
  • AIの提案をそのまま実行するのではなく、内容を人が確認する必要がある

📝まとめ

VS CodeのMCPサーバーを活用すると、AIエージェントが外部データや各種ツールと連携できるようになり、開発をよりスムーズに進めやすくなります。

拡張機能から導入できるMCPサーバーもあり、以前より試しやすくなっているのも魅力です。
また、GitHub連携やWeb検索などを組み合わせれば、ツールを行き来する手間を減らし、VS Code上で作業しやすい環境を整えやすくなるでしょう。機密情報の扱いや権限設定には注意しつつ、自分の用途に合ったMCPサーバーを取り入れてみてください。 

⭐Yoomでできること

Yoomは、エンジニアに限らず、さまざまな部門で活用しやすい業務自動化プラットフォームです。
ノーコードで複数のアプリを連携できるため、専門的な開発知識がなくても業務フローを構築しやすいのが特長です。
たとえば、プロジェクト管理ツールでチケットが起票された際に、関連データを集約してデータベースへ登録し、担当者へ通知するといった一連の流れも自動化できます。
こうした自動化によって手作業の負担を減らし、より重要な業務に時間を使いやすい環境づくりにつなげられます。


■概要
GitHubでプルリクエストが更新されるたびに、手動でテストシナリオを作成・更新する作業は、開発サイクルのボトルネックになりがちです。 このワークフローを活用することで、プルリクエストの変更内容をAIが自動で解析し、最適なテストシナリオを自律的に生成します。まるで専属のAIエージェントがいるかのように、テスト自動化のプロセスを効率化し、開発スピードの向上に貢献します。
■このテンプレートをおすすめする方
  • GitHubでの開発プロセスにおける、テストシナリオ作成の工数を削減したい開発チームの方
  • AIエージェントの技術を活用して、テスト自動化の仕組みを構築したいと考えているQAエンジニアの方
  • 手動でのテスト項目作成によるヒューマンエラーや、レビュー工数を削減したいプロジェクトマネージャーの方
■このテンプレートを使うメリット
  • プルリクエストの更新をトリガーにAIがシナリオを自動生成するため、これまで手作業に費やしていた時間を短縮し、コア業務に集中できます。
  • AIがコードの変更点に基づいたテストシナリオを生成するため、担当者による品質のばらつきを防ぎ、テストプロセスの標準化を実現します。
■フローボットの流れ
  1. はじめに、GitHub、Slack、Google スプレッドシートをYoomと連携します。
  2. 次に、トリガーでGitHubを選択し、「プルリクエストは作成または更新されたら」というアクションを設定します。
  3. 次に、オペレーションで「分岐」を設定し、更新時のみ後続の処理が行われるようにします。
  4. 最後に、オペレーションでAIワーカーを設定し、GitHubのプルリクエストからコードの変更内容を解析し、最適なテスト自動化シナリオを生成・提案するためのマニュアル(指示)を作成します。
※「トリガー」:フロー起動のきっかけとなるアクション、「オペレーション」:トリガー起動後、フロー内で処理を行うアクション
■このワークフローのカスタムポイント
  • AIワーカーへの指示(プロンプト)は、ユーザーの環境に合わせて自由にカスタムが可能です。例えば、特定のテストフレームワークを指定したり、トリガーで取得したプルリクエストのタイトルや本文を変数として埋め込んだりすることで、より精度の高いテストシナリオを生成できます。
■注意事項
  • GitHub、Slack、Google スプレッドシートのそれぞれとYoomを連携してください。AIワーカー内で使用するツール(アプリ)についてもマイアプリ連携が必要です。
  • トリガーは5分、10分、15分、30分、60分の間隔で起動間隔を選択できます。
  • プランによって最短の起動間隔が異なりますので、ご注意ください。
  • 分岐はミニプラン以上のプランでご利用いただける機能(オペレーション)となっております。フリープランの場合は設定しているフローボットのオペレーションはエラーとなりますので、ご注意ください。
  • ミニプランなどの有料プランは、2週間の無料トライアルを行うことが可能です。無料トライアル中には制限対象のアプリや機能(オペレーション)を使用することができます。
  • AIワーカーの基本設定は「【AIワーカー】基本的な設定方法」をご参照ください。 
  • AIワーカーの同時実行数・作成可能なAIワーカー数・利用可能なAIモデルはご契約中のプランによって異なります。
  • AIワーカー内でご利用いただけるアプリやオペレーション等はフローボットの利用制限と同様です。
  • AIワーカーは、テスト実行でも本番実行と同様にタスクを消費しますのでご注意ください。詳細は「【AIワーカー】タスク実行数の計算方法」ご参照ください。 
  • AIワーカーはマニュアルを詳細に設定することで適切な処理を実行しやすくなります。詳細は「【AIワーカー】マニュアルの作成方法」をご参照ください。 


■概要
Slackに寄せられるバグ報告の一次対応にお困りではありませんか?情報の精査やプロジェクト管理ツールへの転記作業は手間がかかるだけでなく、対応の遅れが大きなリスクに繋がることもあります。このワークフローを活用すれば、Slackのバグ報告をAIワーカーが解析し、Jira Softwareへのチケット起票まで自動で完結できます。手作業による工数を削減し、スムーズなトラブル対応を実現します。

■このテンプレートをおすすめする方
  • Slackで受け取ったバグ報告をJira Softwareへ転記する作業に、毎日多くの時間を費やしているエンジニアの方
  • 多数のバグ報告の中から緊急性の高いものを判別し、優先順位付けを効率化したいプロジェクトマネージャーの方
  • 報告内容の精査からチケット起票までのプロセスを自動化し、対応の漏れや遅れを最小限に抑えたいCS担当者の方

■このテンプレートを使うメリット
  • Slackに投稿された内容をAIが解析してJira Softwareに自動起票するため、手作業での転記ミスを防ぎ、対応開始までのスピードを向上させます。
  • 緊急度や担当領域の判断をAIが自動で行うため、一次受け担当者の工数を削減し、本来注力すべき開発や顧客対応に集中できる環境を整えます。

■フローボットの流れ
  1. はじめに、SlackとJira SoftwareをYoomと連携します
  2. 次に、トリガーで、Slackの「メッセージがチャンネルに投稿されたら(Webhook)」アクションを設定します
  3. 最後に、AIワーカーで、報告内容を解析し緊急度や担当領域を判断してチケットを作成するためのマニュアル(指示)を作成します
※「トリガー」:フロー起動のきっかけとなるアクション、「オペレーション」:トリガー起動後、フロー内で処理を行うアクション

■このワークフローのカスタムポイント
  • Slackのトリガー設定では、バグ報告を受け付ける特定のチャンネルIDを正しく指定してください。
  • AIワーカーのマニュアル(指示内容)を調整することで、自社特有の緊急度判定基準やプロジェクト、コンポーネントの割り振りを詳細に指定することが可能です。
  • Jira Softwareで作成するチケットの項目(要約や説明、ラベルなど)を、組織の運用ルールに合わせてカスタマイズしてください。

■注意事項
  • Slack、Jira SoftwareのそれぞれとYoomを連携してください。AIワーカー内で使用するツール(アプリ)についてもマイアプリ連携が必要です。
  • AIワーカーの基本設定は「【AIワーカー】基本的な設定方法」をご参照ください。
  • AIワーカーの同時実行数・作成可能なAIワーカー数・利用可能なAIモデルはご契約中のプランによって異なります。
  • AIワーカー内でご利用いただけるアプリやオペレーション等はフローボットの利用制限と同様です。
  • AIワーカーは、テスト実行でも本番実行と同様にタスクを消費しますのでご注意ください。詳細は「【AIワーカー】タスク実行数の計算方法」ご参照ください。
  • AIワーカーはマニュアルを詳細に設定することで適切な処理を実行しやすくなります。詳細は「【AIワーカー】マニュアルの作成方法」をご参照ください。 

出典:

[VS Code の設定から MCPサーバーを追加して GitHub Copilot agent mode で利用してみる](https://qiita.com/youtoy/items/adfeedeedf1309f194ce) / [Visual Studio CodeでMCP Serverを使えるようにしてみた](https://zenn.dev/kenshintatsumi/articles/9250aa8303a72f)

Yoomを使えば、今回ご紹介したような連携を
プログラミング知識なしで手軽に構築できます。
無料でYoomを試す
この記事を書いた人
Tomomi Aizawa
Tomomi Aizawa
皆さまの毎日のお仕事がもっと楽になりますように! Yoomを使った業務効率UP情報を発信していきます!
タグ
MCPサーバー
関連記事
お役立ち資料
Yoomがわかる!資料3点セット
Yoomがわかる!資料3点セット
資料ダウンロード
3分でわかる!Yoomサービス紹介資料
3分でわかる!Yoomサービス紹介資料
資料ダウンロード
Before Afterでわかる!Yoom導入事例集
Before Afterでわかる!Yoom導入事例集
資料ダウンロード
お役立ち資料一覧を見る
詳しくみる