これからのGitHubのIssue作成はAIエディタ内で済ませよう
WindsurfでMCPが本格的に使用できるようになってからこれまでブラウザで行っていたGithub issueの管理をAIエディタに移行しました。これがissueの作成スピード、クオリティともに爆上がりするとてもいい決断だったので記事にすることにしました。
※この記事では、Windsurf, MCPそのものの説明はしません。WindsurfはAIエディタで、MCPはAIエージェントが外部のデータやサービスにアクセスするための通信方法です。
結論から
最高な点
-
最短5分程度で高クオリティのIssueが出来上がる。
実際のコードを見てAIが関連ファイルや修正点を洗ってくれるので既に7割くらい開発終了しているくらいのレベルの指示書が出来上がる。
改善が期待される点
-
通信に失敗するケースがある。
意外と起きます。これは多分Windsurfが〜とかCursorが〜とかではなくてMCP全般に言えること？だと思うのですが不安定な時が多々あります。そんな時は諦めてコピペしましょう。
Node.jsのバージョンが関係しているとか見かけましたが時間があれば調査してみようと思っています。
▼実際に作ってみたIssue（サンプル）
前提
基本的には、以下の組み合わせで使用しています。
AIエディタ：Windsurf
モデル：Cascade Base
（その他：SuperWhisperで音声入力）
Cascade Baseは、WindsurfのNon-Premiumのモデルでクレジットを消費しません。
このCascade Baseが意外と優秀でMCPを介した通信も問題なくこなすことができます。（Proモード以上のユーザーでしか使用不可です。）
無料でMCPを何度でもCallできるのはとても魅力的です。
試していないこと
- アサイン
- マイルストーン
- Open/Closeの変更failure in mcp tool
手順① エディタ上でのMCPの設定
CascadeのハンマーアイコンをクリックしてConfigureを選択するとmcp_config.jsonが開きます。
以下のようにgithubのMCPがセットされていることを確認してください。
{
"mcpServers": {
"github": {
"command": "npx",
"args": ["-y", "@modelcontextprotocol/server-github"],
"env": {
"GITHUB_PERSONAL_ACCESS_TOKEN": "abc123456789123456789" //要書き換え
}
},
"slack": {
"command": "npx",
"args": ["-y", "@modelcontextprotocol/server-slack"],
"env": {
"SLACK_BOT_TOKEN": "xoxb-123456789123456789"
}
}
}
}
手順② 呼び出しテスト
MCPを設定しただけではレポジトリ情報は伝わっていないのでAIに伝えてあげる必要があります。必要な情報はレポジトリの所有者とレポジトリ名です。ややこしく考えずURLを与えるだけで良いです。
issueを新しく作成してもらいます。
https://github.com/ks0318-p/sample_issue_repoに新しいissueを作成して
と指示すると、GitHubのMCPはリクエストを以下のようなカタチで投げます。
{
"owner": "ks0318-p",
"repo": "sample_issue_repo",
"title": "New Issue",
"body": "This is a newly created issue."
}
そして、このようなレスポンスを返してくれます。
Issue Details:
Issue Number: 1
Title: New Issue
Body: This is a newly created issue.
Link to Issue: View Issue
もちろん、ブラウザ上でもissueが作成されています。
※Windsurfの人は、「このGitHubのURLを記憶してください。」と投げておくとメモリ機能で次からURL無しでもいけるので便利です。
手順③ MDファイルの作成
次にエディタ上でGitHubのissue管理のためのディレクトリを作成します。
私は普通に/github/issuesというフォルダ内に作成していますが適宜好きなところに作成してください。
mkdir -p /github/issues
手順②でIssueを作成した際にIssueの番号が分かったので、次はissuesファイルの中に#{issueNum}.mdを作成します。今回の場合は、#1.mdになります。
これで作成された、/github/issues/#1.mdが今回issueの内容を書き込んでいくファイルになります。
GitHubのissueがマークダウン形式での記述であり、AIとマークダウン形式の相性がとてもいいのでここでは必ずMDファイルを作成するようにしましょう。
手順④ MDファイルの編集
ここでは、AIエージェントを使用しながらissueの内容を書き込んでいきます。
サンプルですが、以下のような内容が5分程度で作成できました。
# Issue #1: メールベースのユーザー招待機能の開発
Created: 2025-02-23
Author: ks0318-p
Assignee: ks0318-p
## 概要
- メールベースのユーザー招待機能の実装
- 招待リンクの生成と管理機能の開発
## 背景
- チームメンバーの招待を効率化する必要がある
- 現在は手動でのユーザー登録しかなく、運用負荷が高い
- セキュアな招待プロセスの確立が必要
## タスク
- 招待メール送信機能の実装
- メールテンプレートの作成
- メール送信処理の実装
- 招待リンクの生成機能
- 一意な招待トークンの生成
- 招待リンクの有効期限設定
- 招待情報のDB登録（トークン、メールアドレス、有効期限、招待者情報）
- 招待状態管理機能
- 招待一覧の表示
- 招待の取り消し機能
- 招待状態の更新（未受訳、受訳済み、期限切れ、取り消し）
- 招待リンクからの登録フロー
- 招待トークンの検証
- ユーザー登録フォームの実装
- ユーザー情報のDB登録（メールアドレス、パスワードハッシュ、プロフィール情報）
- 招待状態の更新（受訳済みに変更）
## 必要なパッケージ
{
"dependencies": {
"@sendgrid/mail": "^8.1.0",
"bcryptjs": "^2.4.3",
"nanoid": "^5.0.5",
"zod": "^3.22.4"
},
"devDependencies": {
"@types/bcryptjs": "^2.4.6",
}
}
### パッケージの役割
- `@sendgrid/mail`: 招待メールの送信
- `bcryptjs`: パスワードのハッシュ化
- `date-fns`: 日付操作
- `nanoid`: 招待トークンの生成
- `zod`: フォームバリデーション
## 関連ファイル
- `/src/app/api/invitations/route.ts`
- `/src/components/invitations/InviteForm.tsx`
- `/src/components/invitations/InvitationList.tsx`
- `/src/lib/email.ts`
- `/prisma/schema.prisma`
## DBスキーマ
model Invitation {
id String @id @default(cuid())
email String
token String @unique
status InviteStatus @default(PENDING)
expiresAt DateTime
invitedBy User @relation("invitations", fields: [invitedById], references: [id])
invitedById String
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
}
enum InviteStatus {
PENDING
ACCEPTED
EXPIRED
CANCELLED
}
model User {
id String @id @default(cuid())
email String @unique
password String
name String?
invitations Invitation[] @relation("invitations")
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
}
## 留意点
- 招待メールのスパム対策
- 招待リンクのセキュリティ対策
- メール送信のエラーハンドリング
- 招待数の制限設定
- 招待履歴のログ管理
手順⑤ Issueの内容を反映する
#1.mdの内容で、対応するgithubのIssueの内容を更新してください。
とすると、再度MCP経由での通信が始まります。
成功したとの通知が返ってくれば、手順②で作成したGithub上のIssueが更新されているはずです。
これで完了です！
補足
この記事で紹介したのはgithubのMCPでできるほんの1例になります。もっといろいろな事ができますのでこちらに挙げておきます。（Windsurfは計17個のアクションが可能。詳しく見れていませんが、Clineはもっとありそうでした。）
| アクション名 | 説明 |
|---|---|
| github_create_or_update_file | GitHubリポジトリ内のファイルを作成または更新します。 |
| github_search_repositories | GitHubリポジトリを検索します。 |
| github_create_repository | 新しいGitHubリポジトリを作成します。 |
| github_get_file_contents | GitHubリポジトリ内のファイルまたはディレクトリの内容を取得します。 |
| github_push_files | 複数のファイルを単一のコミットでGitHubリポジトリにプッシュします。 |
| github_create_issue | 新しいIssueをGitHubリポジトリに作成します。 |
| github_create_pull_request | GitHubリポジトリで新しいプルリクエストを作成します。 |
| github_fork_repository | GitHubリポジトリを自分のアカウントまたは指定した組織にフォークします。 |
| github_create_branch | GitHubリポジトリに新しいブランチを作成します。 |
| github_list_commits | GitHubリポジトリのブランチのコミットリストを取得します。 |
| github_list_issues | GitHubリポジトリのIssueをフィルタリングオプションでリストします。 |
| github_update_issue | 既存のIssueをGitHubリポジトリで更新します。 |
| github_add_issue_comment | 既存のIssueにコメントを追加します。 |
| github_search_code | GitHubリポジトリ内のコードを検索します。 |
| github_search_issues | GitHubリポジトリ内のIssueやプルリクエストを検索します。 |
| github_search_users | GitHubでユーザーを検索します。 |
| github_get_issue | 特定のGitHubリポジトリのIssueの詳細を取得します。 |
最後に
Xにて、実務で得たAI駆動開発に関する知見をアウトプットしています。良ければフォローお願いします！
Discussion