Criar e editar páginas gerativas com ferramentas de geração de código de IA

Este artigo descreve como usar ferramentas de geração de código de IA, como GitHub Copilot CLI, para criar e editar páginas generativas para aplicativos controlados por modelos em Power Apps. Usando essa abordagem, você pode integrar recursos avançados de geração de código diretamente em seu fluxo de trabalho de desenvolvimento para criar novas páginas generativas ou iterar nas existentes usando instruções de linguagem natural. As páginas podem usar tabelas do Microsoft Dataverse, conectores do Power Platform (versão prévia) e APIs personalizadas do Dataverse (versão prévia).

O uso de ferramentas de geração de código de IA com páginas gerativas complementa a experiência baseada em interface do usuário em Power Apps (make.powerapps.com). Essa abordagem de primeiro código atende a qualquer criador ou desenvolvedor que queira acessar os modelos de IA mais recentes ou prefira trabalhar com ferramentas de desenvolvimento locais e fluxos de trabalho baseados em CLI.

O que você pode fazer com as ferramentas de geração de código

• Criar uma ou mais páginas generativas em uma única execução a partir de requisitos de linguagem simples
• Crie as tabelas de suporte do Microsoft Dataverse de que suas páginas precisam ou reutilize as existentes, incluindo dados de exemplo para as novas tabelas
• (Versão prévia) Conectar-se a dados fora do Dataverse usando conectores do Power Platform
• (Versão prévia) Chamar lógica de negócios do lado do servidor usando APIs personalizadas do Dataverse
• Coloque artefatos em um aplicativo e solução novos ou existentes, incluindo a criação de um aplicativo ou solução em tempo real
• Atualizar páginas generativas existentes solicitando alterações ou aprimoramentos por meio da ferramenta de IA
• Implante diretamente no seu ambiente de Power Apps usando comandos da CLI do PAC
• Trabalhe localmente com seu IDE preferido e ferramentas de desenvolvimento, com npm install suporte do IntelliSense para o código gerado

Como funciona

1. Você descreve o que deseja criar em linguagem natural, por exemplo, "Criar um painel de página gerativo mostrando as principais contas por receita".
2. Um agente do Planner analisa sua solicitação e propõe um plano. O plano pode incluir uma ou mais páginas, tabelas do Dataverse, fontes de dados baseadas em conectores ou APIs personalizadas das quais as páginas precisam, e o aplicativo e a solução onde os artefatos se encontram. Em seguida, o planejador delega a agentes especializados para criar o que o plano descreve. Por exemplo, um construtor de tabelas e um construtor de páginas.
3. Você revisa e ajusta o plano antes de construir. Você pode alterar o número de páginas, trocar ou adicionar fontes de dados, direcionar a um aplicativo diferente ou colocar os artefatos em uma solução diferente.
4. Os agentes geram código TypeScript e React prontos para produção para sua página ou páginas, juntamente com arquivos de suporte para desenvolvimento local.
5. A ferramenta implanta os artefatos no seu ambiente usando comandos PAC CLI de página generativa e, opcionalmente, executa uma etapa de verificação no navegador que testa a página com testes gerados.
6. Sua página gerada aparece em seu aplicativo orientado a modelos.

Pré-requisitos

Antes de começar, verifique se você tem o software e as permissões necessários descritos aqui.

Requisitos de software

Requisitos adicionais

• Um ambiente do Power Platform com um aplicativo controlado por modelos para implantar páginas.
• Uma sessão autenticada da CLI do PAC conectada ao seu ambiente de destino.
  • Vá para Autenticar a CLI do Power Platform para obter mais detalhes sobre como se conectar.
