Creación y edición de páginas generativas con herramientas de generación de código de IA

En este artículo se describe cómo usar herramientas de generación de código de IA, como GitHub Copilot CLI, para crear y editar páginas generativas para aplicaciones controladas por modelos en Power Apps. Mediante este enfoque, puede integrar funcionalidades avanzadas de generación de código directamente en el flujo de trabajo de desarrollo para crear nuevas páginas generativas o iterar en las existentes mediante instrucciones de lenguaje natural. Las páginas pueden usar tablas de Microsoft Dataverse, conectores de Power Platform (versión preliminar) y API personalizadas de Dataverse (versión preliminar).

Sugerencia

Este enfoque es la vía recomendada para crear páginas generativas. Proporciona acceso a los modelos de inteligencia artificial de frontera más recientes, trabaja en todo el mundo en nubes públicas y le permite crear varias páginas con tablas de Dataverse compatibles, orígenes de datos del conector de Power Platform (versión preliminar) o API personalizadas de Dataverse (versión preliminar) en una sola ejecución.

El uso de herramientas de generación de código de IA con páginas generativas complementa la experiencia basada en la interfaz de usuario en Power Apps (make.powerapps.com). Este enfoque de código primero se ajusta a cualquier creador o desarrollador que quiera acceder a los modelos de IA más recientes o prefiere trabajar con herramientas de desarrollo locales y flujos de trabajo basados en la CLI.

Nota:

Para planificar, crear o editar una aplicación completa basada en modelos en lugar de páginas generativas individuales, utilice la herramienta de creación de aplicaciones basadas en modelos. Para más información, consulte Compilación y edición de aplicaciones controladas por modelos con herramientas de generación de código de IA.

Qué puede hacer con las herramientas de generación de código

  • Crear una o varias páginas generativas en una sola ejecución a partir de requisitos de lenguaje sin formato
  • Crear las tablas auxiliares de Microsoft Dataverse que necesiten sus páginas, o reutilizar las existentes, incluidos datos de ejemplo para las tablas nuevas.
  • (Versión preliminar) Conexión a datos fuera de Dataverse mediante conectores de Power Platform
  • (Versión preliminar) Llamar a la lógica de negocio del servidor usando las API personalizadas de Dataverse
  • Colocar artefactos en una aplicación y solución nuevas o existentes, incluida la creación de una aplicación o solución sobre la marcha
  • Actualice las páginas generativas existentes solicitando cambios o mejoras a través de la herramienta de inteligencia artificial.
  • Despliegue directamente en su entorno de Power Apps mediante comandos de la CLI de PAC
  • Trabaje localmente con sus herramientas de desarrollo y IDE preferidas, con npm install e IntelliSense compatible con el código generado.

Cómo funciona

  1. Describe lo que desea compilar en lenguaje natural, por ejemplo, "Crear un panel de página generativo que muestre las cuentas principales por ingresos".
  2. Un agente de planner analiza la solicitud y propone un plan. El plan puede incluir una o varias páginas, las tablas de Dataverse, los orígenes de datos respaldados por conectores o las API personalizadas que necesitan las páginas y la aplicación y la solución donde residen los artefactos. A continuación, el planificador delega a agentes especializados para crear lo que describe el plan. Por ejemplo, un generador de tablas y un generador de páginas.
  3. Revisa y ajusta el plan antes de compilar. Puede cambiar el número de páginas, intercambiar o agregar orígenes de datos, establecer como destino una aplicación diferente o colocar los artefactos en una solución diferente.
  4. Los agentes generan código TypeScript y React listos para producción para la página o páginas, junto con archivos auxiliares para el desarrollo local.
  5. La herramienta despliega los artefactos en tu entorno mediante comandos de PAC CLI para páginas generativas y, opcionalmente, ejecuta un paso de verificación en el explorador que prueba la página con pruebas generadas.
  6. La página generada aparece en la aplicación basada en modelos.

Prerrequisitos

Antes de empezar, asegúrese de que tiene el software y los permisos necesarios que se describen aquí.

Requisitos de software

