Claude DesktopでGitHub MCP Serverを使う
はじめに
Claude 3.7 Sonnetが、２月２５日に発表されましたね！
今回は、Claude DesktopにGitHubのMCP Serverを登録して、GitHub操作をさせながら開発する実験をしてみましたので、簡単に説明していきます。
読者対象
ClaudeのPro plan加入の人
GitHub + VSCode + Next.js での開発経験者
環境
MAC mini M2
Claude Desktop
GitHub Desktop
VSCode
GitHub MCP Server
開発環境
Next.js 15.1.7 （Typescript + App router）
node v23.1.0
作ったページ
今回実験して作ったページがこちらです。２ページだけのものです。
※ フォーム送信はapiがありますがダミーです。
トップページ
会社概要ページ
GitHub MCP Server 準備
GitHub MCP Serverをインストールします
GitHub MCP Server
ちなみにMCP Serverはいろいろあります
インストール
npm install -g @modelcontextprotocol/server-github
GitHubのPersonal Access Tokenを作成します
GitHubページのSettingsからDeveloper settingsに行って、
Personal access tokensから Tokens (classic)を選択。
Generate new tokenをクリックしてGenerate new token（classic）を選択して作成します。
Noteに記入して、あとはrepoだけチェックをいれて作成。作成されたアクセストークンはコピーしてメモしておきます。
Claude DesktopにMCP Serverを登録
claude_desktop_config.jsonを編集
{
"mcpServers": {
"github": {
"command": "npx",
"args": ["-y", "@modelcontextprotocol/server-github"],
"env": {
"GITHUB_PERSONAL_ACCESS_TOKEN": "作成したアクセストークン"
}
}
}
}
このclaude_desktop_config.jsonの場所ですが、
Claude DesktopのメニューSettingsから設定画面を開きます。
Developerを選ぶと、登録済みのMCP Serverが一覧表示されます。
下にあるEdit Configを押すと、claude_desktop_config.jsonのフォルダが開きます。
claude_desktop_config.jsonを編集したら、Claude Desktopを一旦終了させてから起動します。起動時にMCPのエラーが出なければOKです。そして、この画面のように右下に小さなアイコンが出ます。クリックすると有効なMCP Toolsの内容が表示されます。
使ってみる
さて、準備ができましたので、早速使ってみたいと思います。
新規プロジェクトを作成
Typescript + App routerです。
npx create-next-app@latest test-nextjs
新規プライベートリポジトリを作成
GitHub Desktopなどからこのプロジェクトのリポジトリを作成しておきます。
URL：https://github.com/xxxxxx/test-nextjsをメモしておきます。
Option:拡張機能のProject Analyzerを利用する
これは、AIにコード相談するときに参考となる、全体構成資料の生成とターミナルのログを記録します。プロジェクトの全体像をしっかり理解させたり、エラーを見せたりするのに利用するものです。
Project Analyzer 使い方
全体構成資料の生成
コマンドパレットで、projectAnalyzer.generateStructureと入力すると、
プロジェクトのルートに、project-structure.mdが作成されます。
生成内容は、上記URLから説明を見ていただけるとわかりますが、package.jsonの中身やファイル構成や、ts、js、pyのファイルの概要などをまとめた内容です。
ターミナルのログを記録
ステータスバーにあるTerminal Logをクリックで記録開始、再度クリックで停止します。
プロジェクトのルートに、terminal-history.txtが作成されます。
※ 記録中はコマンド実行が終了したタイミングで都度記録します。
それでは、Claude Desktopで開発スタート！
すでにMCP登録は済ませているので、早速GitHub操作を前提とした開発を進めていきます。
「https://github.com/xxxxxx/test-nextjs
このリポジトリにあるproject-structure.mdを読んで理解してから、以下の要件で作成してください。
・トップページを簡単な問い合わせフォームにしてください。バリデーションは別ファイルで行う構成で。」
もちろん、project-structure.mdがなくても、以下のように伝えれば理解してくれます。
「https://github.com/xxxxxx/test-nextjs
このリポジトリに、以下の要件で作成してください。
・トップページを簡単な問い合わせフォームにしてください。バリデーションは別ファイルで行う構成で。」
回答：
上記の画像は途中までのものですが、ちゃんとファイルを作成してくれました！
構造はこのようになっているそうです。
app/
├── api/
│ └── contact/
│ └── route.ts # 問い合わせフォームのAPIエンドポイント
├── components/
│ └── ContactForm.tsx # 問い合わせフォームのコンポーネント
├── lib/
│ └── validators/
│ └── contact-validator.ts # バリデーションロジック
└── page.tsx # トップページ（フォームを表示）
作成してくれたファイルをGitHubから取得して、VSCodeでさらっと確認し、yarn installしてyarn devしてみました。
できていますね！
では、さらにページをもう１つ追加してもらいましょう。
「では次に、新しいページを作成してください。about usページです。」
回答：
とりあえずできています！
会社概要という内容で、なんとなくそれっぽいことを書いてくれています。
次に、ちょっと構成を変更させてみましょう。
「別コンポーネントでヘッダーとフッターを作成して、メニューバーにその会社概要へリンクするようにしてください。」
回答：
できていました！見た目は変わらないので割愛します。
次は、あとからshadcn/uiに変えさせたら、ちゃんと対応できるかテストしてみましょう。
「UIデザインをすべてshadcn/uiに変更してください。」
回答はかなり長いので割愛しますが、ちゃんと全部修正してくれました。
あとは、こちらでnpx shadcn@latest initは行っておくのですが、わざわざそのための
setup-shadcn.shも作成してくれました。必要なコンポーネントのインストールも記載されていました。（ただ、古いコマンドの書き方だったので手直ししましたが）
最後に、
yarn buildしたらエラーが出ました。
インターフェース定義のエラーと未使用のimportが残っていたようです。
そのターミナルのログを記録し、GitHubにあげてから、
「terminal-history.txtを見て動作を確認して」
とすると、エラー内容を理解したので、修正してと依頼したらきちんと修正してくれました。
（もちろん、この拡張機能を使わないで、普通にコピペで渡してもいいのですが）
以上のやりとりで完成したページが、作ったページで掲載したものです。
まとめ
今回は簡単なものでしたので、Claude 3.7 Sonnetのノーマルモードで行ってみました。
Claude DesktopでもGitHub連携が可能になると、ここまで楽ができるのか〜という感じでした。
これなら、AIが回答してくれたコードをコピペしたりしなくてすみますね。
（CursorやWindsurfなど使えばいいのでは?という話は別として）
なお、ブランチ作成やissue作成もできますし、修正させたファイルを元に戻してといえば戻してくれます。
他にMCP Serverを追加するなら、web検索や指定URLの内容取得などでしょうか。
私はURL貼って読んでもらいたいことが多いので、Fetch MCP Serverを登録してます。
Brave Search MCP Server
Fetch MCP Server
あとは、コーディングルールのmdファイルを置いておくとか、Claudeと仕様書を作成してから実装させるなど、自分なりの使い方を確立していけば、これはこれで便利なのではないでしょうか。
Discussion