Background-AgentとSlackでソフト作成を丸投げしてみる

# はじめに
皆さんはCursorエディタは活用されていますでしょうか？Cursorエディタとは、VSCodeをフォークして作られた、AIでコード実装を補助してくれる機能がついたコードエディタのことです。以降長いのでCursorと呼称します。

# 記事作成の経緯

最近（2025/6/20）、CursorのBackground Agent機能が実装されSlackと連携できるようになったとの公式リリースのメールが飛んできたので、早速そちらを試してみることにしました。

以前投稿させていただいたYoloモードの件以上にAIエディタの可能性を感じましたので、こちらの機能を使えるようになるまでの具体的な手順と、具体的な作業依頼の事例を本記事ではご紹介します！

以前のYoloモードに関する投稿記事はこちらです↓
[CursorエディタのYoloモードが想像以上だった件](https://qiita.com/ogabk/items/f146d46698679743b630)

## ところでBackground Agentって何？
[公式ページの説明](https://docs.cursor.com/background-agent)は以下の通りです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3781638/5ef911a4-89b9-4d16-8b3b-0745bec52bd0.png)

「バックグラウンドエージェントを使用すると、リモート環境でコードを編集・実行できる非同期エージェントを起動できます。いつでもエージェントのステータスを確認したり、フォローアップを送信したり、引き継いだりできます。」

…要はコード編集作業を丸投げして裏で作業してもらうことができます。

## Slackと連携できるようになった
この機能とSlackが連携できるようになりました。[公式ページの説明](https://docs.cursor.com/slack)は以下の通りです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3781638/6f968f41-a506-4de4-9abf-10039074968c.png)

要は**Slackからメンション機能でCursorに作業を丸投げできる**わけです。

# 本記事の内容
前述しました通り、本記事では、

- 設定手順：　CursorとSlack（とGitHub）の連携設定の手順
- 具体的お題：　Webブラウザ上で動く電卓アプリの作成

の2つにフォーカスしてご紹介したいと思います。

この機能をより使いこなしたいという方は、[公式ページ](https://docs.cursor.com/slack)のほうにより詳細な解説がありますのでそちらをご覧になるのが良いかと思います。本記事は取っ掛かりとして参考程度にどうぞ～。

# 設定手順：Cursor・Slack・GitHubの設定

## 作業の流れ
以下の順に行っていきます。

0. 作業用のリモートリポジトリの作成（とクローン）
1. Slackのワークスペースの作成
2. CursorとSlackを接続
3. CursorとGitHubを接続
4. 上限金額の設定

実のところ[公式ページ](https://docs.cursor.com/slack)の解説動画の内容と被りますが、ところどころつまづいた箇所の補足など入れつつ説明したいと思います。

ただし1点だけ注意すべき点があります↓

:::note alert
**CursorのPrivacy ModeはOFFにする必要あり**
[公式ページに記載](https://docs.cursor.com/slack)されている通り、今回のSlackとの連携機能を使用するには、Cursorに備わっているPrivacy Mode（＝ソースコードやユーザー入力がAIの学習目的で保存されないようにする機能）をOFFにする必要があります。そのような情報を取り扱うケースでは本機能は使用すべきでないと思われます。ご注意ください。

Privacy Modeが有効になっているかどうかは、以下の手順で確認できます。
1. File → Preferences → Cursor Settings の順で選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3781638/2369cbd1-533f-494d-b888-09d2b4e12958.png)
2. General → Privacy のコンボボックスで Share Data / Privacy Mode with Storage / Privacy Mode のどれが選択されているかで確認
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3781638/bb86b935-6fc8-4b7d-90e6-79f3e47b1f33.png)
:::

## 0. 作業用のリモートリポジトリの作成（とクローン）

これを作らないと始まりませんね。GitHubにアクセスしリポジトリを作成します。
今回はテスト用としてCirsorSlackIntegTestという名称でPrivateで作成しました。

![スクリーンショット 2025-06-21 161515.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3781638/6df6715d-c9c9-4c34-8af8-fd8545260da0.png)

![スクリーンショット 2025-06-21 161633.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3781638/9b13fdf5-2434-499e-af3d-8158314662e6.png)

## 1. Slackのワークスペースの作成

Slackのワークスペースを作成します。日常的にSlackを使っている方ならば説明は不要だと思います。今回は「OgabkCursorWork」という名前で専用のワークスペースを作成してみました。

## 2. CursorとSlackを接続

まず、Cursorを起動して、Cursor Settingsを開きます。
<img width="400" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3781638/c6e9c041-80c8-4445-9628-37160de93be2.png">

続いて、Tools & Integrations のタブを開き、Connectを選択します。
<img width="600" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3781638/f2e1fc92-36c6-4145-a879-572b5128c32e.png">

Slackのワークスペースにサインインするよう言われるので、予め作成しておいたワークスペース名を入力してサインインします。
<img width="400" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3781638/0564dc64-2a33-4712-809a-e6101126509a.png">

Slackにサインインしていない場合はサインインします。
<img width="400" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3781638/2bfaac49-e9f3-44a3-a277-168848afffc8.png">

するとブラウザで以下の画面が開くので、内容を確認し「許可する」をクリックします。
<img width="400" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3781638/f633564b-1dc9-4325-9656-68c0462b46f6.png">

Cursorにサインインしていない場合はサインインします。
<img width="400" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3781638/f6e56476-2455-404f-9094-6d0d13f15735.png">

ここまで上手くいけば、下図のような画面に遷移します。「Link Account」をクリックします。
<img width="400" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3781638/6fedea0c-7c40-4890-a242-ba8817604344.png">

ここでも上手くいけば、この画面に遷移します。「Connect Slack」の左にチェックが入っていたら、Slackのワークスペースとの接続は完了です。
<img width="400" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3781638/969def7a-0e3d-42d6-b720-7d21e00702bd.png">

上記の画面に遷移せず、「Link Failed」と出て、下図のようなエラーが出る場合があります。その場合はPrivacy Modeが有効のままとなっています。Cursor Settingsを再度開き、そちらから Privacy Modeを無効化（＝Share Dataを有効化）してください。
<img width="400" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3781638/6ba3c1c9-858b-4999-a0d9-8e71ff5a2737.png">

## 3. CursorとGitHubを接続

まずConnect GitHubをクリックします。
<img width="400" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3781638/fa4803d6-6014-4915-8dcf-05c0089198f6.png">

ブラウザでこの画面が開きます。「Authorize Cursor」をクリックします。
<img width="400" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3781638/1d51e179-847d-4898-a4ed-dd1332a2e49e.png">

下図のような設定画面が開きます。CursorのBackground-Agentと共同作業するリポジトリを選択する画面だと思います。皆さんそれぞれの状況に応じてどちらかを選択してください。


今回はテスト用にCursorがアクセス可能なリポジトリを絞りたかったので、Only select repositoriesにチェックを入れ、Select repositoriesのプルダウンメニューから今回用に作成したリポジトリを選択しました。

この状態で「Install & Authorize」をクリックします。
<img width="400" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3781638/dd48f31f-4fe6-4386-9440-15347e910e1d.png">

ここまでが上手くいけば、下図の画面で所望のリポジトリをプルダウンメニューから選べるようになっているはずです。所望のリポジトリを選択しましょう。
<img width="400" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3781638/3b26e4a7-c5ab-477a-a7ff-18e060be66cc.png">

## 4. 上限金額の設定
ようやく設定作業も大詰めです。最後にBackground-Agentの課金上限金額を設定します。

下図だと背景色と文字色が被ってとても分かりにくいのですが、よく見ると左から「＄50 ＄100 ＄200 ＄500 ＄」と並んでいるのが分かります。皆さんそれぞれのお財布👛事情に合わせて選択してください。

決定ボタンも、これまた見づらい色をしていますが、右下に「ENABLE」とあります。こちらをクリックしてください。
<img width="400" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3781638/64c084f5-d8ed-41f1-a6db-d53d7542fd69.png">

# 具体的お題：電卓アプリ

## 作業の流れ

以下の順に行っていきます。

1. CursorをSlackのチャンネルに追加する
2. メンションで電卓アプリ作成を依頼してみる
3. Cursorからの返信を受け取り作業結果を確認してみる
4. 計算途中のGUIの挙動の修正を依頼してみる

## 1. CursorをSlackのチャンネルに追加する

まずはCursorをSlackのチャンネルに追加する必要があります。
私の場合は、フライングで「@Cursor」でCursorをメンションしてしまったため・・・
![スクリーンショット 2025-06-21 164055.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3781638/87e45a3c-2a91-45ae-a37a-a96cac11322e.png)

Cursorはこのチャンネルに参加していないよ！追加して！、とSlackbotさんに怒られました（汗
![スクリーンショット 2025-06-21 164138.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3781638/6e4bfb59-a78b-4227-82ef-f269d4c7d69e.png)

なのでまずはちゃんとCursorを招待してあげましょう。
![スクリーンショット 2025-06-21 164212.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3781638/78778176-74db-40d2-9d9c-6a4bbde4e8f8.png)

## 2. メンションで電卓アプリ作成を依頼してみる

では早速、メンションで電卓アプリ作成を依頼してみましょう。
といっても既にフライングでやってしまいましたが（汗）

「@Cursor」のメンションの後ろに指示メッセージを添えることで、CursorのAgentに対して指示を出すことができます。
![スクリーンショット 2025-06-21 164055.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3781638/87e45a3c-2a91-45ae-a37a-a96cac11322e.png)

## 3. Cursorからの返信を受け取り作業結果を確認してみる

5分程度待ってみたところ、Cursorさんから返信が来ました！
日本語で依頼したにも関わらず英語で返信してきやがりましたが、、、色々ちゃんと実装してくれたようです。

![スクリーンショット 2025-06-21 164904.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3781638/124f14e5-09fe-4e9b-93bd-2aef211a6fa8.png)

リポジトリ側はどうなったのか、GitHubにアクセスして確認してみます。何やら私が最初作成したmainブランチのほかに新たにブランチが作成されてそこに実装してくれたようですね。
![スクリーンショット 2025-06-21 165130.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3781638/655eb574-d57a-4fd7-8adc-d840ccc69154.png)

Slackのスレッドに戻って末尾を見ると、「Open in Cursor」ボタンが見えます。これをクリックすることでCursorが立ち上がりBackground-Agentが行った作業内容が確認できる画面が立ち上がります。
![スクリーンショット 2025-06-21 171410.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3781638/8750dbfa-6918-42f8-97e3-281d68872772.png)

Cursorエディタが起動し、こんな画面が立ち上がります。
![スクリーンショット 2025-06-21 171421.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3781638/dafce033-fb98-4b2f-95af-bcb0d47159e7.png)

今回の電卓はWebアプリとして実装してもらったので、index.htmlをブラウザで開けば実行できます。そこで、VSCode向けの簡易WebブラウザのExtensionをCursorに追加インストールし、実行してみました。（こういうところがVSCodeをフォークして作ってあるCursorエディタの良いところ！）

その結果がこちらです↓

![スクリーンショット 2025-06-21 172105.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3781638/a8722347-05ee-4608-97db-ffacc19372a2.png)

ちゃんと電卓アプリを作ってくれたみたいですね👍
見た目も（特に指定していないけど…）かっこいいです👍

## 4. 計算途中のGUIの挙動の修正を依頼してみる

ここまでくれば、もう勝ったも同然（？）です。入力している最中に途中式が画面に表示されなかったので、その修正を依頼してみます。

![スクリーンショット 2025-06-21 172321.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3781638/1f060565-d1de-4433-ac90-79f79366d333.png)

![スクリーンショット 2025-06-21 172645.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3781638/fc76cfec-a2b9-42d0-895d-b89d979ee229.png)

無事途中式も表示されるようになりました！
![スクリーンショット 2025-06-21 172738.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3781638/8ba77dcf-68e6-40d6-87f9-1081758870b1.png)

ついでにmainブランチとマージしてプッシュするよう依頼してみます。
![スクリーンショット 2025-06-21 173616.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3781638/48a7e82e-cb01-47af-8e8a-6e964f04a7f4.png)

![スクリーンショット 2025-06-21 173642.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3781638/4d7bf6b1-053f-4283-b0e4-f4de365c9227.png)

GitHubにアクセスしてmainブランチにマージされているか確認します。
![スクリーンショット 2025-06-21 173823.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3781638/00a379dd-a9a4-4da8-86bd-00f0fd881745.png)

できていそうですね👍

# おまけTips

## Background-Agent not found エラーが出るとき

はじめ、下図のようなエラーが出て、SlackからCursor側のBackground-Agent画面の呼び出しが上手く機能しませんでした。
![スクリーンショット 2025-06-21 164508.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3781638/151782be-15ec-4946-b690-fa8177ad8dd1.png)

このような場合は何らかのプロジェクトフォルダをCursorで開いてみてください。そうすると、下図のようなポップアップが左下に表示されます。「Connect Slack」をクリックします。
![スクリーンショット 2025-06-21 170105.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3781638/5b7adff9-cc51-4390-833f-da362beae68b.png)

すると次のような画面がブラウザで開きます。「許可する」をクリックします。
<img width="400" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3781638/2c4a09d6-7421-41b3-ad19-9847b43314a7.png">

無事Cursor側とSlackがリンクできました。これでSlackからのCursor側のBackground-Agent画面の呼び出しが正常に機能するようになったはずです。
<img width="400" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3781638/ddfefca2-6c48-4e20-9435-5e6bd2f52a5f.png">

## Background-Agentの画面の開き方

一旦Cursorを閉じるなどして、Background-Agentを閉じてしまった場合の復帰方法です。
あの画面どこいった～ってなった方は参考にしてください。

まずは普通にCursorを起動して当該プロジェクトを開きます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3781638/5ebd90db-a447-4e32-b174-725c5db9f2c0.png)

次にコマンドパネルを呼び出して以下を入力することで開くことができます。
CTRL + SHIFT + P → "show background agents"と入力
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3781638/86badf6a-c3cd-4d5a-8a4d-6903b79f94df.png)

あるいはComposer画面右上の雲のアイコンからも開くことができるようです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3781638/c0001154-1f86-4faa-adcd-0a7abf2f66a3.png)

# おわりに
いかがでしたでしょうか？
多くの方がAIエージェントの進化を感じられたんじゃないかなと思います。

スマホにSlackアプリを入れている方は、スマホから簡単にCursorに作業を依頼して、進捗もスマホから確認できちゃいます。凄い時代になりましたね～。

ご存じの方も多いかと思いますが、同様のAIエージェントに[Devin](https://devin.ai/)があります。Cursorはこちらをすごく意識していそうですね。活発な競争で今後さらに有用なツールが登場してくることに期待大です。

自分で考えてコードを書くことも楽しいですが、ただただ手を動かすだけの作業になることもしばしばあるかと思います。そんな時はこういったAIエージェントを活用して上手にラクをしつつより創造的な作業に集中したいですね！

ではまた👋