Componente Versión mínima Más información
Node.js 18.0 o posterior Descargar Node.js
CLI de Power Platform (PAC CLI) Latest Instalación de la CLI de PAC
GitHub Copilot CLI, Claude Code u otra herramienta de generación de código Latest GitHub Copilot CLI o Claude Code

Requisitos adicionales

Importante

La compatibilidad con conectores, la compatibilidad con API personalizada y la telemetría de Application Insights para páginas generativas son características en versión preliminar. Las características en versión preliminar no se han diseñado para un uso de producción y pueden tener una funcionalidad restringida. Las API personalizadas se ejecutan en el contexto del usuario que ha iniciado sesión y están sujetas a la seguridad de Dataverse.

Nota:

Esta funcionalidad está disponible en todo el mundo en nubes públicas.

Instalación del complemento

Ejecute el instalador para configurar todos los complementos de Power Platform en PowerShell o en una ventana de comandos de 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

El instalador automáticamente:

  • Detecta las herramientas disponibles (GitHub Copilot CLI, Claude Code)
  • Registra el marketplace del complemento e instala todos los complementos.
  • Habilita la actualización automática para que los complementos permanezcan actualizados

Después de la instalación, reinicie la herramienta de inteligencia artificial si es necesario.

Instale únicamente el complemento de página generativa

Para instalar únicamente el plugin de generación de páginas para GitHub Copilot CLI o Claude Code:

  1. Agregue el complemento del Marketplace de Habilidades de Power Platform: /plugin marketplace add microsoft/power-platform-skills
  2. Instale el complemento Power Apps: /plugin install model-apps@power-platform-skills

Nota:

Para Claude Code, puede instalar el complemento con diferentes ámbitos, como global, local o usuario. En función del ámbito, debe estar en el directorio correcto para que Claude Code use el complemento. Vaya a Ampliar Claude con capacidades.

Una vez instalado, puede usar el complemento mediante:

  • Ejecutar explícitamente el /genpage comando.
  • Describir la página que desea crear. La herramienta detecta y usa automáticamente el complemento.

Sugerencia

Active la actualización automática para recibir actualizaciones del mercado y habilidades automáticamente. Use el /plugin comando, vaya a Marketplaces, elija Marketplace y active la actualización automática.

Uso de otras herramientas de generación de código de IA

Para otras herramientas de generación de código de IA, asegúrate de que tu herramienta tenga acceso a los recursos de las páginas generativas del repositorio de habilidades de Power Platform en GitHub. La carpeta del complemento model-apps incluye documentación de componentes, código de ejemplo, referencia de comandos de la CLI de PAC e instrucciones de flujo de trabajo necesarias para crear código que se adhiere a los requisitos de página generativa, incluido cómo crear páginas que admitan varios idiomas y regiones. Consulte el archivo Léame del repositorio para obtener información acerca de cómo acceder y utilizar estos recursos utilizando su herramienta preferida.

Resumen de habilidades

El complemento Power Apps proporciona esta aptitud para trabajar con páginas generativas.

Aptitud Comando Description
Páginas generativas /genpage Crear código para páginas generativas (para escenarios de creación o edición)

Esta aptitud le permite describir lo que desea compilar y hacer que la herramienta de IA genere código TypeScript y React completo para la página generativa y, a continuación, lo implemente directamente en el entorno de Power Apps.

Crear una nueva página generativa

