Skapa och redigera generativa sidor med ai-kodgenereringsverktyg

Den här artikeln beskriver hur du använder AI-kodgenereringsverktyg, till exempel GitHub Copilot CLI, för att skapa och redigera generativa sidor för modelldrivna appar i Power Apps. Med den här metoden kan du integrera avancerade funktioner för kodgenerering direkt i ditt utvecklingsarbetsflöde för att skapa nya generativa sidor eller iterera på befintliga med hjälp av instruktioner för naturligt språk. Sidor kan använda Microsoft Dataverse-tabeller, Power Platform-kopplingar (förhandsversion) och anpassade API:er för Dataverse (förhandsversion).

Användning av AI-kodgenereringsverktyg med generativa sidor kompletterar den användargränssnittsbaserade upplevelsen i Power Apps (make.powerapps.com). Det här kodfokuserade arbetssättet passar alla skapare eller utvecklare som vill få tillgång till de senaste AI-modellerna eller föredrar att arbeta med lokala utvecklingsverktyg och CLI-baserade arbetsflöden.

Vad du kan göra med verktyg för kodgenerering

• Skapa en eller flera sidor med generativt innehåll i en och samma körning utifrån krav på naturligt språk
• Skapa stödtabeller för Microsoft Dataverse dina sidor behöver eller återanvänd befintliga, inklusive exempeldata för nya tabeller
• (Förhandsversion) Ansluta till data utanför Dataverse med hjälp av Power Platform-anslutningar
• (Förhandsversion) Anropa affärslogik på serversidan med hjälp av anpassade API:er för Dataverse
• Placera artefakter i en ny eller befintlig app och lösning, inklusive att skapa en app eller lösning i farten
• Uppdatera befintliga generativa sidor genom att begära ändringar eller förbättringar via AI-verktyget
• Distribuera direkt till din Power Apps miljö med hjälp av PAC CLI-kommandon
• Arbeta lokalt med önskade IDE- och utvecklingsverktyg, med npm install och IntelliSense-stöd för den genererade koden

Så här fungerar det

1. Du beskriver vad du vill skapa på naturligt språk, till exempel "Skapa en generativ sidinstrumentpanel som visar de främsta kontona efter intäkter".
2. En planner-agent analyserar din begäran och föreslår en plan. Planen kan innehålla en eller flera sidor, Dataverse-tabeller, anslutningsbaserade datakällor eller anpassade API:er som sidorna behöver samt appen och lösningen där artefakterna finns. Planeraren delegerar sedan till specialiserade agenter för att skapa vad planen beskriver. Till exempel en tabellbyggare och en sidbyggare.
3. Du granskar och justerar planen innan du skapar den. Du kan ändra antalet sidor, växla eller lägga till datakällor, rikta in dig på en annan app eller placera artefakterna i en annan lösning.
4. Agenterna genererar produktionsklar TypeScript- och React-kod för din sida eller dina sidor, tillsammans med stödfiler för lokal utveckling.
5. Verktyget distribuerar artefakterna till din miljö med hjälp av PAC CLI-kommandon för generativa sidor och kan även köra ett verifieringssteg i webbläsaren som testar sidan med hjälp av genererade tester.
6. Din generativa sida visas i din modelldrivna app.

Förutsättningar

Innan du börjar kontrollerar du att du har nödvändig programvara och behörigheter som beskrivs här.

Programvarukrav

Ytterligare krav

• En Power Platform-miljö med en modelldriven app för att distribuera sidor.
• En autentiserad PAC CLI-session som är ansluten till målmiljön.
  • Gå till Autentisera Power Platform CLI för mer information om hur du ansluter.
