Go to Qiita Advent Calendar Top
LoginSignup
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@pixar2867(西島 康孝)

GitHub Copilot + Windows 11 + WSL2 + VSCodeにおけるMCPサーバー設定ガイド

Last updated at Posted at 2025-11-20

1. 概要

目的

Windows環境でVSCodeを使用する際に、GitHub Copilotの性能を上げるべく、Context7、Playwright、SerenaのMCPサーバーを設定したので備忘録として導入手順をまとめる。

対象環境

  • OS: Windows 11
  • WSL2: Ubuntu 24.04
  • VSCode: Windows版（WSLにリモート接続）
  • Node.js: 22.16.0以降

各MCPサーバーの役割

  • Context7: LLMに最新のライブラリドキュメントとコード例をリアルタイムで提供し、古い情報やAPIの幻覚を防ぐ
  • Playwright: ブラウザ自動化とWebページとのインタラクションを可能にする
  • Serena: LSP（Language Server Protocol）を活用した、セマンティックなコード検索・編集機能を提供する。より高度なコード解析やリファクタリング支援を行うために利用されます

MCPとは

Model Context Protocol（MCP）は、AIアシスタントとデータソースを接続するためのオープン標準プロトコル。各データソースごとに個別の実装を行う必要がなく、単一のプロトコルで多様なシステムと接続できる。

2. 前提条件の準備

2.1 基本環境

以下がインストール済みであることを確認：

  • Windows 11
  • WSL2 + Ubuntu 24.04
  • VSCode（Windowsにインストールして、WSLではVSCodeバイナリファイルをマウントして使っています）
  • Node.js 22.16.0以降（WSL内）

2.2 uv導入（Serena用）

uvは、Rustで書かれた高速なPythonパッケージマネージャー。pipの10〜100倍の速度で動作し、Python環境の管理、パッケージのインストール、仮想環境の作成を統合的に行える。

WSL内で実行：

curl -LsSf https://astral.sh/uv/install.sh | sh

インストール後、パスを確認：

which uvx
# 出力例: /home/yasutaka/.local/bin/uvx
# pythonのバージョン確認
$ uv python find --show-version
# 出力例:3.12.12

Ubuntu 24.04では、Python 3.12がデフォルトでプリインストールされています。具体的には、標準のPython3コマンドpython3 --versionを実行するとPython 3.12.3のバージョンが表示されるため、Python 3.12がデフォルト環境として組み込まれていることがわかります。python管理と仮想環境化で実行するためのuvのインストールで十分です。pythonが入ってない場合は別途インストールしてくだささい。

2.3 Context7 APIキー取得

  1. https://context7.com でアカウント登録
  2. ダッシュボードにログイン
  3. API Keyを発行
  4. 発行したKeyは安全に保管（再表示できないため注意）

2.4 playwright用のブラウザバイナリファイルをインストール（Webブラウザが動作するための実行可能なプログラムファイル）

# こちらで全ブラウザがインストールされる
npx playwright install
# Chromeブラウザだけ個別にインストールしないと動かないかったので入れてます
npx playwright install chrome

上記を実行すると/home/ユーザー名/.cache/ms-playwright/に実行ファイルが保存されるはずです。

これだけで動作するはずです。もしエラーが出る場合は、システム依存関係のインストールが必要な可能性があります：

# エラーが出た場合のみ実行
npx playwright install-deps

3. mcp.json設定

3.1 設定ファイルの配置

VSCodeはWindows側の設定を参照するため、以下のパスに配置：

C:\Users\ユーザー名\AppData\Roaming\Code\User\mcp.json

※ ユーザー名 は自分のWindowsユーザー名に置き換える

3.2 設定ファイル全体