Siga este flujo de trabajo al compilar una nueva página o un conjunto de páginas desde cero.

  1. Inicie una conversación con la herramienta de inteligencia artificial. Describir lo que desea crear. Sea tan específico o tan general como quiera: cuanto más vaga sea la solicitud, más completará por su cuenta el agente. También puede adjuntar una imagen u otros materiales para servir de guía para los elementos visuales, la temática y el diseño. Por ejemplo:

    • "Crear un panel de página generativo que muestre nuestras 10 cuentas principales mediante ingresos mediante la tabla Cuenta"
    • Cree dos páginas para gestionar las inscripciones de voluntarios: una para consultar los turnos disponibles y otra para confirmar una inscripción, con datos de ejemplo.
    • "Crear una página generativa para mostrar informes de incidentes en un mapa mediante la tabla Incidente"
    • Cree una página que muestre los documentos de la lista de SharePoint Archivos del proyecto.
    • "Cree una página de revisión de pedidos con un botón Aprobar que llame a la ApproveOrder API personalizada".

  2. Elija crear o editar si se le pide. Si el agente planificador no está seguro de si quieres crear una página nueva o actualizar una existente, te lo pregunta. Para seguir este flujo de trabajo, elija crear una nueva página. Para editarlo, vaya a Editar una página generativa existente.

  3. Responda a preguntas sobre qué crear. El planificador puede preguntar qué tipo de página desea, ofrecer algunos ejemplos y aceptar una descripción personalizada, como qué datos usar, diseño, qué información mostrar, interacciones, etc. Sea específico sobre las necesidades empresariales y los requisitos de datos, identifique los requisitos móviles al principio y mencione los componentes de la interfaz de usuario o las preferencias de diseño. El planificador también puede formular preguntas aclaradas, como si usar tablas de Dataverse, conectores de Power Platform, API personalizadas o datos de ejemplo codificados de forma rígida, y si se debe agregar la página a una aplicación existente o crear una aplicación nueva.

  4. Revise y ajuste el plan. El planificador presenta un plan que incluye la página o las páginas que pretende compilar, las tablas de Dataverse, los orígenes de datos respaldados por conectores o las API personalizadas que se van a usar, la aplicación para hospedar la página (nueva o existente) y la solución donde residen los artefactos. Iteración con el agente para ajustar todo lo que quiera cambiar; por ejemplo, el número de páginas, qué tablas o API personalizadas se usan, la aplicación de destino o la solución de destino. Confirme el plan cuando coincida con la intención.

  5. Deje que los agentes compilen e implementen. Los agentes especializados generan una o varias páginas, con compatibilidad para tablas, conectores, enlaces a API personalizadas y código, y luego las implementan en su entorno.

  6. Opcionalmente, compruebe en el explorador. Después de la compilación, el agente podría ofrecerse a ejecutar un paso de verificación en el navegador que ejecuta automáticamente pruebas de Playwright generadas para confirmar que la página se carga y funciona correctamente. Úselo para detectar problemas obvios antes de realizar pruebas manualmente.

  7. Prueba e iteración. Abra la aplicación controlada por modelos en Power Apps y vaya a la nueva página. Si necesita realizar cambios, vuelva a la herramienta de inteligencia artificial y describa las actualizaciones en lenguaje natural.

Nota:

Puedes cambiar el nombre o la posición de la página generativa en el mapa del sitio en cualquier momento desde el diseñador de aplicaciones controladas por modelos.

Usar datos del conector (versión preliminar)

La compatibilidad con los conectores permite que una página generativa use datos externos a Dataverse a través del ecosistema de conectores de Power Platform. Se admiten todos los conectores de Power Platform.

Para usar los datos del conector, describa en la instrucción el servicio y los datos que quiere que use la página. Por ejemplo, pida al agente que cree una página que muestre documentos de un SharePoint list. Durante la planeación, el agente:

  1. Enumera las conexiones y las referencias de conexión disponibles en el entorno seleccionado.
  2. Le pide que seleccione una conexión. Si la conexión no tiene una referencia de conexión, el agente crea una.
  3. Le pide que seleccione los datos del conector, como un conjunto de datos y una tabla o una operación de conector.
  4. Agrega el enlace del conector a la página y la incluye cuando se implementa la página.

Revisa el origen de datos del conector en el plan antes de que apruebes la compilación. Pruebe la página generada con las identidades y permisos que usarán los usuarios.

Uso de una API personalizada (versión preliminar)

Use una acción o función de API personalizada de Dataverse cuando la página necesite ejecutar explícitamente la lógica de negocios del lado servidor, como aprobar un pedido, recalcular un precio o validar una transacción.

Para usar una API personalizada, describa la operación y cuándo debe llamarla la página en su solicitud. Por ejemplo, pida al agente que agregue un botón Aprobar que llame a la ApproveOrder API personalizada para el pedido actual. Durante la planeación, el agente:

  1. Enumera las API personalizadas admitidas disponibles en el entorno seleccionado.
  2. Le pide que seleccione la API personalizada a la que debe llamar la página.
  3. Usa las propiedades de solicitud y respuesta de la API personalizada cuando genera la página.
  4. Agrega el enlace de API personalizado a la página e incluyelo cuando se implementa la página.