• För anslutningsprogrambaserade sidor (förhandsversion) krävs en befintlig autentiserad Power Platform-anslutning för varje anslutningsprogram som du vill använda. Agenten kan skapa en anslutningsreferens om det behövs.
• För sidor som anropar ett anpassat API för Dataverse (förhandsversion) krävs ett befintligt anpassat API som stöds i målmiljön. Om du vill implementera logik på serversidan och exponera den för en generativ sida skapar du ett Plugin-program för Dataverse och skapar sedan ett anpassat API med hjälp av plugin-registreringsverktyget och associerar det med plugin-programmet. Konfigurationsinformation finns i Skapa och använda anpassade API:er.
• Om du vill exportera generativ sidtelemetri till Azure Application Insights (förhandsversion) måste en administratör konfigurera Application Insights-dataexport för miljön i administrationscentret för Power Platform. Miljön måste uppfylla kraven för Application Insights-dataexport.

Installera plugin-programmet

Kör installationsprogrammet för att konfigurera alla Power Platform-plugin-program i antingen PowerShell eller ett Windows-kommandofönster.

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

Installationsprogrammet gör automatiskt:

• Identifierar tillgängliga verktyg (GitHub Copilot CLI, Claude Code)
• Registrerar plugin-marknadsplatsen och installerar alla plugin-program
• Aktiverar automatisk uppdatering så att plugin-program förblir aktuella

Starta om AI-verktyget om det behövs efter installationen.

Installera endast plugin-programmet för generativ sida

För att installera endast det generativa sidpluginet för GitHub Copilot CLI eller Claude Code:

1. Lägg till plugin-programmet Power Platform Skills Marketplace: /plugin marketplace add microsoft/power-platform-skills
2. Installera Power Apps-plugin-programmet: /plugin install model-apps@power-platform-skills

När du har installerat det kan du använda plugin-programmet genom att antingen:

• Köra kommandot /genpage explicit.
• Beskriver den sida som du vill skapa. Verktyget identifierar och använder plugin-programmet automatiskt.

Använda andra VERKTYG för AI-kodgenerering

För andra AI-kodgenereringsverktyg kontrollerar du att verktyget har åtkomst till de generativa sidresurserna från Power Platform skills GitHub-förråd. Plugin-mappen model-apps innehåller komponentdokumentation, exempelkod, PAC CLI-kommandoreferens och arbetsflödesinstruktioner som krävs för att skapa kod som följer generativa sidkrav, inklusive hur du skapar sidor som stöder flera språk och regioner. Mer information om hur du kommer åt och använder dessa resurser med ditt önskade verktyg finns i filen Viktigt för lagringsplatsen.

Kunskapsöversikt

Plugin-programmet Power Apps tillhandahåller den här färdigheten för att arbeta med generativa sidor.

Med den här färdigheten kan du beskriva vad du vill skapa och låta AI-verktyget generera fullständig TypeScript- och React-kod för din generativa sida och sedan distribuera den direkt till din Power Apps-miljö.

Skapa en ny generativ sida

Följ det här arbetsflödet när du skapar en ny sida eller uppsättning sidor från grunden.

1. Starta en konversation med ai-verktyget. Beskriv vad du vill skapa. Var så specifik eller så öppen som du vill – ju vagare förfrågan är, desto mer fyller agenten själv i resten. Du kan också bifoga en bild eller annat material för att vägleda visuella objekt, teman och layout. Till exempel:

   • Skapa en generativ instrumentpanel för sidan som visar våra 10 främsta konton efter intäkter genom att använda Kontotabellen
   • "Skapa två sidor för att hantera mina frivilliga registreringar – en för att bläddra i öppna skift och en för att bekräfta en registrering – med hjälp av exempeldata"
   • "Skapa en generativ sida för att visa incidentrapporter på en karta med hjälp av tabellen Incident"
   • Skapa en sida som visar dokument från SharePoint-listan "Project files".
   • "Skapa en ordergranskningssida med knappen Godkänn som anropar det anpassade API:et ApproveOrder ."

2. Välj skapa eller redigera om du tillfrågas. Om planner-agenten inte är säker på om du vill ha en ny sida eller om du vill uppdatera en befintlig, frågar den. Om du vill följa det här arbetsflödet väljer du att skapa en ny sida. Om du vill redigera går du till Redigera en befintlig generativ sida.

