使用 AI 代码生成工具创建和编辑画布应用(预览版)

[本文是预发行文档,可能会有所更改。]

本文介绍如何使用 AI 代码生成工具(如 GitHub Copilot CLI 和 Claude Code)在Power Apps中创建和编辑画布应用。 使用此方法,你将用自然语言描述所需内容,并使用本地工具生成和验证应用代码。

重要

  • 这是一项预览功能。
  • 预览功能不适用于生产用途,并且可能具有受限功能。 这些功能受补充使用条款的约束,并在正式发布之前可用,以便客户提前访问并提供反馈。

将 AI 代码生成工具与画布应用结合使用可提供一个创作选项,该选项可补充 make.powerapps.comPower Apps 中的视觉体验。

可以用代码生成工具做些什么

  • 根据纯语言要求创建新的画布应用
  • 通过描述所需的更改来更新现有画布应用
  • 在您首选的 IDE 和开发环境中进行本地工作,同时与实时协同创作会话保持同步。

工作原理

  1. 你用自然语言描述你想构建的内容。 例如,你可能会说:“创建一个用于跟踪费用报表并带有审批工作流的画布应用。”
  2. AI 代码生成工具使用已安装的画布应用技能来发现可用的控件、连接器和数据源。 它可以提出后续问题来阐明你的要求。
  3. 该工具生成 .pa.yaml 用于定义屏幕、控件和 Power Fx 公式的文件。
  4. 该工具使用画布应用编写 MCP 服务器验证生成的代码,并修复任何验证错误。
  5. 应用通过共同创作会话与 Power Apps Studio 同步。

先决条件

在开始之前,请确保拥有所需的软件和权限。

软件要求

组分 最低版本 更多信息
.NET SDK 10.0 或更高版本 下载 .NET SDK
GitHub Copilot CLI、Claude Code 或其他代码生成工具 Latest GitHub Copilot CLIClaude Code

其他要求

  • Power Platform 环境和创建或编辑画布应用的权限。
  • 打开 Power Apps Studio,并为要创建或编辑的应用启用 coauthoring
    • 若要启用共同创作,请在 Power Apps Studio 中打开应用,转到“设置>”,然后打开共同创作

安装画布应用插件

若要安装画布应用 MCP 插件,请在 GitHub Copilot CLI 或 Claude Code 中运行以下命令。

  1. 添加 Power Platform Skills 市场插件。

    /plugin marketplace add microsoft/power-platform-skills
    
  2. 安装画布应用插件。

    /plugin install canvas-apps@power-platform-skills
    

安装插件后,请先配置画布应用创作 MCP 服务器,然后再创建或编辑应用。 可以通过以下任一方式配置服务器:

  • 运行 /configure-canvas-mcp 命令。
  • 描述要生成的内容,并让该工具指导你完成设置。

配置画布应用编写 MCP 服务器

画布应用插件使用 MCP(模型上下文协议)服务器与 Power Apps 通信。 在创建或编辑应用之前,请配置此连接。

  1. 在 Power Apps Studio 中打开画布应用,确认已启用 coauthoring
  2. 从浏览器复制 Power Apps Studio URL。
  3. 在 AI 工具中运行 /configure-canvas-mcp ,或要求该工具配置 MCP 服务器。
  4. 在出现提示时提供设计器 URL。 该工具会自动提取环境 ID、应用 ID 和群集信息。

通过使用 MCP 服务器,AI 工具可以列出和描述可用控件、发现 API 和数据源、验证应用 YAML 以及从实时共同创作会话同步应用状态。

画布应用插件 存储库 包括控制文档、设计指南、技术参考和工作流说明,可帮助你创建遵循画布应用要求的代码。

技能概述

画布应用插件提供了这些用于处理画布应用的技能。

技能 命令 Description
生成画布应用 /generate-canvas-app 通过自然语言描述创建新的画布应用程序
编辑画布应用 /edit-canvas-app 从自然语言描述中编辑现有的画布应用
配置 Canvas MCP /configure-canvas-mcp 将画布应用编写 MCP 服务器注册到您的 AI 工具中

