GitHub Copilot Agent簡介

 

本篇文章介紹如何在Visual Studio Code開發工具中使用 GitHub Copilot 代理程式（Agents）來加速並自動化開發流程。
我們將實作一個記錄血壓資料的網頁應用程式，並在不同情境下善用幾種主要類型的代理程式：本地代理（Local Agent）用於和開發者即時互動與快速生成程式碼、計劃代理（plan agent）用來在動手寫程式前協助您建立清楚、結構化的開發計劃、背景代理（Background Agent）用於無需即時回饋的後台任務，以及雲端代理（Cloud Agent）用於遠端協作、建立分支與拉取請求的任務，讓開發者能更有效率地整合AI助手到日常編碼工作中。

本地代理（local agent）

在 GitHub Copilot 與 Visual Studio Code開發工具的整合架構中，GitHub Copilot會在本地環境進行上下文蒐集與前處理，這種行為常被概念化為本地代理（Local Agent）。GitHub Copilot 可以在使用者本機（例如開發者電腦或本地開發環境）中，執行一個具備上下文理解與任務協調能力的代理層。這個代理能夠在本機電腦中先進行資料蒐集、整理，並理解專案結構、多個檔案之間的檔案關係（例如Controller ↔ Service ↔ Repository）、辨識使用的程式語言（例如C#、Python）、框架與工具（例如 ASP.NET Core、Node.js）、追蹤目前開發者正在編輯的檔案與游標位置等資訊，然後將篩選過的上下文資訊提供給後端大型語言模型。

本地代理最大的特性在於會儘量「最小化資料外流」。原始程式碼、設定檔、憑證路徑或內部專案結構，不需要完整上傳至雲端模型，而是先在本地進行分析，只將與當前任務高度相關的摘要資訊送出。

本地代理能有效降低延遲，這是因為上下文建構在本地完成，GitHub Copilot在產生建議、修正程式碼或執行多步驟任務（例如跨檔案重構、建立測試、修正錯誤）時，反應更即時有效降低延遲。

本地代理為「代理式開發（Agentic Development）」奠定了基礎，它能協調多個動作，例如讀取檔案、分析錯誤訊息、執行建議修改，再回饋結果給開發者，讓 GitHub Copilot不再只是程式碼補全工具，而是更接近一位具備情境感知能力的 AI 開發協作夥伴。

使用本地代理（local agent）

接下來我們以Visual Studio Code開發工具搭配GitHub Copilot為例來了解如何透過本地代理（local agent）來協助開發血壓網站應用程式。

在Visual Studio Code開發工具的「Terminal」視窗輸入以下命令，建立一個「blood-app」資料夾，在其中利用「git init」命令初始化git：

mkdir blood-app

cd blood-app

git init

「git init」是建立一個新的 Git 版本控制倉庫的命令，以便讓目前的資料夾可以「被 Git 管理」。這個命令執行後，會產生一個隱藏的「.git」資料夾，命令執行的結果請參考下圖所示：

圖 1：建立新的 Git 版本控制倉庫

下一步在Visual Studio Code開發工具的GitHub Copilot聊天視窗下方，選取使用「Agent」；語言模型可以設為「Auto」，如此將會根據您訂閱的GitHub Copilot方案自動切換適當的模型，請參考下圖所示：

圖 2：使用本地代理（local agent）

在視窗文字方塊中輸入以下提示，要求建立一個應用程式：

建立一個簡單的血壓管理App，使用HTML, CSS, and JavaScript，包含文字方塊輸入收縮壓、舒張壓、脈搏、是否使用藥物治療(使用選單包含三個選項，無、已服藥、未服藥) 與備註。

自動記錄輸入資料當下的日期與時間。包含一個清單顯示輸入的血壓資料。

稍後一段時間，讓本地代理（local agent）完成工作，之後您可以檢視產生的程式碼檔案，以筆者測試的結果為例，專案資料夾中將新增「index.html」、「script.js」、「styles.css」三個檔案。若產生的程式沒有問題，可以按下「Keep」按鈕保留這些檔案，請參考下圖所示：

圖 3：保留生成的檔案

 

使用瀏覽器開啟產生的HTML檔案看看成果，請參考下圖所示，試著測試輸入一筆資料：

圖 4：新增血壓記錄

血壓記錄新增完成後，網頁下方會顯示血壓記錄清單，請參考下圖所示：

圖 5：血壓記錄清單

美化血壓記錄App使用者介面

