Devin2.0 を使ってDevinっぽいアプリをつくるのにいくら課金すれば良いのか試してみた

![スクリーンショット 2025-04-17 192705.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/986141/8b882dd2-9fc6-48d4-8940-d5efb4cc82f4.png)

## まずはサクッと使えるように！
2025年4月4日にリリースされた Devin 2.0 が便利です！

この記事では、Devin 2.0 とりあえず使ってみたい、という方に向けて、最低限のセットアップで開発をする方法を紹介しています。　

Devin のチュートリアルやドキュメントにも上手く使うためのテクニックは紹介されていますが、ふわふわした指示でもある程度つくってみることができました。参考資料は最後にリンクを載せてます。

<details><summary>今回つくって見たもの 「DevinっぽいWebアプリ」</summary>


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/986141/1a65a26e-ca07-4ff1-9a3a-ef544d5619a2.png)

</details>

では早速始めてみましょう！必要な準備は以下の通りです。

:::note
1. Devin 2.0 の登録( ACUsの購入 )
2. GitHub のリポジトリ
3. Slack のワークスペース
:::

初めての場合は、順に案内もあるので、それに従えば OK です。

![スクリーンショット 2025-04-17 192737.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/986141/74a4ed21-2f93-45c7-a037-9e0437204d10.png)

### Devin2.0の登録
`Get started with Devin 2.0`から登録します。所属やメールアドレスなどの入力に加えて、決済情報が必要となります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/986141/bb98b555-455b-4104-b9dc-efa143a9cf68.png)

<details><summary>詳しくはこちら</summary>

プランは Core にしています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/986141/f4cec348-2f26-43b4-b051-daf29734a8e1.png)

ここで ACUs を手に入れる必要があります。これは **Agent Compute Units** のことでエージェントの使用量になります。とりあえずUS$100分買ってみました。少なくなったら自動で買い足す、などの設定もできます。

![スクリーンショット 2025-04-17 192727.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/986141/82860c29-733b-46d8-abb7-0c8e331085b8.png)

`Settings` の `Usage & Limits` から見ることができます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/986141/678ad0cb-cfdb-463e-895b-1eeb74ce814c.png)


これで、Devin の登録は OK です。

</details>

### GitHubリポジトリ

連携するとコントリビューターとして `Devin-ai-integration` が追加されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/986141/82a93306-4ad3-4c8e-b6c5-1bde46a5ac2a.png)

<details><summary>詳しくはこちら</summary>

好きなリポジトリをつくります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/986141/97e83f98-6b45-4d90-b529-9a3f24b03d4f.png)

Devin のダッシュボードでリポジトリと連携させます。次で説明しますが、`Settings` の `Integrations` から連携させるサービスの一覧を管理することができます。

https://app.devin.ai/settings/integrations

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/986141/7070679a-0b66-4fac-8843-603a0f730b31.png)

なお、リポジトリは複数選ぶことができます。
これで GitHub との連携ができました。

</details>

### Slackチャンネル

連携するとワークスペースの `App` に Devin が追加されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/986141/54457279-86cf-4e69-bf07-410e90dbaeec.png)

<details><summary>詳しくはこちら</summary>

Slack のワークスペースを選択します。もしくは新規作成しておいてください。`XXXX.slack.com`　という名前のやつですね。やり取りは DM にしました。

`Settings` の `Integrations` からワークスペースを指定すると、Slack からの認証を求められます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/986141/fc0d0037-b9e5-4778-a471-cdb8e2109d3a.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/986141/ab24121d-624a-4e80-8ca3-7fa75d7d84a0.png)


これで Slack との連携ができました。

</details>

## 開発環境のセットアップ

Devin のダッシュボードの `Settings` の `Devin's Workspace` で選択したリポジトリの開発環境をセットアップします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/986141/ba47f5bb-3e0c-4d5d-ba50-fb90c4d1f037.png)

セットアップに進むと以下のような画面になります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/986141/2737a66a-4b40-4a40-87ed-f53da40873aa.png)

明示的なコマンドやキー情報、依存関係を指定します。順に進めていきましょう。

:::note warn
**よくわからない方 & とりあえず使いたい方へ**
この設定は ACUs の消費や開発の質にも関わるので、丁寧にやっていきたいところですが、各項目を`Verify` と `Skip` で一旦終えてしまうこともできます。
:::

<details><summary>簡単な説明を残します</summary>

### Git Pull
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/986141/5aea49b6-7820-4036-943a-0f8463ec013d.png)

### Configure Secrets

今回は OpenAI の API キーを登録しました。

https://platform.openai.com/api-keys

`Settings` の `Secrets` から設定します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/986141/0026f997-a0e6-49e2-9983-e444df32fe5b.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/986141/33eb3e97-aef4-4a22-8453-9e2dc5619a15.png)

### Install Dependencies
例えば以下のようなコマンドです

```bash
npm install
```

```bash
pip install -r requirements.txt
```