• Para páginas com suporte de conector (versão preliminar), uma conexão do Power Platform autenticada existente para cada conector que você deseja usar. O agente pode criar uma referência de conexão, se necessário.
• Para páginas que chamam uma API personalizada do Dataverse (prévia): uma API personalizada existente e com suporte no ambiente de destino. Para implementar a lógica do lado do servidor e expô-la a uma página generativa, crie um plug-in do Dataverse e crie uma API personalizada usando a Ferramenta de Registro de Plug-in e associe-a ao tipo de plug-in. Para obter detalhes de configuração, consulte Criar e usar APIs personalizadas.
• Para exportar a telemetria de página gerativa para o Aplicativo Azure Insights (versão prévia), um administrador deve configurar a exportação de dados do Application Insights para o ambiente no centro de administração do Power Platform. O ambiente deve atender aos requisitos de exportação de dados do Application Insights.

Instalar o plug-in

Execute o instalador para configurar todos os plug-ins do Power Platform no PowerShell ou em uma janela de comando do Windows.

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

O instalador automaticamente:

• Detecta ferramentas disponíveis (CLI do GitHub Copilot, Claude Code)
• Registra o marketplace de plug-ins e instala todos os plug-ins
• Habilita a atualização automática para que os plug-ins permaneçam atualizados

Após a instalação, reinicie a ferramenta de IA, se necessário.

Instalar somente o plug-in de página gerativa

Para instalar apenas o plug-in gerador de página para o GitHub Copilot CLI ou o Claude Code:

1. Adicione o plug-in do Marketplace de Habilidades do Power Platform: /plugin marketplace add microsoft/power-platform-skills
2. Instale o plug-in do Power Apps: /plugin install model-apps@power-platform-skills

Depois de instalado, você pode usar o plug-in:

• Executando o /genpage comando explicitamente.
• Descrevendo a página que você deseja criar. A ferramenta detecta e usa automaticamente o plug-in.

Usando outras ferramentas de geração de código de IA

Para outras ferramentas de geração de código de IA, verifique se sua ferramenta tem acesso aos recursos de página gerativa do repositório GitHub de Habilidades do Power Platform. A pasta de plug-in de aplicativos-modelo inclui documentação de componente, código de exemplo, referência de comandos da interface de linha de comando (CLI) do PAC e instruções de fluxo de trabalho necessárias para criar código conforme aos requisitos de páginas generativas, incluindo como criar páginas que suportam múltiplos idiomas e regiões. Consulte o readme do repositório para obter informações sobre acesso e uso desses recursos com sua ferramenta preferida.

Visão geral de habilidades

O plug-in Power Apps fornece essa habilidade para trabalhar com páginas gerativas.

Essa habilidade permite que você descreva o que deseja criar e faça com que a ferramenta de IA gere código TypeScript e React completos para sua página de geração e, em seguida, implante-o diretamente em seu ambiente de Power Apps.

Criar uma nova página gerativa

Siga este fluxo de trabalho ao criar uma nova página ou um conjunto de páginas do zero.

1. Inicie uma conversa com sua ferramenta de IA. Descreva o que você deseja criar. Seja tão específico ou tão genérico quanto quiser, quanto mais vaga for a solicitação, mais o agente preencherá os detalhes por conta própria. Você também pode anexar uma imagem ou outros materiais para orientar visuais, temas e layout. Por exemplo:

   • "Crie um painel de página gerativo mostrando nossas dez principais contas por receita usando a tabela Conta"
   • "Crie duas páginas para gerenciar minhas inscrição de voluntário – uma para procurar turnos abertos e outra para confirmar uma inscrição – usando dados de exemplo"
   • "Criar uma página geradora para exibir relatórios de incidentes em um mapa usando a tabela Incidente"
   • Crie uma página que mostre documentos da lista Arquivos do Projeto do SharePoint.
   • "Criar uma página de revisão de pedidos com um botão Aprovar que chama a ApproveOrder API personalizada."

2. Escolha criar ou editar, se solicitado. Se o agente do planejador não tiver certeza se você deseja uma nova página ou atualizar uma existente, ele perguntará. Para seguir esse fluxo de trabalho, escolha criar uma nova página. Para edição, acesse Editar uma página de geração existente.

