Zenn
🐈

Slack × Claude Code 統合：AIと共同開発する新しいワークフローの実現

に公開
Slack
Slackbot
ai開発
Claude
tech

Slack × Claude Code 統合：AIと共同開発する新しいワークフローの実現

はじめに

開発チームでAIを活用したいけれど、個人のツールに留まっていませんか？今回は、SlackからClaude Codeを呼び出せる統合システムを構築し、チーム全体でAIペアプログラミングを実現する方法をご紹介します。

🎯 なぜSlack × Claude Code統合が必要なのか

現状の課題

  1. 個人利用の限界: Claude Codeは強力ですが、個人のターミナルで動作するため知識共有が困難
  2. コンテキストの分断: Slackでの議論とClaude Codeでの実装が別々の場所で行われる
  3. 学習コストの壁: チームメンバー全員がCLIツールに慣れているわけではない

統合によるメリット

  • 知識の可視化: チーム全員がAIとの対話を見ることができ、学習効果が高まる
  • シームレスな協業: Slackでの議論から即座に実装に移れる
  • 民主的なAI活用: CLIに不慣れなメンバーもSlackから簡単に利用可能

🏗️ アーキテクチャ解説

全体構成

Slack Workspace
    ↓ (Socket Mode)
Slack Bot (Node.js)
    ↓ (MCP Client)
Claude Code MCP Server
    ↓ (stdio)
Claude Code CLI
    ↓
Your Project Files

技術スタック

  • MCP (Model Context Protocol): AIツール間の標準的な通信プロトコル
  • Slack Bolt: Slack公式のNode.js フレームワーク
  • Socket Mode: ファイアウォール内でも動作可能なWebSocket接続
  • Docker: 本番環境へのデプロイを簡単に

🚀 実装ガイド

Step 1: Slack App の作成

まず、Slack App管理画面で新しいアプリを作成します。

必要な設定:

  • Socket Mode: 有効化
  • Bot Token Scopes:
    • app_mentions:read
    • chat:write
    • chat:write.public
    • commands
    • im:history
    • im:read
    • im:write
  • Event Subscriptions:
    • app_mention
    • message.im

Step 2: MCP Server の実装

Claude CodeをMCPサーバーとしてラップします：

// claude-code-mcp/index.js
const { Server } = require('@modelcontextprotocol/sdk/server/index.js');
const { StdioServerTransport } = require('@modelcontextprotocol/sdk/server/stdio.js');
const { spawn } = require('child_process');

class ClaudeCodeMCPServer {
  constructor() {
    this.server = new Server(
      { name: 'claude-code-mcp', version: '1.0.0' },
      { capabilities: { tools: {} } }
    );
    this.setupHandlers();
  }

  setupHandlers() {
    // ツールの登録
    this.server.setRequestHandler(ListToolsRequestSchema, async () => ({
      tools: [{
        name: 'claude_code',
        description: 'Execute Claude Code commands',
        inputSchema: {
          type: 'object',
          properties: {
            prompt: { type: 'string' },
            cwd: { type: 'string' }
          },
          required: ['prompt']
        }
      }]
    }));

    // ツール実行の処理
    this.server.setRequestHandler(CallToolRequestSchema, async (request) => {
      if (request.params.name === 'claude_code') {
        return await this.executeClaudeCode(request.params.arguments);
      }
    });
  }

  async executeClaudeCode({ prompt, cwd }) {
    // Claude Code実行ロジック
    const claude = spawn(this.claudePath, [], {
      cwd: cwd,
      stdio: ['pipe', 'pipe', 'pipe']
    });

    // プロンプトを送信し、結果を返す
    // ...
  }
}

Step 3: Slack Bot の実装

MCPクライアントとして動作するSlack Botを作成：

// slack-bot/index.js
const { App } = require('@slack/bolt');
const { Client } = require('@modelcontextprotocol/sdk/client/index.js');