3. Svara på frågor om vad du ska bygga. Planeraren kan fråga vilken typ av sida du vill ha, erbjuda några exempel och acceptera en anpassad beskrivning, till exempel vilka data som ska användas, layout, vilken information som ska visas, interaktioner och så vidare. Var specifik om affärsbehov och datakrav, identifiera mobila krav tidigt och nämn eventuella gränssnittskomponenter eller layoutinställningar. Planeraren kan också ställa klargörande frågor, till exempel om du vill använda Dataverse-tabeller, Power Platform-anslutningsappar, anpassade API:er eller hårdkodade exempeldata och om du vill lägga till sidan i en befintlig app eller skapa en ny app.

4. Granska och justera planen. Planeraren presenterar en plan som innehåller den sida eller de sidor som den avser att skapa, Dataverse-tabeller, anslutningsbaserade datakällor eller anpassade API:er som ska användas, appen som ska vara värd för sidan (ny eller befintlig) och lösningen där artefakterna finns. Iterera med agenten för att justera allt du vill ändra – till exempel antalet sidor, vilka tabeller eller anpassade API:er som används, målappen eller mållösningen. Bekräfta planen när den matchar din avsikt.

5. Låt agenterna bygga och driftsätta. De specialiserade agenterna genererar sidan eller sidorna, med stöd för tabeller, anslutningsprogram eller anpassade API-bindningar samt kod, och driftsätter dem sedan i din miljö.

6. Du kan också verifiera i webbläsaren. Efter bygget kan agenten erbjuda sig att köra ett verifieringssteg i webbläsaren som kör automatiskt genererade Playwright-tester mot sidan för att bekräfta att den läses in och fungerar korrekt. Använd detta för att fånga upp uppenbara problem innan du testar manuellt.

7. Testa och iterera. Öppna din modelldrivna app i Power Apps och gå till den nya sidan. Om du behöver göra ändringar går du tillbaka till AI-verktyget och beskriver uppdateringarna på naturligt språk.

Använd anslutningsdata (förhandsversion)

Med stöd för anslutningsappen kan en generativ sida använda data utanför Dataverse via Power Platform Connector-ekosystemet. Alla Power Platform-anslutningsprogram stöds.

Om du vill använda anslutningsdata beskriver du den tjänst och de data som du vill att sidan ska använda i prompten. Be till exempel agenten att skapa en sida som visar dokument från en SharePoint list. Vid planering utför agenten följande:

1. Visar en lista över tillgängliga anslutningar och anslutningsreferenser i den valda miljön.
2. Ber dig att välja en anslutning. Om anslutningen inte har någon anslutningsreferens skapar agenten en.
3. Uppmanar dig att välja anslutningsdata, till exempel en datauppsättning och en tabell eller en anslutningsåtgärd.
4. Lägger till anslutningsbindningen på sidan och inkluderar den när sidan distribueras.

Granska datakällan för anslutningsappen i planen innan du godkänner bygget. Testa den genererade sidan med de identiteter och behörigheter som användarna ska använda.

Använda ett anpassat API (förhandsversion)

Använd en anpassad API-åtgärd eller funktion för Dataverse när din sida uttryckligen behöver köra affärslogik på serversidan, till exempel godkänna en order, beräkna om ett pris eller verifiera en transaktion.

Om du vill använda ett anpassat API beskriver du åtgärden och när sidan ska anropa den i din prompt. Be till exempel agenten att lägga till knappen Godkänn som anropar det anpassade API:et ApproveOrder för den aktuella ordningen. Vid planering utför agenten följande:

1. Visar en lista över de anpassade API:er som stöds i den valda miljön.
2. Uppmanar dig att välja det anpassade API som sidan ska anropa.
3. Använder det anpassade API:ets egenskaper för begäran och svar när sidan genereras.
4. Lägger till den anpassade API-bindningen på sidan och inkluderar den när sidan distribueras.

