使用 AI 程式碼生成工具創建並編輯生成頁面

本文說明如何使用 AI 程式碼產生工具，例如 GitHub Copilot CLI，在 Power Apps 中為模型驅動應用程式建立與編輯生成頁面。透過此方法，您可以直接將先進的程式碼產生功能整合進開發工作流程，創建新的生成頁面，或透過自然語言指令在現有頁面上反覆迭代。頁面可以使用 Microsoft Dataverse 表格、Power Platform 連接器（預覽）以及 Dataverse 自訂 API（預覽）。

提示

這種方法是建立生成式頁面的推薦路徑。它讓你能存取最新的前沿 AI 模型，能在全球公共雲上運作，並讓你能一次建立多個頁面，支援 Dataverse 表格、Power Platform 連接器資料來源（預覽版）或 Dataverse 自訂 API（預覽版）。

使用 AI 程式碼生成工具搭配生成頁面，補充了 Power Apps（make.powerapps.com）中基於 UI 的體驗。這種以程式碼為先的做法適合任何想取得最新 AI 模型，或偏好使用本地開發工具與 CLI 工作流程的創作者或開發者。

備註

若要規劃、建置或編輯整個模型驅動應用程式，而非單一生成頁面，請使用模型應用程式建構器技能。欲了解更多資訊，請參閱「使用 AI 程式碼生成工具建置與編輯模型驅動應用程式」。

你可以用程式碼產生工具做什麼

在一次執行中，根據純語言需求建立一個或多個生成頁面
建立你頁面所需的支援 Microsoft Dataverse 表格，或重複使用現有表格，包括新表格的範例資料
（預告）透過 Power Platform 連接器連接 Dataverse 以外的資料
（預覽）使用 Dataverse 自訂 API 呼叫伺服器端商務邏輯
將產物放入新穎或現有的應用程式與解決方案中，包括即時創建應用程式或解決方案
透過您的 AI 工具請求變更或增強，更新現有的生成頁面
使用 PAC CLI 指令直接部署到您的 Power Apps 環境中
使用慣用 IDE 和開發工具在本機工作，並支援對產生的程式碼執行 npm install 和 IntelliSense

運作原理

你用自然語言描述你想建構的內容，例如：「建立一個生成式頁面儀表板，顯示按營收分類的頂尖帳戶。」
規劃代理人會分析您的申請並提出計畫。計畫可能包含一個或多個頁面、Dataverse 資料表、連接器支援的資料來源，或頁面所需的自訂 API，以及產物所在的應用程式與解決方案。規劃師接著委託專業代理人來建造計畫所描述的內容。例如，表格建構器和頁面建構器。
你在建造前會檢視並調整計畫。你可以更改頁面數、交換或新增資料來源、鎖定不同的應用程式，或將產物放在不同的解決方案中。
代理程式會為你的頁面產生可生產的 TypeScript 和 React 程式碼，以及支援本地開發的檔案。
該工具使用生成式頁面 PAC CLI 命令，將成品部署至環境，並選擇性執行瀏覽器內驗證步驟，此步驟會利用產生的測試操作頁面。
你的生成頁面會出現在你的模型驅動應用程式中。

必要條件

在開始之前，請確保你擁有這裡描述的必要軟體和權限。

軟體需求

元件	最低版本	更多資訊
Node.js	18.0 或更新版本	下載 Node.js
Power Platform CLI （PAC CLI）	Latest	安裝 PAC CLI
GitHub Copilot CLI、Claude Code 或其他程式碼產生工具	Latest	GitHub Copilot CLI 或 Claude Code

其他需求

一個 Power Platform 環境，搭配模型驅動應用程式來部署頁面。
一個 經過認證的 PAC CLI 會話 連接到你的目標環境。
- 想了解更多連線的細節，請前往 Authenticate Power Platform CLI 。
若是由連接器支援的頁面 (預覽版)，需要為您要使用的每個連接器準備一個現有且已驗證的 Power Platform 連線。代理程式如有需要，可建立連線參考。
若是呼叫 Dataverse 自訂 API 的頁面 (預覽版)，目標環境中需要有現有且受支援的自訂 API。若要實作伺服器端邏輯並將其暴露給生成頁面，請建立 Dataverse 外掛，然後使用 Plug-in Registration Tool 建立自訂 API ，並將其與外掛類型關聯。關於設定細節，請參閱建立並使用自訂 API。
若要將生成式頁面的遙測資料匯出至 Azure 應用程式 Insights（預覽），管理員必須在 Power Platform 管理中心為該環境設定 Application Insights 資料匯出。該環境必須符合 Application Insights 資料匯出的要求。

