Cursor + Slackで、ベッドで寝ながら開発

Cursor＋Slack＝ベッドで寝ながら開発

🎯 ここがキモ！スレッド内の全やりとりが自動でコンテキストになる

Cursorから衝撃の機能が公開されました。Slackからバックグラウンドエージェントが呼び出せるように！
📄 公式ドキュメントはこちら

実は、これが一番ヤバい機能なんです。Slackのスレッド内でAIと壁打ちしながら「こんな機能作りたいんだけど、どうやったらいいかな？」「認証周り、どのライブラリ使えばいい？」みたいに相談して、設計や実装方法まで詰めていく。

そのやりとり全部がコンテキストとして自動的にCursorのバックグラウンドエージェントに渡されるので、最後に「@Cursor 上記の通りに実装して」って一言言うだけで、それまでの議論内容を完璧に理解した状態で実装が始まるんです。

つまり、思考プロセスから要件定義、技術選定、実装方針まで、すべての文脈を保ったまま開発に入れる。これ、マジで革命的ですよ。

この記事をシェア

この記事で学べること

• バックグラウンドエージェントの革新的な仕組み
• Slackスレッド全体をコンテキストとして活用する方法
• 完全なセットアップ手順（初心者でも再現可能）
• アイデア出しから実装完了までの実践ワークフロー

必要なアカウント・環境:

• Slackワークスペースの管理者権限
• Anthropic APIキー（console.anthropic.comで取得）
• Node.js開発環境（ローカル + ngrok、またはクラウドサービス）

# プロジェクト作成

mkdir slack-claude-bot

cd slack-claude-bot

npm init -y

# 依存関係インストール

npm install @slack/bolt @anthropic-ai/sdk dotenv express

npm install -D nodemon

# .env

SLACK_BOT_TOKEN=xoxb-your-bot-token

SLACK_SIGNING_SECRET=your-signing-secret

ANTHROPIC_API_KEY=your-anthropic-api-key

PORT=3000

require('dotenv').config();
const { App } = require('@slack/bolt');
const Anthropic = require('@anthropic-ai/sdk');

// Slack Boltアプリ初期化
const app = new App({
  token: process.env.SLACK_BOT_TOKEN,
  signingSecret: process.env.SLACK_SIGNING_SECRET,
  socketMode: false,
  port: process.env.PORT || 3000
});

// Anthropic Claude初期化
const anthropic = new Anthropic({
  apiKey: process.env.ANTHROPIC_API_KEY,
});

// メンション時の応答
app.event('app_mention', async ({ event, client, say }) => {
  try {
    console.log('App mention received:', event.text);
    
    // メンション部分を除去してテキストを取得
    const userMessage = event.text.replace(/<@[^>]+>/g, '').trim();
    
    if (!userMessage) {
      await say({
        channel: event.channel,
        thread_ts: event.ts,
        text: "何かご質問はありますか？技術的なことなら何でもお答えします！"
      });
      return;
    }

    // Claude APIに送信
    const message = await anthropic.messages.create({
      model: "claude-3-5-sonnet-20241022",
      max_tokens: 1000,
      temperature: 0.7,
      system: `あなたは、駆けだしのエンジニアから中級者に、技術的なアドバイスを出したり、その中の趨勢を代弁するスーパーバイザーです。
ユーザーはまだ初級か中級のエンジニアで、常にアドバイスや助言、まれに実装そのものを求めてくることがあります。
そういった層からの質問や投稿に真摯に向き合って回答してあげてください。`,
      messages: [
        {
          role: "user",
          content: userMessage
        }
      ]
    });

    const response = message.content[0].text;

    // Slackに応答を送信（スレッドで返信）
    await say({
      channel: event.channel,
      thread_ts: event.ts,
      text: response
    });

  } catch (error) {
    console.error('Error handling app mention:', error);
    await say({
      channel: event.channel,
      thread_ts: event.ts,
      text: "申し訳ございません。エラーが発生しました。もう一度お試しください。"
    });
  }
});

