Devin Desktop チュートリアル：Devin AI の使い方を画像付きで解説
Devin のエージェントワークスペースをスクリーンショット付きで解説。GitHub リポジトリを接続し、専用クラウド VM の中で Devin が計画とコーディングを自律的に進める様子を見届け、プランを承認してプルリクエストをマージするまで。すべて実録セッションからの手順です。
要約——2026 年の Devin Desktop
- Windsurf は 2026 年 6 月 2 日に Cognition によって Devin Desktop へ改名され、Cascade エージェントは 7 月 1 日に提供終了、後任は Devin Local です。本チュートリアルは製品の中核にある Devin エージェントワークスペースを扱います。
- Devin は GitHub リポジトリに接続し、セッションごとに独立した Ubuntu 22.04 のクラウド VM にクローンして、ブラウザ・シェル・エディタを備えた状態で自律的に作業します。
- すべてのタスクは GitHub のプルリクエストで完結します。Devin が承認用のプラン概要を提示し、完了後はチェックリストとテスト用アカウント付きのサマリーを出します。確認してからマージしましょう。
- Ask Devin は Deep トグル付きでコードベースを検索、DeepWiki は図入りのドキュメントを自動生成。料金は従量制で 20 ドルから。
Devin AI Tutorial - 2026 | How to Use Devin AI? (Step-by-step Guide)
画面提供:Dan - Smart Tutorials8:48
Introducing Devin Desktop
公式情報:Cognition0:45
スクリーンショットは実演動画から。製品情報は Cognition の公式発表動画と照合済みです。
フレーム画像の著作権は Dan - Smart Tutorials / Cognition に帰属します。UI の説明目的で使用しています。元動画はリンクからご覧ください。
Devin Desktop 実践：ログインからマージまでの 14 ステップ
パート 1 · ワークスペースを接続
- 1
Devin を開いてエージェントモードを選ぶ
app.devin.ai にサインインすると「What do you want to get done?」の入力画面が出ます。入力前にモードのドロップダウンを開きましょう。Agent はブラウザ・シェル・エディタでタスクを end-to-end で実行、Deep Agent は 30 分以上の複雑な指示向け、Ask は Devin の作業を妨げずに手早く質問に答えます。
Devin ホームのエージェントピッカー。Agent はフル実行、Deep Agent は長時間処理、Ask は手早い質問向け。1:10 の場面を見る - 2
Devin に作業させる GitHub リポジトリを接続する
動画では ecommerce-dashboard という PHP のデモプロジェクトを GitHub から接続します。Devin アカウントからアクセスできることを確認し、対象リポジトリを選択してください。選んだリポジトリはリポジトリチップでプロンプトに紐付きます。
GitHub 上の ecommerce-dashboard リポジトリ。Devin がクローンして編集するデモプロジェクトです。1:40 の場面を見る - 3
リポジトリを Devin のワークスペースに追加する
Settings → Devin's Machine から「Add a New Repository to Devin's Workspace」でリポジトリを選んで確定します。Devin はワークスペースごとに 1 台のマシンを維持し、各セッションにその最新コピーを渡すので、ローカル環境には一切影響しません。
Devin's Machine 設定。ecommerce-dashboard リポジトリがワークスペースに追加されました。1:44 の場面を見る - 4
Devin が仮想マシンを準備するのを見る
Devin は Ubuntu 22.04（x86_64）の仮想マシンを起動し、リポジトリをクローンして再利用用にスナップショットを取ります。ターミナル付きの VS Code がブラウザ内で開き、動画では「I'm ready」と送るだけで Devin が自律的にプロジェクトを構成していきます。
Devin の Ubuntu VM 内で動く VS Code。セットアップチェックリストが進行中です。2:16 の場面を見る
パート 2 · 最初のタスクを実行
- 5
インデックスとワークスペース設定を確認する
リポジトリのインデックスが完了すると、Devin's Machine に「Indexing Completed」と表示され、更新や削除ができます。マシンの周辺には組織設定（メンバー、Devin's API、インテグレーション）や課金・利用指標もあり、チームメイトの招待や Slack・Linear 連携はここで行います。
インデックス完了。リポジトリはクローン済みで、Devin の設定から管理できます。2:32 の場面を見る - 6
まずはドキュメント PR で Devin を試す
最初のタスクは README 改善でリポジトリアクセスを検証させるもの。Devin は作業を計画し、フィーチャーブランチを push し、「Enhance README documentation with project structure and features #1」のプルリクエストを開きます。図と PR へのリンク付きの Task Completed サマリーも出力されます。
Devin の README ドキュメント PR に関するプラン概要・PR カード・Task Completed サマリー。2:56 の場面を見る - 7
Devin に実際のバグを直させる
チュートリアルでは、ユーザーがバリデーションエラーになる login.php の認証バグ修正を Devin に依頼します。ecommerce-dashboard のリポジトリチップを選んだ状態でタスクを入力し、Cmd+Enter で送信してください。
login.php の認証バグを入力した Devin のプロンプト。Cmd+Enter で送信できます。3:36 の場面を見る
パート 3 · レビュー・マージ・検索
- 8
コーディング前にプラン概要を確認する
Devin はまず調査し、見つけたバリデーションロジック・POST ハンドラ・セッション管理を列挙して信頼度を示します。その上でプラン概要を提示：PHP 8.x 互換性問題の修正、不足している password カラムの追加、デモ向け CSV 認証への変更、ログインフローのローカル検証。問題なければ Confirm を押します。
Devin の Plan Overview カード。信頼度の表示と承認用 Confirm ボタン付き。4:00 の場面を見る - 9
GitHub でプルリクエストをレビューしてマージする
Devin は修正のプルリクエストを開きます。動画では「Fix authentication errors in login.php #2」で、devin-ai-integration ボットがフィードバック方法をコメント欄で説明しています。GitHub はベースブランチとの競合なしと報告するので、緑の Merge pull request ボタンで完了です。
Devin の PR に競合なし。Merge pull request を 1 クリックするだけで修正が反映されます。5:12 の場面を見る - 10
完了サマリーとテスト用アカウントを確認する
Devin のセッションは「Authentication errors in login.php are fixed」と報告し、マージ済み PR #2 のリンクとテスト用アカウント（ユーザー名 admin、パスワード admin）を提示します。タイムラインには style.css・login.php・users.csv・functions.php への全編集と、所要時間 4 分 24 秒が記録されています。
Devin の完了サマリー。マージ済み PR リンク・ファイル編集タイムライン・テスト用管理者アカウント付き。5:28 の場面を見る - 11
Ask Devin でコードベースを検索する
Ask Devin（ベータ）は接続済みリポジトリについての質問に答えます。動画では「Find all authentication functions in this codebase」と入力し、リポジトリフィルターを 1 Repos: All のまま、Deep トグルを有効にして送信。クエリにはスクリーンショットを添付することもできます。
Ask Devin にコードベースの質問を入力し、Deep トグルを有効化した状態。6:08 の場面を見る
パート 4 · ドキュメント・Wiki・料金
- 12
ファイル単位で構造化された回答を得る
Deep を有効にすると、Devin はリポジトリ横断で検索し、結果をグループ化して返します。フロントエンドの認証関数、バックエンドのミドルウェアと JWT ユーティリティ、認証サービス関数——それぞれ関連ファイルへの参照付きで、まるで生きたコードベースドキュメントのようです。
Ask Devin の Deep 結果。フロントエンド・バックエンド・サービス層の認証関数をファイル参照付きでグループ化。6:40 の場面を見る - 13
DeepWiki でドキュメントを自動生成する
DeepWiki は接続済みリポジトリをドキュメントナレッジベースに変えます。Wiki を開いて ecommerce-dashboard リポジトリを選ぶと、Devin が概要・プロジェクト構成・図を自動生成。開発者が嫌う文書作業を自動で片付けてくれます。
DeepWiki のホーム画面。ecommerce-dashboard リポジトリでドキュメント生成が可能です。7:20 の場面を見る - 14
プランを選ぶ——Core は 20 ドルから
Compare plans ページでは、従量制 ACU の Core が 20 ドルから、Team は月 500 ドルでアーリーリリースとリサーチへのアクセスを追加、Enterprise は個別見積もり。行ごとに違いが明示されます：自律タスク実行、学習、Devin IDE、Ask Devin、DeepWiki、API アクセス。
Devin の Compare plans ページ。Core は 20 ドルの従量制、Team は月 500 ドル、Enterprise は個別料金。7:44 の場面を見る
Windsurf から Devin Desktop へ
| 日付 | 出来事 |
|---|---|
| 2026 年 6 月 2 日 | Cognition が通常の OTA アップデートで Windsurf を Devin Desktop に改名。アプリは同じ、ブランドだけ新しくなりました。 |
| 2026 年 7 月 1 日 | Cascade が提供終了し、エディタ内のエージェントは Devin Local に引き継がれました。 |
| 本チュートリアル | Devin エージェントワークスペース——リポジトリ接続、クラウド VM セッション、プラン承認、PR マージ——を順番に解説します。 |