這很重要

連接器支援、自訂 API 支援，以及用於生成頁面的 Application Insights 遙測是預覽功能。預覽功能不供生產時使用，而且功能可能受限。自訂 API 會在登入使用者的情境中執行，並受 Dataverse 安全規範。

備註

這項功能已在全球公有雲中提供。

安裝外掛

執行安裝程式，在 PowerShell 或 Windows 指令視窗中設定所有 Power Platform 外掛。

iwr https://raw.githubusercontent.com/microsoft/power-platform-skills/main/scripts/install.js -OutFile install.js; node install.js; del install.js

curl -fsSL https://raw.githubusercontent.com/microsoft/power-platform-skills/main/scripts/install.js | node

安裝程式會自動執行：

偵測可用工具（GitHub Copilot CLI、Claude Code）
註冊插件市集並安裝所有插件
啟用自動更新，讓插件保持最新

安裝後，如有需要，重新啟動你的 AI 工具。

只安裝生成頁面外掛

若要僅安裝 GitHub Copilot CLI 或 Claude Code 的生成式頁面外掛：

新增 Power Platform Skills 市集外掛： /plugin marketplace add microsoft/power-platform-skills
安裝 Power Apps 外掛： /plugin install model-apps@power-platform-skills

備註

對於 Claude Code，你可以在不同的權限下安裝外掛，例如全域、本地或使用者。根據範圍不同，你需要在正確的目錄中才能使用 Claude Code 的外掛。前往以技能擴充 Claude。

安裝後，你可以以下方式使用該插件：

明確執行指令 /genpage 。
描述你想建立的頁面。工具會自動偵測並使用該外掛。

提示

開啟自動更新，即可自動接收市集和技能的更新。使用指令 /plugin ，導航到市集，選擇市集，並開啟自動更新。

使用其他 AI 程式碼產生工具

對於其他 AI 程式碼產生工具，請確保您的工具能存取 Power Platform skills GitHub 資料庫中的生成頁面資源。 model-apps plugin 資料夾包含元件文件、範例程式碼、PAC CLI 指令參考，以及建立符合生成頁面需求的程式碼所需的工作流程指令，包括如何建立支援多語言與多區域的頁面。請參閱倉庫說明文件，了解如何使用您偏好的工具存取及使用這些資源。

技能概觀

Power Apps 外掛提供了這項技能，用於處理生成式頁面。

技能	Command	描述
生成式頁面	`/genpage`	為生成式頁面（用於創建或編輯情境）建立程式碼

這項技能讓你能描述你想建置的內容，並讓 AI 工具為你的生成頁面生成完整的 TypeScript 和 React 程式碼，然後直接部署到 Power Apps 環境。

建立一個新的生成頁面

從零開始建立新頁面或一組頁面時，請遵循這個工作流程。

開始與你的 AI 工具對話。 描述你想創造的東西。你想說得多具體或多開放式都可以——要求越模糊，代理就越會自行補足內容。你也可以附上圖片或其他材質，來指導視覺、主題和版面設計。例如：
- 「建立一個生成式頁面儀表板，使用帳戶表顯示我們依營收排名前十的帳戶」
- 「建立兩個管理志工報名頁面——一個瀏覽空班，一個確認報名——使用範例資料。」
- 「使用事件資料表，建立可在地圖上顯示事件報告的生成式頁面」
- 建立一個頁面，顯示來自 Project files SharePoint 清單的文件。
- 「建立一個訂單審核頁面，並有一個可呼叫 ApproveOrder 自訂 API 的批准按鈕。」
如果被要求，請選擇建立或編輯。 如果規劃人員不確定你是要新頁面還是更新現有頁面，他們會詢問。要遵循此工作流程，請選擇建立新頁面。編輯方面，請前往「編輯現有生成頁面」。
回答關於要建造什麼的問題。 規劃師可能會詢問你想要什麼樣的頁面，提供幾個範例，並接受自訂描述，例如使用哪些資料、版面配置、展示哪些資訊、互動等等。要具體說明業務需求與數據需求，及早識別行動裝置需求，並提及任何 UI 元件或版面偏好。規劃師也可能詢問釐清問題，例如是否使用 Dataverse 表格、Power Platform 連接器、自訂 API 或硬編碼範例資料，以及是否要將頁面加入現有應用程式或建立新應用程式。
檢視並調整計畫。 規劃工具會呈現一份計畫，包含它打算建立的頁面、Dataverse 表格、連接器支援的資料來源或可使用的自訂 API、用於托管頁面的應用程式（新舊或現有），以及產物所在的解決方案。與代理程式反覆調整你想更改的任何事項——例如頁面數量、使用的表格或自訂 API、目標應用程式或目標解決方案。當計畫符合你的意圖時，再確認它。
讓代理程式自行建置與部署。 專門代理會產生頁面、支援的資料表、連接器或自訂 API 綁定，以及程式碼，然後部署到你的環境。
可選擇在瀏覽器中驗證。 建置完成後，代理可能會提供在瀏覽器中執行驗證步驟，自動對頁面執行 Playwright 測試，以確認頁面是否載入並正常運作。利用這個方法在手動測試前發現明顯問題。
測試並反覆修改。 在 Power Apps 中開啟你的模型驅動應用程式，並導向新頁面。如果需要做修改，請回到你的 AI 工具，用自然語言描述更新內容。

