Zenn
🐉

【Claude × MCP × Devin】全自動AI開発マニュアル

に公開
AI
Model Context Protocol
ChatGPT
Claude
Devin
tech

やりたいこと

作りたい機能を思い描いたら勝手に開発してくれる世界を目指します。

全体の設計

issue作成をChat型AIで行い、MCPを経由してGitHubにissueを立てて、Slackを通してDevinに依頼をして、作成されたプルリクエストをレビューしてマージするを繰り返すイメージです。

実際に構築していく

1. Claudeを使ってGitHub MCPの連携

GitHubからパーソナルアクセストークンを取得

GitHubページのSettings→Developer settings→Personal access tokens→Tokens (classic)の画面から右上の「Generate New Token」から作成

Claudeの設定ファイルからGitHub MCPを連携

Claude Desktopから設定→開発者→構成を編集を押すとjsonが開かれるので編集していく

claude_desktop_config.json
{
    "mcpServers": {
        "github": {
            "command": "npx",
            "args": ["-y", "@modelcontextprotocol/server-github"],
            "env": {
                "GITHUB_PERSONAL_ACCESS_TOKEN": "[作成したパーソナルアクセストークン]"
            }
        }
    }
}

2. Claudeを使ってSlack MCPの連携

ClaudeからSlack MCPを使ってSlackを操作するには大きく分けて①Bot User OAuth Tokenと②Team IDが必要です。

Slack APIからSlackアプリを作成

右上の「Create New App」からFrom Scratchを選択して名前とワークスペースを選択する

SlackアプリのScopesを追加

OAuth & Permissions→Scopesで付与する権限を設定する。
今回は以下のScopesを追加した。

スコープ名 機能概要 Claudeとの連携におけるメリット
channels:history 参加しているチャンネルの過去メッセージを閲覧可能 過去の会話内容に合わせた文章で連絡可能
channels:read パブリックチャンネルの基本情報（名前、説明、IDなど）を取得 チャンネルを選ぶことができる
chat:write Slackを通してメッセージ送信が可能 ClaudeからSlackを通してDevinに依頼メッセージを送ることができる
team:read ワークスペースの名前・ドメイン・アイコンなどを取得 特になし
users:read ワークスペースユーザーの情報（表示名、ID、アイコンなど）を取得 ユーザー情報を元にフィルタリングを行い連絡できる

Slackアプリをワークスペースにインストールしトークンを取得

OAuth & Permissions→OAuth Tokensの部分にInstall to {ワークスペース名}があると思うのでそれを選択してワークスペースにインストール

SlackのTeam IDを取得

追加したワークスペースをwebで開くとhttps://app.slack.com/client/{TeamID}となっているので、そこからTeam IDを取得。(分からない場合はhttps://{ワークスペースslug}.slack.com)でアクセスすると上記のURLに飛ぶことができる。

参考
https://slack.com/intl/ja-jp/help/articles/221769328-Slack-URL-または-ID-を確認する#find-your-workspace-or-org-id

Claudeの設定ファイルにSlack MCPを登録

GitHub MCPを登録した際と同じようにconfigファイルを開いて設定

claude_desktop_config.json
{
    "mcpServers": {
        "github": {
            "command": "npx",
            "args": ["-y", "@modelcontextprotocol/server-github"],
            "env": {
                "GITHUB_PERSONAL_ACCESS_TOKEN": "[作成したパーソナルアクセストークン]"
            }
        },
        "slack": {
            "command": "npx",
            "args": ["-y", "@modelcontextprotocol/server-slack"],
            "env": {
                "SLACK_BOT_TOKEN": "[作成したBot User OAuth Token]",
                "SLACK_TEAM_ID": "[確認したTeam ID]"
            }
        }
    }
}

3. Devinを追加

Devinのオンボーディングについては他の記事がたくさんあるため割愛します。

参考
https://zenn.dev/nemofilm/articles/8dde98797d0a48

実際に動作させた感想

実際にClaudeからGithubのissueを作成させ、SlackからDevinに開発を依頼させて、実際にプルリクエストを作成してもらいレビューしマージすることまでできた。かなり快適

Discussion