您可以繼續在聊天視窗撰寫提示來優化一下目前的應用程式，例如筆者加入提示如下：

在每個輸入項目的文字前方，新增一些代表此輸入項目的小圖示，美化一下畫面

 

執行的結果請參考下圖所示，記得按下「Keep」按鈕保留生成的檔案：

圖 6：美化使用者介面

 

下一步我們來看看背景代理（background agent）的運作方式。

背景代理（background agent）

「背景代理（Background Agent）」扮演著一個非即時、不中斷開發流程的角色。它的特色在於：當開發者沒有主動操作或不需要即時回應時，仍能持續在背景中完成指定任務或監控狀態。

 

背景代理通常以非同步方式運作，不會干擾開發者當前的程式撰寫工作。它可以在背景中執行較長時間，很適合需要等待或分階段完成的任務，例如：分析整個程式碼庫的潛在問題、檢查架構一致性、掃描可能的安全風險，或預先為未來的修改建立建議方案，這類工作非常適合交由背景代理處理。

 

安裝Copilot CLI

Copilot CLI目前是 Visual Studio Code開發工具中最主要的背景代理（background agent）。要使用背景代理（background agent）之前需要使用以下命令進行安裝：

npm install -g @github/copilot

提交到本地倉庫

下面我們要使用GitHub Copilot內建的計劃代理（plan agent）建立一個切換暗、亮佈景主題的實作計畫，然後再交給背景代理來執行實際工作。背景代理適合不需要即時互動的任務。

 

在開始之前先將目前本地的更改提交到本地倉庫，點選左側邊欄「Source Control」>「Generate Commit Message」>「Commit」，請參考下圖所示：

圖 7：本地的更改提交到本地倉庫

 

接著開發工具會跳出一個訊息詢問是否直接提交到本地倉庫，按下「Yes」按鈕，請參考下圖所示：

圖 8：直接提交到本地倉庫

 

按下「Source Control」>「Publish Branch」按鈕，將剛剛的提交（commit） 推送到遠端倉庫（publish branch），請參考下圖所示：

圖 9：提交（commit） 推送到遠程倉庫（publish branch）

下一步，選擇要推送成private repository或是publish repository，請參考下圖所示： 

圖 10：推送成publish repository

待推送完成，Visual Studio Code開發工具會跳出一個通知訊息，點選畫面中的「Open on GitHub」按鈕開啟GitHub倉庫，請參考下圖所示：

圖 11：開啟GitHub倉庫

 

在GitHub網站倉庫存放地頁面便可以看到推送的檔案，請參考下圖所示：

圖 12：GitHub網站

 

使用計劃 (Plan) 代理撰寫功能計畫

在聊天視窗撰寫提示提示如下，透過計劃 (Plan) 代理來撰寫實作計畫：

建立一個計劃 (Plan) ，新增dark/light 兩種佈景主題，首頁上方提供切換佈景主題的開關，並根據使用者來儲存選用的佈景主題。

在聊天視窗下方選擇使用內建的計畫代理（plan agent）來執行這個提示，請參考下圖所示：

圖 13：使用內建的計畫代理（plan agent）執行

 

稍候一段時間，讓計畫代理（plan agent）完成工作，聊天視窗會顯示撰寫的計劃，您可以檢查它所提出的實作計畫，並按需要做調整，視窗的下方會出現一個「Start Implementation」的下拉式清單方塊，請參考下圖所示：

圖 14：計畫與「Start Implementation」下拉式清單方塊

使用背景代理（background agent）實作功能

選擇聊天視窗下方的「Start Implementation」>「Continue in Background」，將計畫交給背景代理去開發，請參考下圖所示：

圖 15：將計畫交給背景代理去開發

 

背景代理會建立一個 Git worktree然後開始實作功能，而這不會干擾您的開發工作，您仍舊可以在開發工具中進行程式的撰寫作業。下圖是背景代理運作的情況：

圖 16：背景代理運作的情況

 

若要更進一步了解背景代理運作的過程，可以開啟「Chat Debug」視窗，裡頭會記錄GitHub Copilot與LLM的溝通歷程，請參考下圖所示：

圖 17：「Chat Debug」視窗

 

記得按下「Keep」按鈕保留背景代理開發的成果，請參考下圖所示：

圖 18：保留背景代理開發的成果

 

下一步提交變更到本地倉庫，請參考下圖所示：

圖 19：提交變更到本地倉庫

 