備註

你可以隨時從模型驅動的應用程式設計器更改生成頁面在網站地圖中的名稱或位置。

使用連接器資料（預覽）

連接器支援可讓生成式頁面透過 Power Platform 連接器生態系統使用 Dataverse 以外的資料。支援所有 Power Platform 連接器。

要使用連接器資料，請描述你希望頁面在提示中使用的服務和資料。例如，請代理建立一個頁面，顯示來自 SharePoint list 的文件。在規劃過程中，代理人：

列出所選環境中可用的連接及連接參考。
它會要求你選擇一個連線。如果該連線沒有連線參照，代理程式會建立一個連線參照。
它要求你選擇連接器資料，例如資料集和表格或連接器操作。
將連接器繫結新增至頁面，並在部署頁面時一併包含該繫結。

在批准建置前，請先檢視計畫中的連接器資料來源。使用您的使用者將會使用的身分與權限來測試產生的頁面。

使用自訂 API（預覽版）

當你的頁面需要明確執行伺服器端商業邏輯時，例如核准訂單、重新計算價格或驗證交易，請使用 Dataverse 自訂的 API 動作或函式。

要使用自訂 API，請在提示符中描述操作以及頁面何時該呼叫。例如，請客服加入一個 Approve 按鈕，呼叫 ApproveOrder 當前訂單的自訂 API。在規劃過程中，代理人：

列出所選環境中支援的自訂 API。
它會要求你選擇頁面應該呼叫的自訂 API。
在產生頁面時，會使用自訂 API 的請求與回應屬性。
將自訂 API 綁定新增至頁面，並在部署頁面時一併包含該綁定。

在核准建置前，請先檢視自訂 API 及其在計畫中的輸入。使用您的使用者所使用的身分和權限來測試產生的頁面。

使用 Application Insights（預覽）監控生成頁面

Power Apps 可以自動將生成頁面的操作遙測資料匯出到 Azure 應用程式 Insights。此功能對使用 AI 程式碼生成工具建立的頁面及以 Power Apps（make.powerapps.com）創建的頁面同樣適用。

管理員必須先在 Power Platform 管理中心為該環境設定 Application Insights 資料匯出。匯出設定完成後，Power Apps 會自動回報已發佈生成頁面所支援的遙測數據。你的提示和所產生的頁面程式碼不需要初始化 Application Insights JavaScript SDK、包含連接字串，或加入遙測呼叫。

自動匯出的遙測數據包括：

已完成的頁面會載入 pageViews 表格。
exceptions 表格中未處理的頁面轉譯錯誤與 Promise 拒絕。
支援的 dataApi 作業 (在 dependencies 資料表中)。
從表格中的 pageViews 生成頁面開始導覽。

Application Insights 的生成式頁面遙測功能為預覽功能。在功能推出期間，可用性可能會因環境而異。

關於設定說明，請前往「匯出資料至應用程式洞察」。如需模型導向應用程式遙測結構描述與查詢的相關指引，請前往模型導向應用程式的遙測事件。

編輯現有的生成頁面

利用這個工作流程更新環境中已存在的頁面。

