---
title: Generating Web Apps using AI with VS Code
url: https://calvin.my/posts/generating-web-apps-with-ai-using-vs-code
published: 2025-04-07
updated: 2026-09-17
category: AI
tags:
- VS Code
- Web
- vibe coding
summary: The post explains how to generate a web app in VS Code using Copilot’s agent mode. After enabling the feature, users create a project folder, open the chat interface, switch to agent mode, and describe the desired application. Copilot creates files and may request permission for commands. Once the process is complete, users keep the generated files and open the app’s HTML page in a browser to test it.
---

# Generating Web Apps using AI with VS Code

## Pre-requisites

1. [VS Code](https://code.visualstudio.com/download) is installed.

* * *

## In VS Code

1. Enable the co-pilot agent mode in settings.

   ![](https://camy-pub.s3.ap-southeast-1.amazonaws.com/b244d8b7-562c-4217-adef-567384af5068.png)

2. Open a new folder for your app.

3. Use `CMD + CTRL + I` to launch the chat window.

4. Change the chat from Ask to Agent.

   ![](https://camy-pub.s3.ap-southeast-1.amazonaws.com/931aba7c-78db-4789-aa9d-32c06de7df54.png)

5. Provide a context/prompt to the copilot chat. For example, we want to build a 3D scene using three.js:

   ```markup
   Use three.js to create a 3D scene below.

   1) A carpark with 10 spaces.
   2) Simulate car coming into the carpark and stop the car at a random free space.
   3) Simulate car exiting the carpark after random time between 5 to 10 seconds.
   ```

6. Click send and follow the instructions on the screen. Usually, it asks for permission to execute a shell command or create necessary files.

7. Wait for the process to complete and click "Keep" to store the files.

   ![](https://camy-pub.s3.ap-southeast-1.amazonaws.com/de8f2d8f-1896-49e0-a900-6a441a8d2d8a.png)

* * *

## Test our App

1. Open the html file in your browser and there you go.

   <iframe title="YouTube video player" src="https://www.youtube.com/embed/xDWnET_zyEE?si=BgvmOCECmR3VPH65" width="560" height="315" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen="allowfullscreen" referrerpolicy="strict-origin-when-cross-origin"></iframe>