Granska det anpassade API:et och dess indata i planen innan du godkänner bygget. Testa den genererade sidan med de identiteter och behörigheter som användarna använder.

Övervaka en generativ sida med Application Insights (förhandsversion)

Power Apps kan automatiskt exportera drifttelemetri för generativa sidor till Azure Application Insights. Den här funktionen fungerar på samma sätt för sidor som skapats med AI-kodgenereringsverktyg och sidor som skapats i Power Apps (make.powerapps.com).

En administratör måste först konfigurera Application Insights-dataexport för miljön i administrationscentret för Power Platform. När exporten har konfigurerats rapporterar Power Apps automatiskt telemetri som stöds från publicerade generativa sidor. Din prompt och den genererade sidkoden behöver inte initiera Application Insights JavaScript SDK, innehålla någon anslutningssträng eller lägga till telemetrianrop.

Automatiskt exporterad telemetri omfattar:

• Slutförda sidinläsningar i pageViews tabellen.
• Ohanterade sidrenderingsfel och avvisade löften i tabellen exceptions.
• Åtgärder som stöds dataApi i dependencies tabellen.
• Navigering initierad från en generativ sida i pageViews tabellen.

Application Insights-telemetri för generativa sidor är en förhandsgranskningsfunktion. Tillgängligheten kan variera beroende på miljö medan funktionen lanseras.

Installationsinstruktioner finns i Exportera data till Application Insights. För det modelldrivna apptelemetrischemat och frågevägledningen går du till Telemetrihändelser för modelldrivna appar.

Redigera en befintlig generativ sida

Använd det här arbetsflödet för att uppdatera en sida som redan finns i din miljö.

1. Hämta den befintliga sidan. I ai-kodgenereringsverktyget begär du att hämta den befintliga generativa sidan genom att ange sid-ID (GUID) eller sidnamnet i webbplatskartan och appen den finns i. Till exempel "Jag vill uppdatera den generativa sidan för husdjursadoption från demoversionen av appen."

2. Beskriv dina uppdateringar. Tala om för AI-verktyget vilka ändringar du vill göra. Till exempel:

   • "Lägg till ett filter för att endast visa aktiva poster"
   • "Ändra layouten för att visa kort i ett rutnät i stället för en lista"
   • "Lägg till ett diagram som visar implementeringstrender över tid"
   • "Uppdatera formuläret så att det innehåller det nya anpassade fältet för husdjurs temperament"

3. Granska, publicera, testa och iterera. AI-verktyget genererar uppdaterad TypeScript-kod baserat på dina begärda ändringar. Följ samma gransknings-, publicerings- och testprocess som beskrivs i avsnittet "Skapa en ny generativ sida". Fortsätt iterera med instruktioner för naturligt språk tills sidan uppfyller dina krav.

Filer för lokal utveckling

När AI-verktyget genererar en sida skrivs även två stödfiler till din lokala arbetsyta för att göra det enklare att granska och iterera koden:

• package.json – deklarerar körnings- och utvecklingsberoenden som den genererade sidan kompileras mot. Kör npm install efter genereringen för att installera dessa beroenden.
• genpage.d.ts – omgivande TypeScript-deklarationer för objekt som inte är installerade via npm, till exempel dataApi och pageInput.

Med båda filerna på plats och npm install slutfört fungerar redigeringsprogrammets IntelliSense, till exempel i VS Code, med den genererade koden, så att du kan granska eller handredigera sidan utan att se röda understrykningar för oupplösta typer.

Konfigurera en sida för att acceptera indataparametrar

Generativa sidor kan acceptera indataparametrarna recordId, entityNameoch , så dataatt de kan ta emot kontextuella data när de navigeras till från andra sidor eller kod. När du instruerar AI-verktyget att konfigurera indataparametrar genererar det lämplig initieringskod så att sidan läser och använder dessa värden när den läses in.