若開發工具跳出以下訊息，可按下「Yes」按鈕確認提交，請參考下圖所示：

圖 20：確認提交

 

別忘了要同步到GitHub遠端倉庫，請參考下圖所示：

圖 21：同步到GitHub遠端倉庫

 

好了，看看目前開發的成果，現在網頁畫面的上方多一個按鈕可以切換佈景主題，請參考下圖所示：|

圖 22：切換成亮色系佈景主題效果

 

切換成暗色系佈景主題效果請參考下圖所示：

圖 23：切換成暗色系佈景主題效果

雲端代理（cloud agent）

在 GitHub Copilot 的代理式架構中，「雲端代理（Cloud Agent）」主要負責承載高運算量、跨情境推理與大規模語言模型推論的工作。相較於本地代理與背景代理，雲端代理更著重於深度理解、複雜推理與生成能力。

 

雲端代理運行於 GitHub 與 Microsoft 所提供的雲端基礎設施上，可以直接存取大型語言模型（LLM）與相關 AI 服務。通常我們會運用本地代理已完成上下文整理與資料篩選，讓雲端代理接手進行高階推理，例如設計程式架構，或產出具備一致風格與邏輯的程式碼。

 

 

使用雲端代理（cloud agent）進行開發

接著我們使用雲端代理（cloud agent ，例如GitHub Copilot coding agent）加強美化血壓應用程式的網頁畫面，並透過 GitHub 的請求提交（Pull Request）來協作工作流程。

 

在GitHub Copilot聊天視窗，選擇「New Cloud Agent」新增一個雲端代理聊天視窗，請參考下圖所示：

圖 24：新增一個雲端代理聊天視窗

 

在雲端代理聊天視窗輸入提示如下，然後送出提示：

重新設計一下配色，light佈景主題使用淡橘色系，dark佈景主題使用深紫色系。新增一些動畫效果美化一下。

雲端代理（cloud agent）會啟動新的工作階段，在您的GitHub倉庫中建立新分支和 Pull Request，在聊天視窗中會看到一個[WIP]項目，點選「See more」連結會開啟這一個Pull Request，請參考下圖所示：

圖 25：雲端代理（cloud agent）建立一個Pull Request

我們需要等待一段時間，待雲端代理（cloud agent）工作完成後，按一下 「Ready for Review」 按鈕，將 Pull Request從草稿狀態改為正式審查狀態，等待團隊成員審查程式碼，請參考下圖所示：

圖 26：「Ready for Review」

 

因為這是一個展示的範例，讓我們假設雲端代理（cloud agent）的工作完全沒問題，按下「Merge Pull Request」合併程式，請參考下圖所示：

圖 27：「Merge Pull Request」

按下「Create Merge Commit」按鈕，請參考下圖所示：

圖 28：「Create Merge Commit」

最後您可從遠端倉庫下載最新專案檔案下來測試看看成品，請參考下圖所示：

圖 29：下載最新檔案

 

總結

本文完整說明了在 Visual Studio Code開發工具 中，透過 GitHub Copilot 不同類型代理（Agents）協作完成一個血壓記錄網頁應用程式的實際流程，展現了代理式開發在現代軟體開發中的應用價值。整個專案從建立基礎功能、美化介面，到進階主題切換與協作流程，皆由不同代理分工完成，形成一套高效率且結構清楚的開發模式。

 

在專案初期，本地代理（Local Agent）負責理解專案結構、檔案關係與開發環境，並在最小化資料外流的前提下，協助快速產生符合需求的前端程式碼，大幅降低開發門檻並提升回應速度。接著，計畫代理（Plan Agent）用來產出清楚的功能實作計畫，將複雜需求拆解成可執行步驟，為後續開發建立明確方向。背景代理（Background Agent）則在不中斷主開發流程的情況下，依照計畫自動實作功能，展現非同步開發的優勢，讓開發者能專注於其他任務。

 

最後，雲端代理（Cloud Agent）負責高運算與高階推理任務，透過 GitHub 的 Pull Request 流程重新設計配色與動畫效果，並順利整合進專案中，充分展現 AI 代理在團隊協作與程式碼品質提升上的潛力。

 

整體而言，熟悉本地、計畫、背景與雲端代理各司其職的協作方式，不僅提升了開發效率與品質，也讓軟體開發從單純的工具輔助，邁向具備情境理解與任務協調能力的智慧化流程，為未來的開發模式提供了清楚且具體的參考方向。