3. Responda a perguntas sobre o que criar. O planejador pode perguntar que tipo de página você deseja, oferecer alguns exemplos e aceitar uma descrição personalizada, como quais dados usar, layout, quais informações exibir, interações e assim por diante. Seja específico sobre as necessidades de negócios e os requisitos de dados, identifique os requisitos móveis antecipadamente e mencione quaisquer componentes de interface do usuário ou preferências de layout. O planejador também pode fazer perguntas esclarecedoras, como se usar tabelas do Dataverse, conectores do Power Platform, APIs personalizadas ou dados de exemplo embutidos em código e se deseja adicionar a página a um aplicativo existente ou criar um novo aplicativo.

4. Examine e ajuste o plano. O planejador apresenta um plano que inclui a página ou as páginas que pretende criar, as tabelas do Dataverse, fontes de dados com suporte de conector ou APIs personalizadas a serem usadas, o aplicativo para hospedar a página (nova ou existente) e a solução em que os artefatos residem. Interaja com o agente para ajustar o que você quiser alterar — por exemplo, o número de páginas, quais tabelas ou APIs personalizadas são usadas, o aplicativo de destino ou a solução de destino. Confirme o plano quando ele corresponder à sua intenção.

5. Permitir que os agentes compilem e implantem. Os agentes especializados geram a página ou páginas, oferecendo suporte a tabelas, conectores ou associações de API personalizadas e código e, em seguida, implantam em seu ambiente.

6. Opcionalmente, verifique no navegador. Após a compilação, o agente pode se oferecer para executar uma etapa de verificação no navegador que roda testes do Playwright gerados automaticamente na página para confirmar se ela carrega e funciona corretamente. Use isso para detectar problemas óbvios antes de testar manualmente.

7. Testar e iterar. Abra seu aplicativo baseado em modelos em Power Apps e navegue até a nova página. Se você precisar fazer alterações, retorne à sua ferramenta de IA e descreva as atualizações em linguagem natural.

Usar dados do conector (versão prévia)

O suporte a conectores permite que uma página generativa use dados fora do Dataverse por meio do ecossistema de conectores do Power Platform. Todos os conectores do Power Platform têm suporte.

Para usar dados do conector, descreva o serviço e os dados que você deseja que a página use no prompt. Por exemplo, peça ao agente para criar uma página que exiba documentos de uma lista do SharePoint. Durante o planejamento, o agente:

1. Lista as conexões e as referências de conexão disponíveis no ambiente selecionado.
2. Solicita que você selecione uma conexão. Se a conexão não tiver uma referência de conexão, o agente criará uma.
3. Solicita que você selecione os dados do conector, como um conjunto de dados e uma tabela ou uma operação de conector.
4. Adiciona a vinculação do conector à página e inclui essa vinculação quando a página é publicada.

Examine a fonte de dados do conector no plano antes de aprovar a criação. Teste a página gerada com as identidades e as permissões que os usuários usarão.

Usar uma API personalizada (versão prévia)

Use uma ação ou função de API personalizada do Dataverse quando sua página precisar executar explicitamente a lógica de negócios do lado do servidor, como aprovar um pedido, recalcular um preço ou validar uma transação.

Para usar uma API personalizada, descreva a operação e quando a página deve chamá-la no prompt. Por exemplo, peça ao agente para adicionar um botão "Aprovar" que chama a API personalizada ApproveOrder para o pedido atual. Durante o planejamento, o agente:

1. Lista as APIs personalizadas com suporte disponíveis no ambiente selecionado.
2. Solicita que você selecione a API personalizada que a página deve chamar.
3. Usa as propriedades de solicitação e resposta da API personalizada quando ela gera a página.
4. Adiciona a associação de API personalizada à página e a inclui quando a página é implantada.