檢索現有頁面。在你的 AI 程式碼產生工具中，請透過提供頁面 ID（GUID）或網站地圖上的頁面名稱，以及它所在的應用程式，請求取得現有的生成頁面。例如，「我想更新 Demo 應用程式中的寵物領養生成頁面。」
請描述你的最新進展。告訴 AI 工具你想做哪些改變。例如：
- 「新增篩選器，只顯示活躍紀錄」
- 「變更版面配置，以網格而非清單來顯示卡片」
- 「新增一張顯示採用趨勢隨時間變化的圖表」
- 「更新表單以包含新的寵物性格自訂欄位」
審查、發表、測試並反覆修改。 AI 工具會根據你所要求的變更產生更新的 TypeScript 程式碼。請遵循「建立新生成頁面」部分所述的審查、發佈與測試流程。持續用自然語言指令迭代，直到頁面符合你的要求。

本地開發檔案

當 AI 工具產生頁面時，也會寫入兩個支援檔案到你的本地工作區，讓審查和反覆修改程式碼變得更方便：

package.json — 宣告所產生的頁面在編譯時所依據的執行階段和開發階段相依性。在產生後執行 npm install，以安裝這些相依性。
genpage.d.ts — 非透過 npm 安裝物件的環境 TypeScript 宣告，例如 dataApi 和 pageInput。

當兩個檔案都準備就緒且 npm install 完成後，編輯器的 IntelliSense (例如 VS Code 中的) 對產生的程式碼進行處理，讓您可以檢閱頁面或手動編輯頁面，而不會看到表示未解析類型的紅色波形曲線。

建立一個頁面來接受輸入參數

生成頁面可接受輸入參數 recordId、 entityName、 data，使其在從其他頁面或程式碼中導航到時，能接收上下文資料。當你指示 AI 工具設定輸入參數時，它會產生適當的初始化程式碼，讓頁面讀取並使用這些值。

請描述你在提示中想要的參數：

「設定頁面以接受客戶 recordId 和 entityName。頁面載入時，請利用這些參數取得並顯示對應的帳號資料。」
「設定此頁面接受包含自訂篩選物件的資料參數。用它來篩選頁面載入時顯示的紀錄。」

要導航到頁面並傳遞這些參數，請參考「使用用戶端 API 導航至生成頁面」。

當地語系化

當你使用 Power Apps 技能建立生成頁面時，本地化會自動處理。代理程式會偵測你環境中所有啟用的語言，並產生程式碼，讓頁面能支援所有這些語言。該頁面尊重每位使用者偏好的語言及地區格式偏好，包括日期、數字和貨幣。

如果你想鎖定與環境中啟用的語言不同的語言集合，你可以要求代理調整，例如：

「更新此頁面，僅支援英語、法語和西班牙語。」

備註

生成頁面的網站地圖條目預設不會本地化。要本地化網站地圖條目，請在應用程式設計器中分開進行更新。

欲了解更多資訊，請參閱 Power Platform 技能庫中的在地化說明。

故障排除

頁面在 Power Apps 中無法載入

如果你進入生成頁面並看到錯誤訊息或空白畫面：

開啟瀏覽器開發工具（大多數瀏覽器為 F12）。
選擇 控制台 標籤。
複製錯誤訊息完整內容，包括堆疊追蹤。
回到 AI 程式碼生成工具，並將錯誤及其相關上下文粘貼上去。

「我打開頁面時出現這個錯誤：[貼上錯誤在此]。請解決問題。」

AI 工具會分析錯誤，找出根本原因，並產生修正方案。
檢視修正後，請工具重新發布該頁面。

還原為可正常運作的版本

如果最近的變更導致頁面損壞或問題惡化，你可以請 AI 工具回滾回先前可用的版本：

「最近的變動弄壞了頁面。請回復到最後可用的版本。」

接下來，AI 工具則是：

識別已進行的變更
還原先前可用的程式碼
重新部署穩定版本

最佳做法

從簡單開始。從頁面的基本版本開始，逐步增加複雜度。
要經常檢查。每次重大變更後部署並測試你的頁面。
具體明確。提供詳細的要求以獲得更好的初步結果。
使用現有的圖案。描述需求時，參考相似的頁面或使用者介面模式。
驗證產生的程式碼。務必審查產生的程式碼，以確保符合貴組織的標準與合規要求。