Quickstart: Azure-toepassingen ontwikkelen met door agents ondersteunde AI

In deze quickstart gebruikt u GitHub Copilot om een React to-do-toepassing te bouwen en deze te implementeren in Azure App Service met behulp van ai-ondersteunde ontwikkeling. Wanneer u lokaal ontwikkelt, begint u met Copilot planmodus om een gedetailleerd implementatieplan te maken en schakelt u over naar de agentmodus om te bouwen en te implementeren. Wanneer u VS Code voor het web gebruikt, gebruikt u de agentmodus overal. Aan het einde hebt u praktische ervaring met:

  • GitHub Copilot Planmodus om uw project te onderzoeken en implementatieplannen te maken (lokale ontwikkeling)
  • GitHub Copilot-agentmodus voor het opzetten, configureren en uitrollen van een volledige applicatie
  • Azure Vaardigheden om Copilot te verbeteren met Azure specifieke kennis en hulpprogramma's
  • Een werkende to-do-app die wordt uitgevoerd op Azure App Service
  • Een API-eindpunt voor uw to-do-app
  • Azure Developer CLI (azd) voor het inrichten en implementeren van Azure resources vanuit een infrastructuursjabloon

Met de planmodus kunt Copilot uw codebasis onderzoeken en een gestructureerd implementatieplan maken voordat u code schrijft, zodat uw vereisten duidelijk zijn en uw aanpak goed is. Met de agentmodus kunnen Copilot autonoom opdrachten uitvoeren, bestanden bewerken en fouten herhalen. U geeft het doel op en Copilot bepaalt de stappen.

Prerequisites

Er is geen lokale installatie vereist. VS Code for the Web (vscode.dev/azure) biedt u een browsergebaseerde VS Code-omgeving met de Azure Developer CLI, Node.jsen verschillende Azure-extensies die vooraf zijn geïnstalleerd.

Een nieuwe werkruimte maken

  1. Open vscode.dev/azure in uw browser.

  2. Meld u aan met uw Azure-account wanneer u hierom wordt gevraagd.

  3. Maak in het Terminal-venster een nieuwe map voor uw project en wijzig deze.

    mkdir todo-app && cd todo-app

Azure vaardigheden inschakelen

Azure Skills biedt Copilot met gecureerde Azure expertise, werkstromen en kaders, zodat de agent weloverwogen beslissingen kan nemen over Azure services, infrastructuur en implementatie. De Azure MCP-extensie installeert een aanvullende extensie die de Azure vaardigheden in VS Code brengt. Samen configureren ze de Azure MCP-server, Foundry MCP en de volledige vaardighedenlaag automatisch. Zie de opslagplaats Azure Skills Plugin voor meer informatie.

  1. Open het opdrachtpalet.
  2. Selecteer MCP: Servers vermelden.
  3. Als de Azure MCP-server niet actief is, start u deze door Azure MCP>Server starten te selecteren.

Uw toepassing plannen

Planningsmodus laat Copilot uw project analyseren en een gedetailleerd implementatieplan genereren voordat er code wordt geschreven. U controleert en verfijnt het plan en draagt het vervolgens over aan de agentmodus voor uitvoering.

  1. Open de weergave Copilot Chat door het chatpictogram in de activiteitenbalk te selecteren.

  2. Meld u aan bij GitHub Copilot als u dat nog niet hebt gedaan. Selecteer het GitHub Copilot-logo Aanmeldknop op de statusbalk van Visual Studio Code en volg de aanwijzingen om te verifiëren met uw GitHub-account.

  3. Selecteer Plannen in de vervolgkeuzelijst Agents in het chatvenster of typ /plan gevolgd door de beschrijving van uw taak.

    Kopieer en plak de volgende prompt in het Copilot chatvenster:

    /plan 
Create a Vite + React single-page application (SPA) to-do app
with the following features:
- Add, remove, and mark complete/incomplete to-do items.
- Use localStorage to persist to-do items between sessions.
- Choose low-cost Azure resources.
- Create a deployment template for Azure Developer CLI (azd).
- Create a README file with instructions on how to test, run, and deploy the app.

    Note

    Als u GitHub Copilot nog niet hebt ingesteld, wordt u gevraagd u aan te melden bij uw GitHub-account en Copilot in te stellen voordat u de prompt kunt verzenden. Als u geen Copilot abonnement hebt, bent u gekoppeld aan een gratis account waarmee u een maandelijkse limiet voor voltooiingen en chatinteracties krijgt.

  4. Beantwoord eventuele verduidelijkingsvragen die de planagent stelt na het onderzoeken van uw taak. Bijvoorbeeld: TypeScript of JavaScript voor de React-app? Welke stijlbenadering moet worden gebruikt? Moet de azd-sjabloon een GitHub Actions CI/CD-werkstroom bevatten?

  5. Bekijk het gegenereerde plan. Uw plan ziet er ongeveer als volgt uit:

    Plan: Vite + React To-Do SPA with Azure Deployment