{
	"inputs": [
		{
			"id": "CONTEXT7_API_KEY",
			"type": "promptString",
			"description": "API key for authentication",
			"password": true
		}
	],
	"servers": {
		"microsoft/playwright-mcp": {
			"type": "stdio",
			"command": "npx",
			"args": [
				"@playwright/mcp@latest"
			]
		},
		"io.github.upstash/context7": {
			"type": "stdio",
			"command": "npx",
			"args": [
				"@upstash/context7-mcp@1.0.25"
			],
			"env": {
				"CONTEXT7_API_KEY": "${input:CONTEXT7_API_KEY}"
			}
		},
		"oraios/serena": {
			"type": "stdio",
			"command": "wsl",
			"args": [
				"-e",
				"/home/yasutaka/.local/bin/uvx",
				"--from",
				"git+https://github.com/oraios/serena",
				"serena",
				"start-mcp-server",
				"serena==latest",
				"--context",
				"ide-assistant"
			]
		}
	}
}

3.3 各サーバーの設定解説

Context7

  • ${input:CONTEXT7_API_KEY}: VSCode起動時にAPIキー入力を促すプロンプトを表示
  • 認証後、最新のライブラリドキュメントにアクセス可能

Playwright

Serena

  • command: "wsl": WindowsからWSL環境のコマンドを実行
  • /home/yasutaka/.local/bin/uvx: uvxの絶対パスを指定（ユーザー名は自分の環境に合わせる）
  • -context ide-assistant: IDE統合用の設定で、VSCodeなどの組み込み機能との重複を避ける

4. 使用方法

Context7

プロンプトに use context7 を追加：

Next.jsの最新のapp routerの使い方を教えて。use context7

Context7がバージョン固有のドキュメントとコード例を取得し、古い情報や存在しないAPIへの参照を排除することができて、質問への回答も正確になります。

Playwright

ブラウザ操作やスクリーンショット取得、JavaScriptの実行などが可能。VSCodeのAI機能から自動的に利用される。Copilotのチャット欄に以下のようなプロンプトを書いて送信するとブラウザが開いて操作が行われます。

基本的な操作

◆ページを開く:

"https://example.com を開いて"
"Googleのホームページに移動して"

◆要素をクリック:

"ログインボタンをクリックして"
"検索ボタンを押して"

◆テキスト入力:

"検索ボックスに『TypeScript』と入力して"
"ユーザー名フィールドに test@example.com と入力して"

◆ページのスクリーンショット:

"現在のページのスクリーンショットを撮って"
"画面をキャプチャして"

Serena

1.プロジェクト作成・設定

プロジェクトディレクトリで以下を実行
既存プロジェクトの場合主要言語は自動検出できる

## 既存プロジェクトの場合
uvx --from git+https://github.com/oraios/serena serena project create --name "My Project"

## 新規プロジェクトの場合は主要言語を`--language`オプションで複数指定できる
uvx --from git+https://github.com/oraios/serena serena project create --language python --language typescript --name "My Project"

2. プロジェクトのインデックス化

大規模プロジェクトでは初回インデックス化推奨

uvx --from git+https://github.com/oraios/serena serena project index

これでコード構造を素早く参照可能

3. プロジェクトのアクティベート（初回のみ）

該当のプロジェクトのルートディレクトリに移動して、チャット欄以下を自然言語で入力すると”Serenaに「どのプロジェクトを操作するか」を認識させることができます

Activate the project /path/to/my_project

4. オンボーディング（プロジェクトに慣れさせる）

以下のチャットに打ち込むと中身を検査して、”memories”ディレクトリにプロジェクトの中身を説明するためのコンテキストが生成されます**

@serena onboarding

5. 動作確認

自然言語で指示するだけでエージェントがSerenaを使って動くはず

@serena list_dir

@serena read_file .githooks/pre-commit

「Foo関数の直後にテストを追加」

「BarクラスのDocstringを書き換え」

「utils.pyの主要シンボルを整理」など

5. トラブルシューティング

APIキーが要求される

Context7の初回接続時にVSCodeがプロンプトを表示。発行したAPIキーを入力。

Serenaが起動しない

uvxのパスが正しいか確認：

which uvx

mcp.jsonの/home/yasutaka/.local/bin/uvxを実際のパスに修正。

WSL連携エラー

command: "wsl"が正しく機能するには、WSL2が正常に動作している必要がある。WSLのバージョンを確認：

wsl --version

6. 参考リンク

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?