Examine a API personalizada e suas entradas no plano antes de aprovar o build. Teste a página gerada com as identidades e as permissões que os usuários usam.

Monitorar uma página generativa com o Application Insights (versão prévia)

Power Apps pode exportar automaticamente a telemetria operacional para páginas gerativas para Aplicativo Azure Insights. Esse recurso funciona da mesma forma para páginas criadas com ferramentas de geração de código com IA e para páginas criadas no Power Apps (make.powerapps.com).

Um administrador deve primeiro configurar a exportação de dados do Application Insights para o ambiente no centro de administração do Power Platform. Depois que a exportação for configurada, o Power Apps reportará automaticamente a telemetria compatível das páginas generativas publicadas. O prompt e o código de página gerado não precisam inicializar o SDK do Application Insights para JavaScript, incluir uma cadeia de conexão nem adicionar chamadas de telemetria.

A telemetria exportada automaticamente inclui:

• Carregamentos de página concluídos na tabela pageViews.
• Erros de renderização de página não tratados e rejeições de promessas na tabela exceptions.
• Operações dataApi suportadas na tabela dependencies.
• Navegação iniciada a partir de uma página gerativa na pageViews tabela.

A telemetria do Application Insights para páginas generativas é um recurso em versão prévia. A disponibilidade pode variar de acordo com o ambiente enquanto o recurso está sendo implantado.

Para obter instruções de configuração, vá para Exportar dados para o Application Insights. Para obter as orientações sobre consultas e o esquema de telemetria de aplicativos controlados por modelo, acesse Os eventos de telemetria para aplicativos controlados por modelo.

Editar uma página de geração existente

Use esse fluxo de trabalho para atualizar uma página que já existe em seu ambiente.

1. Recupere a página existente. Em sua ferramenta de geração de código de IA, solicite a recuperação da página generativa existente fornecendo a ID da página (GUID) ou o nome da página no sitemap e no aplicativo em que ela está. Por exemplo, "Quero atualizar a página gerativa de Adoção de Animais de Estimação do app Demo".

2. Descreva suas atualizações. Informe à ferramenta de IA quais alterações você deseja fazer. Por exemplo:

   • "Adicionar um filtro para mostrar apenas registros ativos"
   • "Alterar o layout para exibir cartões em uma grade em vez de uma lista"
   • "Adicionar um gráfico mostrando tendências de adoção ao longo do tempo"
   • "Atualize o formulário para incluir o novo campo personalizado para o temperamento do animal de estimação"

3. Analisar, publicar, testar e iterar. A ferramenta de IA gera código TypeScript atualizado com base nas alterações solicitadas. Siga o mesmo processo de revisão, publicação e teste descrito na seção "Criar uma nova página gerativa". Continue iterando com instruções de idioma natural até que a página atenda às suas necessidades.

Arquivos de desenvolvimento local

Quando a ferramenta de IA gera uma página, ela também grava dois arquivos de suporte no workspace local para facilitar a revisão e a iteração no código:

• package.json — declara as dependências de tempo de execução e de desenvolvimento com base nas quais a página gerada é compilada. Execute npm install após a geração para instalar essas dependências.
• genpage.d.ts — declarações de TypeScript ambiente para objetos que não são instalados por meio de npm, como dataApi e pageInput.

Com ambos os arquivos nos seus devidos lugares e com npm install concluído, o IntelliSense do seu editor, como no VS Code, passa a funcionar com base no código gerado, para que você possa revisar ou editar manualmente a página sem ver sublinhados vermelhos por tipos não resolvidos.

Configurar uma página para aceitar parâmetros de entrada

As páginas generativas podem aceitar os parâmetros de entrada recordId, entityName e data, permitindo que estas recebam dados contextuais quando navegadas a partir de outras páginas ou código. Quando você instrui a ferramenta de IA a configurar parâmetros de entrada, ela gera o código de inicialização apropriado para que a página leia e use esses valores quando ela for carregada.