// DMでの応答
app.event('message', async ({ event, client, say }) => {
  try {
    // ボット自身のメッセージは無視
    if (event.subtype === 'bot_message' || event.bot_id) {
      return;
    }

    // チャンネルでの投稿は無視（メンションのみ対応）
    if (event.channel_type !== 'im') {
      return;
    }

    console.log('DM received:', event.text);

    // Claude APIに送信
    const message = await anthropic.messages.create({
      model: "claude-3-5-sonnet-20241022",
      max_tokens: 1000,
      temperature: 0.7,
      system: `あなたは、駆けだしのエンジニアから中級者に、技術的なアドバイスを出したり、その中の趨勢を代弁するスーパーバイザーです。
ユーザーはまだ初級か中級のエンジニアで、常にアドバイスや助言、まれに実装そのものを求めてくることがあります。
そういった層からの質問や投稿に真摯に向き合って回答してあげてください。`,
      messages: [
        {
          role: "user",
          content: event.text
        }
      ]
    });

    const response = message.content[0].text;

    await say({
      channel: event.channel,
      text: response
    });

  } catch (error) {
    console.error('Error handling DM:', error);
    await say({
      channel: event.channel,
      text: "申し訳ございません。エラーが発生しました。もう一度お試しください。"
    });
  }
});

// アプリ起動
(async () => {
  try {
    await app.start();
    console.log('⚡ Slack bot is running!');
    console.log('🤖 @ai-fellow bot is ready to help engineers!');
  } catch (error) {
    console.error('Failed to start app:', error);
  }
})();

# package.jsonに追加

{

"scripts": {

"start": "node app.js",

"dev": "nodemon app.js"

}

}

# ngrokインストール（まだの場合）

npm install -g ngrok

# 別ターミナルでngrok起動

ngrok http 3000

# アプリケーション起動

npm run dev

✅ 成功例

あなた: @ai-fellow React Hook Formの使い方を教えて

@ai-fellow: React Hook Formは、Reactでフォーム処理を簡潔に行うための優れたライブラリです。主な特徴は...

必要なもの:

• Cursorのアカウント（Pro版推奨、バックグラウンドエージェントはMax Modeを使用するため）
• Slackワークスペースの管理者権限
• GitHubアカウント（リポジトリへのアクセス権限）

# 基本的なエージェント起動

@Cursor ログイン機能のバグを修正して

# オプション付きコマンド

@Cursor [repo=owner/project, model=o3, branch=develop] 新しいAPI実装

# ヘルプコマンド

@Cursor help

🛏️ 理想の開発スタイル：思考から実装まで、全てベッドの上で

Slackでアイデアを練って、Cursorのバックグラウンドエージェントに実装を任せる。開発者の新しい働き方を提案します。

👨‍💼 Product Manager

「最近ログインエラーの報告が増えています。認証周りを強化したいです。」

👩‍💻 Developer

「ログを確認しました。トークン検証のロジックに問題がありそうです。JWT の有効期限チェックが正しく動作していないようです。」

🔧 Lead Engineer

「auth.js の247行目あたりの正規表現も古い形式のままです。新旧両方のトークン形式に対応させる必要があります。」

📋 Project Manager

「後方互換性を保ちつつ、セキュリティを強化する方向で進めましょう。@Cursor この課題を解決してください」

🤖 Cursor Agent

「⏳ バックグラウンドエージェントを開始しました。スレッドの内容を分析し、認証機能の改善に取り組みます。」

🤖 Cursor Agent

✅ 認証機能の改善が完了しました！

実装内容:
• JWT有効期限チェックの修正
• 新旧トークン形式対応の正規表現更新
• 単体テストの追加

📋 プルリクエスト: #247 Fix authentication token validation
🔗 ブランチ: feature/auth-token-validation-fix

推奨チャンネル構成:

• #dev-ai-agents - バックグラウンドエージェント専用
• #project-brainstorm - アイデア出し・要件整理
• #code-review - PR レビュー・議論

# チャンネル固有の設定

@Cursor settings

# 実行中エージェントの確認

@Cursor list my agents

# エージェントに追加指示

@Cursor agent [prompt] # 新規エージェント強制作成

⚠️ 重要：コスト管理

バックグラウンドエージェントはMax Modeを使用するため、従来のチャット機能より高コストです。以下の点にご注意ください：

• 大規模なコードベースでは特にトークン消費が多い
• 複数エージェント同時実行時は費用が累積
• 定期的に実行中エージェントをチェック（@Cursor list my agents）

🚀 この新しいワークフローで実現できること

💡 次のステップ

1. Cursor Dashboardでの Slack 連携設定
2. チーム用チャンネルの作成とルール策定
3. 小さなタスクでの実証実験
4. ワークフロー改善と組織展開

この記事が役に立ったらシェアしてください

他の開発者にも「ベッドで寝ながら開発」の革新的なワークフローを伝えましょう