A Vite + React + TypeScript SPA scaffolded inside todo-app, with localStorage persistence,
and deployed to Azure Static Web Apps (Free tier) via azd. 
No backend required — all state is client-side.
...

    De planagent produceert een overzicht op hoog niveau, implementatiestappen en verificatiestappen. U kunt vervolgprompts indienen om het plan te herhalen totdat het voldoet aan uw vereisten.

Agentmodus

De agentmodus biedt GitHub Copilot de mogelijkheid om terminalopdrachten uit te voeren, bestanden te maken en te bewerken, en zelf corrigerend wanneer er iets misgaat. U geeft een algemeen doel op en de agent bepaalt welke stappen u moet uitvoeren.

  1. Selecteer Claude Sonnet 4.6-model , agentmodus en Autopilot (preview) in het chatvenster.

    • Met het standaardmodel Auto kunt Copilot het beste model kiezen voor elke stap. Gebruik voor deze quickstart een specifiek model zoals Claude Sonnet 4.6 voor meer deterministisch gedrag, zodat de stappen die Copilot nemen om uw plan te implementeren beter voorspelbaar zijn.
    • Met de agentmodus en autopilot kunnen Copilot terminalopdrachten uitvoeren en bestandswijzigingen autonoom aanbrengen. De Autopilot-modus biedt Copilot de mogelijkheid om zichzelf te corrigeren en te herhalen zonder verdere invoer van u nodig te hebben. Als u liever meer controle hebt, kiest u de standaardgoedkeuringsmodus om elke stap goed te keuren voordat deze wordt uitgevoerd.

  2. Selecteer in het chatvenster De implementatie starten of Start met Autopilot om het plan af te geven aan de agentmodus voor uitvoering. De Autopilot-modus biedt Copilot de mogelijkheid om te herhalen zonder verdere invoer van u nodig te hebben. Als u liever meer controle hebt, kiest u de standaardgoedkeuringsmodus om elke stap goed te keuren voordat deze wordt uitgevoerd.

Wanneer Copilot de implementatie is voltooid, ziet u uitvoer in het chatvenster dat er ongeveer als volgt uit ziet:

All done. Here's a summary of what was built:

App (src/)

src/types.ts — Todo interface
src/hooks/useTodos.ts — addTodo, removeTodo, toggleTodo with localStorage persistence
src/components/TodoForm.tsx, TodoItem.tsx, TodoList.tsx — UI components
src/App.tsx — wired together with task remaining counter
src/App.css / src/index.css — vanilla CSS, light/dark mode
Azure / azd

azure.yaml — host: staticwebapp, dist: dist
infra/main.bicep — subscription-scoped resource group + Static Web App (Free tier)
infra/staticwebapp.bicep, main.parameters.json, abbreviations.json
Docs — README.md with local dev, build, azd up deploy, and azd down teardown instructions.

Build passes with no errors (tsc + Vite). Run npm run dev to start locally, 
or azd up to provision and deploy to Azure.

De app is nu voorzien van de opgegeven functies en de Azure infrastructuursjabloon is klaar voor implementatie. Het README-bestand bevat instructies voor het testen en implementeren van de app. Voordat u implementeert naar Azure, test u de app lokaal om te bevestigen dat deze werkt zoals verwacht.

De app testen

Afhankelijk van hoe u vragen hebt beantwoord tijdens de planningsmodus, kan het lokaal testen van uw app afhankelijk zijn van de implementatie. Controleer het README-bestand om lokaal te testen.

Ervan uitgaande dat de toepassing een Vite + React SPA is zoals gegenereerd in de planningsstappen, start u de ontwikkelserver met de volgende opdracht:

npm install && npm run dev

Met de opdracht wordt de Vite-ontwikkelserver gestart. De terminaluitvoer bevat de localhost-URL waar de app wordt uitgevoerd.

  VITE v5.4.21  ready in 271 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

Open op het tabblad Poorten de URL van de poort doorgestuurd adres in uw browser om de to-do app in een browser te zien.

Schermopname van het tabblad Poorten in VS Code, met de URL van het doorgestuurde adres gemarkeerd voor poort 5173.

Test de functionaliteit door taken toe te voegen, te schakelen en te verwijderen om te bevestigen dat alles werkt zoals verwacht.

Schermopname van To-Do app met 2 van drie resterende taken met één voltooide taak en een invoerveld om nieuwe taken toe te voegen.

Wanneer u klaar bent met testen, stopt u de ontwikkelserver door in de terminal te drukken Ctrl + C .

Vraag naar Azure-services

Nu u een werkende app hebt, vraagt u de agent over welke Azure-services geschikt zijn voor het hosten van de app en opslag voor permanente gegevens.

Kopieer en plak de volgende prompt:

I want to change the storage persistence. What are my no-cost or low-cost storage options for this app in Azure?