Descreva os parâmetros desejados no prompt:

• "Configure a página para aceitar uma conta recordId e entityName. Quando a página for carregada, use esses parâmetros para buscar e exibir os detalhes da conta correspondentes."
• "Configure esta página para aceitar um parâmetro de dados que contém um objeto de filtro personalizado. Use-o para filtrar os registros exibidos quando a página for carregada."

Para navegar até a página e passar esses parâmetros, consulte Navegar de e para uma página generativa usando a API do Cliente.

Localização

Quando você cria uma página generativa usando o recurso do Power Apps, a localização é gerenciada automaticamente. O agente detecta todos os idiomas habilitados em seu ambiente e gera código para que a página funcione com todos esses idiomas. A página respeita o idioma preferencial de cada usuário e as preferências de formatação regional para datas, números e moeda.

Se você quiser direcionar um conjunto de idiomas diferente daqueles habilitados em seu ambiente, peça ao agente para ajustar, por exemplo:

"Atualize esta página para dar suporte somente a inglês, francês e espanhol."

Para obter mais informações, vá para as instruções de localização no repositório de Habilidades do Power Platform.

Solucionando problemas

A página não está carregando no Power Apps

Se você navegar até sua página de geração e observar uma mensagem de erro ou uma tela em branco:

1. Abra as ferramentas de desenvolvedor do navegador (F12 na maioria dos navegadores).

2. Selecione a guia Console .

3. Copie a mensagem de erro completa, incluindo o rastreamento de pilha.

4. Retorne à ferramenta de geração de código de IA e cole o erro com o contexto:

   "Estou recebendo este erro ao abrir a página: [cole o erro aqui]. Corrija o problema."

   A ferramenta de IA analisa o erro, identifica a causa raiz e gera uma correção.

5. Examine a correção e peça à ferramenta para republicar a página.

Revertendo para uma versão funcional

Se alterações recentes quebrarem sua página ou piorarem os problemas, você poderá pedir à ferramenta de IA para reverter para uma versão de trabalho anterior:

"As últimas alterações causaram erros na página. Reverta para a última versão funcional.

Em seguida, a ferramenta de IA:

1. Identifica as alterações que foram feitas
2. Restaura o código de trabalho anterior
3. Reimplanta a versão estável

Práticas Recomendadas

• Comece de forma simples. Comece com uma versão básica da página e itera para adicionar complexidade.
• Teste com frequência. Implante e teste sua página após cada alteração significativa.
• Seja específico. Forneça requisitos detalhados para obter melhores resultados iniciais.
• Use padrões existentes. Faça referência a páginas semelhantes ou padrões de interface do usuário ao descrever seus requisitos.
• Valide o código gerado. Sempre examine o código gerado para garantir que ele atenda aos padrões e aos requisitos de conformidade da sua organização.

Limitações

As limitações para páginas gerativas criadas com ferramentas de geração de código de IA são as mesmas para páginas generativas criadas no portal do criador de Power Apps:

• As fontes de dados com suporte são tabelas do Dataverse e conectores do Power Platform (versão prévia).
• Ações e funções de API personalizadas têm suporte na versão prévia. Não há suporte para APIs personalizadas que usam o tipo de vinculação EntityCollection ou parâmetros Entity.
• Não há suporte para colaboração — verifique se apenas um criador está trabalhando em uma página gerativa de cada vez.
• Somente esses tipos de dados têm suporte: Opção, Moeda, Cliente, Data e Hora, Apenas Data, Número Decimal, Número de Ponto Flutuante, Imagem, Pesquisa, Texto Multilinha, Status, Razão do Status, Texto, Número Inteiro, Sim/Não, Identificador Único.

Conteúdo relacionado

• Gerar uma página usando linguagem natural com aplicativos controlados por modelos
• Navegar de e para uma página gerativa usando a API do Cliente
• métodos de objeto dataApi para páginas gerativas
• Referência da CLI do Power Platform