</details>

セットアップの確認が終わると、いよいよ使えるようになります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/986141/72bebd53-5f7d-4054-861d-18afdf9da1f6.png)


## 開発開始
手順は以下の通りです

::: note
- Slack 上で Devin にタスクを渡す
- Devin のタスクの進め方を確認
- 結果を Slack( or GitHub )で確認
- 修正点を Slack( or GitHub )で指示
- プルリクのマージ
- 繰り返し or Devin が続きを開発
:::

Slack ベースで進めます。`@Devin` でメンションして会話します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/986141/f5b6afce-cc90-44ad-b3e8-59ffac29ee49.png)

ちなみに最初はこんな感じのプロンプトにしました。

<details><summary>プロンプト</summary>

```
React（フロントエンド）とFastAPI（バックエンド）を使って、以下の要件を満たすWebアプリを作成してください：
---
【アプリの概要】
Devinのようなチャット型AIエージェントのUIと機能を再現します。
ユーザーが自然言語で質問すると、OpenAIのGPT-4を使って応答を返します。
---
【必須機能】
1. **チャットUI**（Devin風デザイン）
   - 左にサイドバー、右にチャット画面
   - ユーザーとAIのメッセージをスレッド形式で表示
   - 入力欄でEnterキー送信可
2. **OpenAI API連携**
   - 入力メッセージをGPT-4へ送信
   - 応答をチャット画面に表示
   - `.env`でAPIキーを管理
3. **Pythonコードの実行**
   - 応答がコードを含む場合、バックエンドで安全に実行し、結果を返す
   - `exec()`などを使っても構いませんが、サンドボックス化されているとより良いです
4. **仮想ファイル操作**
   - ファイルを作成・読み込み・上書きできる仮想的なファイル管理機能をブラウザ内で実装
   - 実ファイルでなくてもOKです
---
【追加要件】
- READMEにプロジェクト概要、起動方法、使用技術、スクリーンショットを記載してください
- 必要であればユニットテストやCIのセットアップもお願いします
---
```

</details>

指示が曖昧なところは質問してきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/986141/07d1dd96-38ba-4102-a6e2-9bbaca5862b9.png)

Devin が開発を始め、ひと段落すると Slack 経由でプルリク通知がきます。
ここまで4,5分くらいでした。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/986141/24d5aa5a-8dd0-428a-9ca2-7f49cd2f6c2b.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/986141/ec4f90d5-dd8d-405d-b44c-719068946565.png)

まずはこんな感じの仕上がりでした。パッケージ関係は申し分ない印象です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/986141/4ab6e4cf-2ea6-4f47-afd7-857bf6f97ad2.png)

Devin 側でもプロジェクトの進捗を管理することができます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/986141/9c3c2018-8c4f-4a93-a75a-a99af67fc13a.png)

あとはひたすら Slack でやり取りしていきます。


## 完成

このような Web アプリができました。 GPT4.1 と連携します。なお、GitHub と Slack との連携はそれっぽい UI のみつくりました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/986141/1a65a26e-ca07-4ff1-9a3a-ef544d5619a2.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/986141/ee29a8b4-0a6e-4dbb-a95c-3977c3cad272.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/986141/df530a41-3a67-46ad-8579-3aef0c08c12d.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/986141/f98b12f6-2064-4608-9a1a-1bce4e351af3.png)


### 技術スタック
- フロントエンド: React, TypeScript, Tailwind CSS, shadcn/ui components
- バックエンド: FastAPI (Python)
- API 連携: OpenAI API (GPT-4.1)

当然 Web アプリの公開も指示できます。途中から急に英語になりました...。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/986141/e22f5b5c-998a-44ed-ac74-1fd7c70641e2.png)


## いくらかかったか？

トータルで **14.15 ACUs** でした。大体 **US$25**くらいですね...

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/986141/0b422034-346c-4f01-b16f-ec24b4a4687f.png)

進捗としては 7 ACUs あたりからあまり進んでいないので、無駄なやり取りが多かった印象です。バックエンドAPI の URL が間違ったポートを指していた、など...。やり取りの回数は70回くらいです。1つのタスクあたりに双方で4件くらいのメッセージを送ります。

「**ランスルーして、そのスクリーンショットを取って共有して**」という指示を出したところ、ちゃんと画像ファイルで途中経過の画像を送ってきたところは面白いと思いました。ただし10分くらいかかりました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/986141/3cd7ce82-ecaf-4d88-9afc-77433d1baae8.png)

こちらは開発途中で実際に Devin が送信したスクリーンショットです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/986141/a20007b5-e2e2-4d9c-ab37-73b2c68995ae.png)



## 参考

チュートリアルや各ベストプラクティスもあるので参考にしましょう。

https://docs.devin.ai/learn-about-devin/workflows

https://docs.devin.ai/essential-guidelines/when-to-use-devin#best-practices

https://docs.devin.ai/essential-guidelines/good-vs-bad-instructions