Beskriv de parametrar som du vill ha i prompten:

• "Konfigurera sidan för att acceptera ett recordId och entityName för kontot. När sidan läses in använder du dessa parametrar för att hämta och visa motsvarande kontoinformation."
• "Konfigurera den här sidan så att den accepterar en dataparameter som innehåller ett anpassat filterobjekt. Använd den för att filtrera de poster som visas när sidan läses in."

Information om hur du navigerar till sidan och skickar dessa parametrar finns i Navigera till och från en generativ sida med klient-API.

Lokalisering

När du skapar en generativ sida med hjälp av den Power Apps kunskapen hanteras lokaliseringen automatiskt. Agenten identifierar alla språk som är aktiverade i din miljö och genererar kod så att sidan fungerar med alla dessa språk. Sidan respekterar varje användares önskade språk och regionala formateringsinställningar för datum, siffror och valuta.

Om du vill rikta in dig på en annan uppsättning språk än de som är aktiverade i din miljö kan du be agenten att justera, till exempel:

"Uppdatera den här sidan för att endast stödja engelska, franska och spanska."

Mer information finns i lokaliseringsinstruktionerna på lagringsplatsen för Power Platform Skills.

Felsökning

Det går inte att läsa in sidan i Power Apps

Om du navigerar till din generativa sida och ser ett felmeddelande eller en tom skärm:

1. Öppna utvecklarverktyg för webbläsare (F12 i de flesta webbläsare).

2. Välj fliken Konsol .

3. Kopiera det fullständiga felmeddelandet, inklusive stackspårningen.

4. Gå tillbaka till ai-kodgenereringsverktyget och klistra in felet med kontext:

   "Jag får det här felet när du öppnar sidan: [klistra in fel här]. Åtgärda problemet."

   AI-verktyget analyserar felet, identifierar grundorsaken och genererar en åtgärd.

5. Granska korrigeringen och be verktyget att publicera sidan igen.

Återgå till en fungerande version

Om de senaste ändringarna bröt din sida eller gjorde problem värre kan du be AI-verktyget att återställa till en tidigare fungerande version:

"De senaste ändringarna orsakade fel på sidan. Återgå till den senaste fungerande versionen."

AI-verktyget sedan:

1. Identifierar de ändringar som har gjorts
2. Återställer den tidigare arbetskoden
3. Distribuerar om den stabila versionen

Regelverk

• Börja enkelt. Börja med en grundläggande version av sidan och iterera för att lägga till komplexitet.
• Testa ofta. Distribuera och testa sidan efter varje betydande ändring.
• Var specifik. Ange detaljerade krav för att få bättre initiala resultat.
• Använd befintliga mönster. Referera till liknande sidor eller användargränssnittsmönster när du beskriver dina krav.
• Verifiera genererad kod. Granska alltid den genererade koden för att säkerställa att den uppfyller organisationens standarder och efterlevnadskrav.

Begränsningar

Begränsningarna för generativa sidor som skapats med AI-kodgenereringsverktyg är desamma som för generativa sidor som skapats i Power Apps Maker-portalen:

• Datakällor som stöds är Dataverse-tabeller och Power Platform-anslutningar (förhandsversion).
• Anpassade API-åtgärder och funktioner stöds i förhandsversionen. Anpassade API:er som använder bindningstypen EntityCollection eller entitetsparametrar stöds inte.
• Samarbete stöds inte – se till att endast en tillverkare arbetar på en generativ sida i taget.
• Endast dessa datatyper stöds: Val, Valuta, Kund, Datum och Tid, Endast Datum, Decimaltal, Flyttal, Bild, Uppslag, Flerlines text, Status, Statusorsak, Text, Heltal, Ja/Nej, Unik identifierare.

Relaterat innehåll

• Generera en sida med naturligt språk med modelldrivna appar
• Navigera till och från en generativ sida med klient-API
• dataApi-objektmetoder för generativa sidor
• Referens för Power Platform CLI