这些技能可让你描述要生成的内容、为应用生成 .pa.yaml 文件、针对画布创作服务器验证这些文件,以及将更改与实时Power Apps Studio 会话同步。

创建新的画布应用

从头开始生成新应用时,请遵循此工作流。

  1. 开始与 AI 工具的对话。 描述要创建的内容,包括要使用的布局和数据,例如 Dataverse 表或连接器。 越具体,初始结果就越好。 还可以附加图像或其他材料来指导视觉对象、主题和布局。 例如:
    • “使用可搜索列表和详细信息视图创建用于跟踪清单的画布应用”
    • “使用多步骤表单构建员工入职画布应用”
    • “创建一个画布应用仪表板,其中包括图表和 KPI 来显示销售度量”
    • “创建具有照片捕获功能的用于现场检查的画布应用”
  2. 回答任何澄清的问题。 AI 工具使用 MCP 服务器来发现可用的控件和数据源,并提出问题以更好地了解你的要求。
  3. 查看生成的代码并对其进行验证。 AI 工具为每个屏幕生成 .pa.yaml 文件,并使用画布应用编写 MCP 服务器对其进行验证。 该工具会自动修复验证错误,更改与 Power Apps Studio 中的实时共同创作会话同步。
  4. 测试和迭代。 在 Power Apps Studio 中打开画布应用以预览和测试它。 如果需要更改,请返回到 AI 工具,并使用自然语言描述更新。

编辑现有画布应用

使用此工作流更新协作会话中已存在的应用。

  1. 同步现有应用。 在 AI 代码生成工具中,请求编辑您的画布应用。 该工具从共同创作会话同步当前应用状态,并将现有屏幕和控件拉取到本地 .pa.yaml 文件中。 例如:“我想编辑我的费用跟踪画布应用。”
  2. 描述所需的更新。 例如:
    • “添加筛选器以仅显示待定费用”
    • “将主屏幕布局更改为使用基于卡片的网格”
    • “添加新屏幕以使用图表查看费用历史记录”
    • “更新窗体以包括支出类别的下拉列表”
  3. 查看、验证、测试和迭代。 AI 工具根据请求的更改生成更新 .pa.yaml 的文件,并使用画布创作服务器对其进行验证。 继续迭代自然语言指令,直到应用满足需求。

故障排除

应用不反映更改

如果更改未显示在 Power Apps Studio 中:

  1. 通过让工具列出可用控件来验证与画布应用编写 MCP 服务器的连接。
  2. 确保在 Power Apps Studio 会话中启用共同创作(设置>更新>共同创作)。
  3. 再次运行 /configure-canvas-mcp ,检查 MCP 服务器是否配置了正确的环境 ID 和应用 ID。

MCP 服务器连接问题

如果画布应用编写 MCP 服务器没有响应:

  1. 通过在终端中运行 dotnet --version 来验证是否已安装 .NET 10 SDK。
  2. 确保你的 Power Apps Studio 会话仍处于活动状态,并且已启用协同创作功能。
  3. 使用新的 Designer URL 重新运行 /configure-canvas-mcp

还原到工作版本

如果最近的更改会中断应用或使问题变得更糟,请让 AI 工具回滚到以前的工作版本。 例如:

最近的更改导致应用无法运行。 请恢复到上一个可正常工作的版本。

AI 工具将:

  1. 从协同编写会话同步当前状态。
  2. 标明您所做的更改。
  3. 还原以前的工作代码。
  4. 验证并重新同步稳定版本。

最佳做法

  • 从简单开始。 从应用的基本版本开始,并随着时间的推移增加复杂性。
  • 经常测试。 在发生重大更改后,在 Power Apps Studio 中预览应用。
  • 具体。 详细要求通常产生更好的初始结果。
  • 重用模式。 在描述要求时引用类似的应用或 UI 模式。
  • 验证生成的代码。 请始终查看生成的 .pa.yaml 文件,确保它们符合组织的标准和合规性要求。
  • 描述视觉方向。 如果需要特定的布局或样式,请在提示中包含该指南。

重要

AI 代码生成工具尽力尝试生成遵循辅助功能和安全最佳做法的完整生产就绪代码,但仍负责验证。 确保生成的代码符合组织的标准、策略和合规性要求。