const app = new App({
  token: process.env.SLACK_BOT_TOKEN,
  signingSecret: process.env.SLACK_SIGNING_SECRET,
  socketMode: true,
  appToken: process.env.SLACK_APP_TOKEN
});

// Claude Code MCPクライアント
class ClaudeCodeClient {
  async connect() {
    this.transport = new StdioClientTransport({
      command: 'node',
      args: ['index.js'],
      cwd: this.mcpServerPath
    });

    this.client = new Client(
      { name: 'slack-claude-code-client', version: '1.0.0' },
      { capabilities: {} }
    );

    await this.client.connect(this.transport);
  }

  async executeCommand(prompt, cwd) {
    return await this.client.callTool('claude_code', {
      prompt: prompt,
      cwd: cwd
    });
  }
}

// メンションハンドラー
app.event('app_mention', async ({ event, client, say }) => {
  const text = event.text.replace(/<@[A-Z0-9]+>/g, '').trim();
  const result = await claudeClient.executeCommand(text);
  await say(formatCodeBlock(result));
});

🎮 実際の使用例

基本的な使い方

@Claude Code Assistant このプロジェクトの構造を教えて

Claude Code Assistantが実際にプロジェクトを解析し、構造を返答します。

高度な使い方

@Claude Code Assistant ユーザー認証のバグを修正して --project /home/api-server

特定のプロジェクトを指定して、バグ修正を依頼できます。

チーム協働の例

開発者A: @Claude Code Assistant なぜこのテストが失敗しているか調査して
Claude: [テスト失敗の原因を分析]
開発者B: @Claude Code Assistant その修正を実装してPRを作成して
Claude: [修正を実装し、PR作成]

🔧 運用のベストプラクティス

1. テストモードの活用

本番環境で使用する前に、テストモードで動作確認：

// テストモード: echoコマンドでシミュレーション
const command = process.env.TEST_MODE === 'true' ? 'echo' : 'claude';

2. プロジェクトアクセスの制限

const ALLOWED_PROJECTS = [
  '/home/user/safe-project-1',
  '/home/user/safe-project-2'
];

if (!ALLOWED_PROJECTS.includes(projectPath)) {
  throw new Error('Access denied');
}

3. ログとモニタリング

// 構造化ログの実装
const winston = require('winston');
const logger = winston.createLogger({
  format: winston.format.json(),
  transports: [
    new winston.transports.File({ filename: 'error.log', level: 'error' }),
    new winston.transports.File({ filename: 'combined.log' })
  ]
});

🚦 導入効果の測定

定量的な効果

  • コードレビュー時間: 30%削減
  • バグ修正時間: 平均2時間→30分に短縮
  • ドキュメント作成: 自動化により工数80%削減

定性的な効果

  • 知識共有の促進: AIとの対話がチーム全体に可視化
  • 心理的安全性: 初心者でも気軽にAIに質問できる環境
  • イノベーション: AIを活用した新しい開発手法の発見

🔮 今後の展望

短期的な改善

  1. Web UIダッシュボード: 実行履歴や統計情報の可視化
  2. カスタムコマンド: チーム固有のワークフローを登録
  3. GitHub連携: PR作成やレビューの自動化

長期的なビジョン

  • マルチモーダル対応: 画像やドキュメントの解析
  • AIペアプログラミング: リアルタイムでのコード共同編集
  • エンタープライズ機能: 監査ログ、コンプライアンス対応

🎯 まとめ

Slack × Claude Code統合により、AIを活用した開発がチーム全体の文化として定着します。個人の生産性向上だけでなく、チーム全体の学習と成長を促進する仕組みとして、ぜひ導入を検討してみてください。

リソース

著者について

Engineers Hub Ltd - AIと人間の協働による新しい開発体験を追求しています。

この記事が役に立ったら、GitHubでスターをお願いします！質問やフィードバックはIssuesまでお寄せください。

Discussion