OpenCode デスクトップアプリのチュートリアル：インストール、Plan モード、最初のビルド
無料・オープンソースの OpenCode エージェントに、macOS・Windows・Linux 対応のデスクトップアプリが Beta として登場しました。この 16 ステップのガイドでは、brew cask でのインストール、プロバイダ接続または無料モデルの利用、Plan モードの確認質問、Build モードの ToDo リスト、統一 diff、インラインコメント、内蔵ターミナルまで、クリーンな画面収録と照らして全ステップを検証しています。
要約 —— OpenCode デスクトップアプリとは
- OpenCode Desktop は OpenCode コーディングエージェントの GUI 版です。CLI と同じエージェントが、ファイルブラウザー・diff レビュー・ターミナルタブ付きのウィンドウに収まっています。opencode.ai/download では今も OpenCode Desktop (Beta) と表記され、macOS（Apple Silicon / Intel）・Windows x64・Linux（.deb/.rpm）のインストーラに加え、Homebrew では brew install --cask opencode-desktop で入れられます。
- モデル ベンダーを最初に決める必要はありません。Select model ダイアログには無料モデル（Big Pickle、DeepSeek V4 Flash Free、MiMo V2.5 Free、Nemotron 3 Ultra Free、North Mini Code Free）が同梱され、Popular providers には OpenCode Zen、OpenCode Go、Anthropic、GitHub Copilot、OpenAI、Google などが並びます。Copilot 購読ならデバイスログインだけで追加 API キーなしで接続できます。
- 作業のリズムは Plan → Build → レビューです。Plan モードは確認質問を行い、ファイルを書かずに計画を草案します。承認して Build モードに切り替えると、エージェントが ToDo リストを消化していきます。Session changes には 11 ファイル分の統一 diff が表示され、行ごとにコメントでき、ターミナルタブでは dev server も動かせます。
- 2026 年のバージョン事情：OpenCode 2.0 系は 9 月に登場し（タグは v2.0.0 から 9 月 20 日の v2.0.11 まで）、デスクトップアプリは春に Tauri から Electron へ移植されました。どちらも更新が速いので、画面が違うと感じたらダウンロードページから更新しましょう。
How to Download, Install & Use OpenCode Desktop App | Vibe Coding Machine | Build Two Apps
動画ウォークスルー:WebStylePress7:51
OpenCode Desktop: Great UI/UX + Run Multiple AI Agents (Free)
動画ウォークスルー:AI With Nathan9:32
OpenCode Desktop App — 75+ Providers, Parallel Sessions, File Browser & More
動画ウォークスルー:AI Stack Engineer8:22
How to Install OpenCode Desktop App on Windows 10/11 2026
動画ウォークスルー:United Top Tech2:46
OpenCode Download & Docs — OpenCode Desktop (Beta), v2 install
製品情報:opencode.aiDownload page
ステップ 1-3、6、8、9 は WebStylePress の Windows 収録から。ステップ 4 は United Top Tech のインストール収録。ステップ 5、7 は AI Stack Engineer のプロバイダ設定デモ。ステップ 10-16 は AI With Nathan の plan-to-build セッションの静止画です。インストール コマンドと 2.0 リリース情報は opencode.ai/download および anomalyco/opencode リポジトリから引用しました。
フレームは出典動画のクレジット付きスクリーンショットで、それぞれタイムスタンプに深リンクしています。本文はオリジナルで、事実はこれらの収録と公式ダウンロードページ・ドキュメント・リポジトリに基づきます。
OpenCode デスクトップアプリをステップごとに
1 · OpenCode デスクトップをインストール
- 1
ダウンロードページを開いて OpenCode Desktop (Beta) を入手
opencode.ai/download を開き、セクション 2 の OpenCode Desktop (Beta) までスクロールします。macOS の Homebrew ユーザーは brew install --cask opencode-desktop を実行すればよく、それ以外は Download ボタンを選びます —— macOS（Apple Silicon）、macOS（Intel）、Windows（x64）、Linux（.deb）、Linux（.rpm）。Windows 版は約 116 MB です。同じページのセクション 3 には VS Code・Cursor・Zed・Windsurf 拡張があり、後から IDE 連携も可能です。
opencode.ai/download の OpenCode Desktop (Beta) セクションと Homebrew cask コマンド。0:25 の部分を見る - 2
More info で Windows SmartScreen を通過する
デスクトップアプリは署名元が新しい Beta ソフトウェアのため、Microsoft Defender SmartScreen がおなじみの「Windows protected your PC」警告を出して未確認アプリをブロックします。警告の More info をクリックするとダイアログが展開され、署名者と Run anyway ボタンが現れます。macOS と Linux にこの手順はありません。 .dmg をマウントするか .deb/.rpm をインストールするだけです。
SmartScreen は未確認のインストーラをブロックします。More info をクリックして先へ。0:33 の部分を見る - 3
Run anyway でセットアップを完了させる
展開したダイアログには OpenCode Desktop Installer.exe と署名者 Anomaly Innovations, Inc が表示されます。Run anyway をクリックすれば、あとはセットアップウィザードが処理します。初回起動はローカルサーバーの起動で数秒かかりますが、これはどのプラットフォームでも普通の動作です。
展開後は署名者を確認できます。Run anyway でセットアップ開始。0:40 の部分を見る - 4
初回起動：Local Server を確認してプロジェクトを開く
ホーム画面には緑の Local Server ドット、Recent projects リスト、Open project ボタンがあります。Open project をクリックして任意のフォルダを選びます —— 空の新規フォルダでも問題ありません。アプリは Build anything コンポーザーのあるワークスペースへ移動します。以後、Recent projects がフォルダを記憶します。
初回起動：Local Server は稼働中。フォルダを開くまで Recent projects は空です。1:02 の部分を見る
2 · プロバイダ接続とモデル選択
- 5
Getting started カードから最初のプロバイダを接続
新規インストールでは Getting started カードが表示されます。OpenCode includes free models so you can start immediately（無料モデルを内蔵）とあり、Connect any provider で Claude・GPT・Gemini などのモデルを利用できます。カードの Connect provider ボタンがプロバイダ設定への最短経路です。まずは無料モデルだけで始めても構いません。
Getting started カードは Connect provider を案内。無料モデルはそのまま使えます。2:20 の部分を見る - 6
Settings → Providers でプロバイダを選ぶ
歯車アイコンから Providers を開きます。OpenCode Zen（Claude・GPT・Gemini などの厳選モデル）と OpenCode Go（低価格サブスクリプション）が Recommended として最上位に並び、次いで Claude 直接アクセスの Anthropic、GitHub Copilot、OpenAI、Google —— そして無料モデルを多数抱える OpenRouter。カスタム プロバイダ項目でその他にも対応します。
Settings → Providers：OpenCode Zen と OpenCode Go が推奨行です。1:26 の部分を見る - 7
GitHub Copilot をデバイスログインで接続
GitHub Copilot —— Pro、Pro+、Business、Enterprise —— を既に契約しているなら、追加 API キーなしで利用できます。GitHub Copilot を選ぶと Connect GitHub Copilot ダイアログが確認コードとリンクを表示します。github.com/login/device を開いてコードを入力し、承認すれば、Copilot プランのモデルがピッカーに現れます。
デバイスログインの流れ：github.com/login/device でコードを入力して承認。2:30 の部分を見る - 8
モデルを選択 —— 無料モデルも同梱
Select model ダイアログには OpenCode 提供の無料モデルが並びます。Big Pickle、DeepSeek V4 Flash Free、MiMo V2.5 Free、Nemotron 3 Ultra Free、North Mini Code Free の 5 つです。その下の Add more models from popular providers から OpenCode Zen、Anthropic、GitHub Copilot などを追加できます。モデルによっては thinking effort セレクター（low〜max）も現れます —— 初回はデフォルトのままで良いでしょう。
無料モデルは 5 つ同梱。同じダイアログでプロバイダ モデルも追加できます。2:44 の部分を見る
3 · Plan モード：コードを書く前に計画を固める
- 9
プロンプトボックスを Plan モードに切り替える
プロンプトボックスの下には 2 つのドロップダウンがあります。モード（Build または Plan）とモデルです。何かを送る前にモードを Plan に切り替えましょう。Plan モードは 2 つの内蔵エージェントの一方で、プロジェクトを分析してアプローチを提案できますが、ファイルの書き換えはできません。ターミナル UI で Tab キーで切り替える Plan/Build と同じペアで、右下のインジケーターが現在地を示します。
モードドロップダウンはプロンプトボックス直下で Plan と Build を切り替えます。3:00 の部分を見る - 10
確認質問に答える
要件を送ると —— 収録では CSV データ分析 Web アプリ —— Plan モードはコードの代わりに Questions パネルを返してきます。このセッションの質問は 4 つ：Tech Stack（React + Node.js、Next.js、Vue + FastAPI、Plain HTML/JS）、Charting Library、Processing Location、Insight Depth でした。それぞれに答え、必要なら注記を加えて送信します。回答が計画の形を決めます。
Plan モードは 1 行も書く前に確認質問をしてきます。3:20 の部分を見る - 11
計画を承認して Build へ切り替える
計画が固まるとエージェントは Ready to build. Should I proceed? と yes proceed のクイックリプライを提示します。Build モードが有効になるまでファイル書き込みはブロックされたままで、Beta のうちはエージェントが自分で切り替えないこともあります。モードドロップダウンを Plan から Build へ自分で動かしてから確認しましょう。公式ドキュメントの「まず plan、次に build で変更」と同じ流れです。
クイックリプライで承認し、モードドロップダウンを Build へ。4:05 の部分を見る - 12
Build モードが ToDo リストを消化するのを見守る
Build モードは計画を To-dos チェックリスト —— Create index.html、Create style.css、Create app.js —— に変え、Write ツール呼び出しで順に処理しながらボックスへチェックを入れていきます。収録にあった Beta の小バグ：To-do パネルが 2 回描画されました。害はありませんが、Beta らしい粗さの一例です。
Build モードは To-dos リストを進め、ファイルを書くごとにチェックを入れます。4:11 の部分を見る
4 · Build・レビュー・アプリの実行
- 13
Session changes で diff をレビュー
Session changes パネルは触れたファイルをすべて数えます —— 経費アプリのセッションでは 11 Changes —— 隣に All files、各 diff は Unified または Split ビューと Collapse all 付きで開きます。緑の行が追加、赤い行が削除。変更はセッションごとに記録されるので、undo でさかのぼることもできます。
Session changes：11 ファイルを変更。Split より Unified 表示が見やすい。8:20 の部分を見る - 14
インラインコメントでエージェントを導く
生成されたファイルをビューアーで開き、行をクリックします —— 収録では app.js の 62 行目 —— そしてその場でコメントを追加します。コメント ボックスは Commenting on line N と Cancel・Comment ボタンを示し、エージェントはインラインコメントを絞り込まれた指示として読みます。チャットで行位置を説明するより正確です。
ファイルビューアーで行を選ぶと、エージェントへのインラインコメントを残せます。5:12 の部分を見る - 15
内蔵ターミナルでコマンドを実行
ターミナルタブでは npm run dev、git status、パッケージインストール —— GUI と並べて TUI を使いたいなら OpenCode CLI 本体も動きます。重要な設定が 1 つ：Settings → General → Terminal Shell です。収録では bash シェルだとチャットからの dev server 起動が失敗し、Auto に切り替えるとコマンドが通りました。理由がなければ Auto のままにしましょう。
ターミナルタブは dev server も、OpenCode CLI 本体も実行できます。5:18 の部分を見る - 16
完成したアプリを開き、反復を続ける
静的アプリは index.html をダブルクリックするだけで動きます。Next.js アプリは npm run dev の後に localhost:3000 で稼働 —— 完成した Goals ページには Total Goals、Total Saved、Overall Progress カードと新しい Vacation 目標が並びます。変更は同じセッションで頼み続けても良いですし、並列セッションを開いても構いません。複数エージェントがそれぞれのプロジェクトとモデルで同時に動きます。
エージェントが作った Goals ページが localhost:3000/goals で稼働中。7:40 の部分を見る