Revise la API personalizada y sus entradas en el plan antes de aprobar la compilación. Pruebe la página generada con las identidades y permisos que usan los usuarios.

Supervisión de una página generativa con Application Insights (versión preliminar)

Power Apps puede exportar automáticamente la telemetría operativa de las páginas generativas a Aplicación de Azure Insights. Esta funcionalidad funciona de la misma manera para las páginas creadas con herramientas y páginas de generación de código de IA creadas en Power Apps (make.powerapps.com).

Un administrador debe configurar primero la exportación de datos de Application Insights para el entorno en el Centro de administración de Power Platform. Una vez configurada la exportación, Power Apps notifica automáticamente la telemetría admitida desde páginas generativas publicadas. El mensaje y el código de página generado no necesitan inicializar el SDK de JavaScript de Application Insights, incluir una cadena de conexión ni agregar llamadas de telemetría.

La telemetría exportada automáticamente incluye:

  • La página completada se carga en la tabla pageViews.
  • Errores no controlados de procesamiento de la página y rechazos de promesas en la tabla exceptions.
  • Operaciones dataApi admitidas en la tabla dependencies.
  • Navegación iniciada desde una página generativa de la pageViews tabla.

La telemetría de Application Insights para páginas generativas es una característica en versión preliminar. La disponibilidad puede variar según el entorno mientras se implementa la característica.

Para obtener instrucciones de configuración, vaya a Exportación de datos a Application Insights. Para obtener la guía de consulta y el esquema de telemetría de aplicaciones controladas por modelos, vaya a Eventos de telemetría para aplicaciones controladas por modelos.

Edición de una página generativa existente

Use este flujo de trabajo para actualizar una página que ya existe en su entorno.

  1. Recupere la página existente. En la herramienta de generación de código de IA, solicite recuperar la página generativa existente proporcionando el identificador de página (GUID) o el nombre de la página en el mapa del sitio y la aplicación en la que se encuentra. Por ejemplo, "Quiero actualizar la página generativa de adopción de mascotas desde la aplicación demostración".

  2. Describe las actualizaciones. Indique a la herramienta de inteligencia artificial qué cambios desea realizar. Por ejemplo:

    • "Agregar un filtro para mostrar solo registros activos"
    • "Cambiar el diseño para mostrar tarjetas en una cuadrícula en lugar de una lista"
    • "Agregar un gráfico que muestra las tendencias de adopción a lo largo del tiempo"
    • "Actualizar el formulario para incluir el nuevo campo personalizado para el temperamento de mascotas"

  3. Revise, publique, pruebe e itere. La herramienta ai genera código TypeScript actualizado en función de los cambios solicitados. Siga el mismo proceso de revisión, publicación y prueba descrito en la sección "Crear una nueva página generativa". Continúe iterando con instrucciones de lenguaje natural hasta que la página cumpla sus requisitos.

Archivos de desarrollo local

Cuando la herramienta de inteligencia artificial genera una página, también escribe dos archivos auxiliares en el área de trabajo local para facilitar la revisión e iteración en el código:

  • package.json : declara las dependencias de tiempo de ejecución y desarrollo en las que se compila la página generada. Ejecute npm install después de la generación para instalar estas dependencias.
  • genpage.d.ts : declaraciones de TypeScript ambiente para objetos que no están instalados a través de npm, como dataApi y pageInput.

Con ambos archivos en su lugar y una vez completado npm install, el IntelliSense de su editor, como en VS Code, funciona sobre el código generado, por lo que puede revisar o editar manualmente la página sin ver subrayados rojos por tipos sin resolver.

Configuración de una página para aceptar parámetros de entrada

Las páginas generativas pueden aceptar los parámetros de entrada recordId, entityName y data, lo que les permite recibir datos contextuales cuando se navega a ellas desde otras páginas o código. Cuando se indica a la herramienta de inteligencia artificial que configure parámetros de entrada, genera el código de inicialización adecuado para que la página lea y use esos valores cuando se carga.