De agent gebruikt Azure Vaardigheden om de architectuur, de behoeften voor gegevensopslag en API-patronen van uw app te analyseren om een geschikte Azure-service aan te bevelen voor het hosten van uw to-do gegevens. De agent beschouwt factoren als kosten, schaalbaarheid, integratiegemak en geschiktheid voor de workload van de app. De agent legt vervolgens de aanbeveling uit zoals in het volgende voorbeeld:

For this to-do app, these are the best no-cost or low-cost Azure persistence options, ordered from cheapest/simple to stronger capability.

1. Azure Cosmos DB for NoSQL with free tier
- Cost profile: can be zero if you stay within free-tier limits.
- Best for: JSON to-do items, easy API fit, good scaling path.
- Pros: schema-flexible, globally available, SDK support, free tier available.
- Cons: RU-based model can become costly if queries are inefficient.
- Good default choice if you want cloud-native persistence with minimal redesign.

2. Azure Table Storage
- Cost profile: typically very low (often cents to a few dollars at small scale).
- Best for: simple key-based to-do storage.
- Pros: cheapest at low volume, straightforward, durable.
- Cons: limited query features versus Cosmos DB/SQL.
- Great choice if your app only needs basic CRUD by id/user partition.
...

Implementeren in Azure

Nadat u de app lokaal hebt getest en hebt bevestigd dat deze werkt zoals verwacht, implementeert u deze in Azure zodat u kunt zien dat de app wordt uitgevoerd in de cloud.

  1. Aangezien u azd gebruikt om te implementeren, meldt u zich aan bij Azure in de terminal als u dat nog niet hebt. Uitvoeren:

    azd auth login

  2. Implementeer de toepassing in Azure.

    azd up

    Kies een unieke omgevingsnaam voor de implementatie wanneer hierom wordt gevraagd. Deze naam wordt gebruikt om een resourcegroep te maken in Azure en moet wereldwijd uniek zijn.

    Selecteer het Azure abonnement waarnaar u wilt implementeren wanneer u hierom wordt gevraagd.

Met de opdracht azd up worden de Azure-resources ingericht die in de map infra/ zijn gedefinieerd, wordt de toepassing gebouwd en in Azure geïmplementeerd. De terminaluitvoer bevat de URL van uw geïmplementeerde app.

Troubleshooting

Als de implementatie mislukt of als de livesite de gemaakte productiebestanden niet ondersteunt, gebruikt u de volgende prompt om de agent automatisch te laten diagnosticeren en de implementatie te herstellen.

Deploy the app using `azd up`. If deployment is misconfigured, diagnose and fix automatically until the live site serves built production files, not source or default pages.
Final verification must confirm HTML references production assets and that the main JS/CSS asset URLs return HTTP 200.
Update the README. Return a concise summary and the app website URL.

Tijdens de ontwikkeling kunt u GitHub Copilot gebruiken om u te helpen bij het opsporen van problemen. Als er een fout optreedt, kopieert en plakt u de foutuitvoer in het chatvenster en vraagt u de agent om het probleem te begrijpen en op te lossen.

Verken uw geïmplementeerde resources

Gebruik de geïmplementeerde app-URL vanuit de terminaluitvoer of GitHub Copilot chat om deze in een browser te openen. Ga naar uw app en test of deze werkt zoals verwacht in de cloud. Taken toevoegen, in- en uitschakelen om te bevestigen dat alles werkt.

Schermopname van geïmplementeerde To-Do-web-app op Azure Static Web Apps met twee voltooide taken en één resterende.

U kunt uw Azure resources rechtstreeks in VS Code verkennen.

  1. Open de weergave Azure door het pictogram Azure te selecteren in de activiteitenbalk.
  2. Selecteer op het knooppunt Resources het pictogram Groeperen op en kies Groeperen op resourcegroep om resources te ordenen op resourcegroepen.
  3. Vouw Resources uit en zoek de resourcegroep voor de implementatie die is gemaakt door azd up.
  4. Vouw de resourcegroep uit om de geïmplementeerde services weer te geven, zoals de App Service die als host fungeert voor uw web-app en alle andere resources die zijn gemaakt door azd up.
  5. Klik met de rechtermuisknop op de web-app en selecteer Browse Website om uw geïmplementeerde to-do-app te openen, of selecteer View in Portal om de resource in Azure Portal en de implementatie-URL te bekijken.

De hulpbronnen opschonen

Wanneer u klaar bent met verkennen, verwijdert u de Azure-resources om kosten te voorkomen:

azd down

Met deze opdracht worden alle Azure resources verwijderd die tijdens de implementatie zijn gemaakt, inclusief de resourcegroep.

Volgende stappen 

U hebt GitHub Copilot planmodus en agentmodus gebruikt om een React to-do-app te plannen, te bouwen en te implementeren in Azure zonder dat u handmatig code hoeft te schrijven. Bouw verder op wat u hebt geleerd:

  • Last updated on