Describe los parámetros que desees en tu solicitud:

  • "Configura la página para aceptar un recordId de una Cuenta y entityName. Cuando se cargue la página, use estos parámetros para capturar y mostrar los detalles de la cuenta correspondientes".
  • "Configure esta página para aceptar un parámetro de datos que contenga un objeto de filtro personalizado. Úselo para filtrar los registros mostrados cuando se cargue la página".

Para navegar a la página y pasar estos parámetros, consulte Navegar a y desde una página generativa mediante la API de cliente.

Localización

Al crear una página generativa mediante la aptitud Power Apps, la localización se controla automáticamente. El agente detecta todos los idiomas habilitados en el entorno y genera código para que la página funcione con todos esos idiomas. La página respeta el idioma preferido de cada usuario y las preferencias de formato regional para fechas, números y moneda.

Si quiere establecer como destino un conjunto diferente de idiomas que los habilitados en su entorno, puede pedir al agente que ajuste, por ejemplo:

"Actualice esta página para admitir solo inglés, francés y español".

Nota:

La entrada en el mapa del sitio de una página generativa no se localiza predeterminadamente. Para localizar las entradas del mapa del sitio, actualícelas por separado en el diseñador de aplicaciones.

Para obtener más información, vaya a las instrucciones de localización del repositorio De aptitudes de Power Platform.

Troubleshooting

La página no se carga en Power Apps

Si navega a la página generativa y observa un mensaje de error o una pantalla en blanco:

  1. Abra las herramientas de desarrollo del explorador (F12 en la mayoría de los exploradores).

  2. Seleccione la pestaña Consola .

  3. Copie el mensaje de error completo, incluido el seguimiento de la pila.

  4. Vuelva a la herramienta de generación de código de IA y pegue el error con el contexto:

    "Obtengo este error al abrir la página: [error de pegado aquí]. Corrija el problema".

    La herramienta ai analiza el error, identifica la causa principal y genera una corrección.

  5. Revise la corrección y pida a la herramienta que vuelva a publicar la página.

Reversión a una versión de trabajo

Si los cambios recientes rompieron la página o empeoraron los problemas, puede pedir a la herramienta de inteligencia artificial que revierte a una versión de trabajo anterior:

"Los cambios recientes dañaron la página. Retroceda a la última versión funcional.

A continuación, la herramienta de inteligencia artificial:

  1. Identifica los cambios realizados
  2. Restaura el código de trabajo anterior
  3. Vuelve a implementar la versión estable

Prácticas recomendadas

  • Comience con sencillez. Comience con una versión básica de su página e itere para agregar complejidad.
  • Pruebe con frecuencia. Implemente y pruebe la página después de cada cambio significativo.
  • Sea específico. Proporcione requisitos detallados para obtener mejores resultados iniciales.
  • Use patrones existentes. Haga referencia a páginas o patrones de interfaz de usuario similares al describir sus requisitos.
  • Valide el código generado. Revise siempre el código generado para asegurarse de que cumple los estándares y los requisitos de cumplimiento de su organización.

Importante

Aunque las herramientas de generación de código de IA realizan un mejor intento de generar código completo y listo para producción con procedimientos recomendados de accesibilidad y seguridad, es el responsable en última instancia de validar el código. Asegúrese de que el código generado cumple los estándares, directivas y requisitos de cumplimiento de su organización.

Limitaciones

Las limitaciones de las páginas generativas creadas con las herramientas de generación de código de IA son las mismas que las de las páginas generativas creadas en el portal de Power Apps maker:

  • Los orígenes de datos admitidos son tablas de Dataverse y conectores de Power Platform (versión preliminar).
  • Las acciones y funciones de API personalizadas se admiten en versión preliminar. Las API personalizadas que usan el tipo de enlace EntityCollection o los parámetros Entity no se admiten.
  • No se admite la colaboración: asegúrese de que solo un creador está trabajando en una página generativa a la vez.
  • Solo se admiten estos tipos de datos: Opción, Moneda, Cliente, Fecha y Hora, Solo Fecha, Número Decimal, Número de Punto Flotante, Imagen, Búsqueda, Texto Multilínea, Estado, Razón del Estado, Texto, Número Entero, Sí/No, Identificador Único.

Contenido relacionado

  • Se actualizó por última vez el