Build a Website Using Copilot Agents
A complete step-by-step guide to creating entire websites using GitHub Copilot Agents inside VS Code. No manual coding required—let AI handle the development workflow.
Why This Method Is Powerful
Instead of writing every file manually, you design the system, configure AI agents, and let Copilot execute the development workflow. This approach mirrors how AI agents are utilised in real development pipelines for automation, testing, CI/CD workflows, and code generation.
Each agent acts like a specialised developer in a small team, handling specific tasks according to predefined instructions. This multi-agent system ensures organised, step-by-step code generation rather than random outputs.
Design the System
Create a clear architecture and agent workflow using ChatGPT
Configure Agents
Set up specialised AI agents in VS Code for each development task
Execute Workflow
Let Copilot build your entire website automatically
Step 1: Generate the Agent Plan Using ChatGPT
Open ChatGPT and paste the complete prompt below. You only need to replace the project idea section with your specific website concept.
I want to build a web application using GitHub Copilot Agents inside VS Code.

Your job is to help me design the full agent system and workflow so Copilot can build the project automatically.

Follow the structure below exactly.

Make everything clear and beginner friendly.

1. Project Idea

PROJECT IDEA HERE
(Insert your project idea here. Explain what the website should do and who it is for.)

First summarize the project in 3 simple sentences.

2. Web Application Plan

Create a simple plan for the website.

Include:
- Core features
- User flow
- Main pages or views
- UI components needed

3. Folder Structure

Generate a clean folder structure for a web application built with:
- HTML
- CSS
- JavaScript

The project should follow a Single Page Application structure.

Explain the purpose of each folder.

4. Multi-Agent System

Explain what a multi-agent system is in simple words.

Explain that instead of one AI doing everything, multiple agents handle different tasks such as:
- UI
- Logic
- Data
- Rendering

Explain why this helps automation and development workflows.

5. List of Agents

Create a list of agents required for this project.

For each agent include:
- Agent name
- Purpose
- Files it manages
- Input it receives
- Output it produces

6. Agent Instructions

Now generate instructions for each agent.

These instructions will be pasted directly into VS Code agent configuration.

Each instruction should include:
- Role
- Responsibilities
- Files the agent can create or modify
- Rules the agent must follow
- How it interacts with other agents

All agents must follow the REACT framework:
- Reason
- Execute
- Act
- Check
- Think

This ensures agents work step-by-step instead of randomly generating code.

7. Agent Workflow

Create a simple workflow showing how the agents interact.

Example:
User Interaction
↓
UI Agent
↓
Logic Agent
↓
Data Agent
↓
Render Agent
↓
Updated UI
Understanding Multi-Agent Systems
Instead of one AI doing everything, multiple agents handle different tasks such as UI, logic, data, and rendering. This approach helps automation and development workflows by breaking complex tasks into manageable, specialised components.
Each agent follows the REACT framework—Reason, Execute, Act, Check, Think—which ensures agents work step-by-step rather than randomly generating code. This structured approach mirrors professional development team workflows.
UI Agent
Manages HTML and CSS files for interface design
Logic Agent
Handles JavaScript functionality and user interactions
Data Agent
Manages data structures and content rendering
Render Agent
Combines components and updates the final interface
Step 2: Open VS Code
Now open VS Code on your computer. Create a new empty folder specifically for your project. This keeps all generated files organised in one location. Choose a descriptive name that reflects your website's purpose.
Create Project Folder
Make a new folder like my-ai-website or galaxy-site
Open in VS Code
Launch VS Code and select your newly created folder
Verify Empty
Ensure the folder is completely empty before proceeding
Having a clean, empty folder ensures Copilot starts with a fresh workspace and creates all necessary files according to your agent configuration.
Step 3: Install Required Extensions
In VS Code, open the Extensions panel by clicking the Extensions icon in the sidebar or pressing Ctrl+Shift+X. You'll need to install two essential extensions that enable the agent functionality.
1
GitHub Copilot
Provides AI-powered code suggestions and completions as you type. This is the core AI assistant that powers the entire agent system.
2
GitHub Copilot Chat
Enables chat-based interactions and the Plan mode for executing multi-step development workflows. This extension provides the agent configuration interface.
After installing both extensions, sign in to your GitHub account if prompted. Make sure both extensions appear in your installed extensions list before proceeding to the next step.
Step 4: Configure Agents
Open the Copilot Chat panel in VS Code by clicking the Copilot icon in the sidebar. Look for the Configure Agents button at the top of the panel and click it to begin setting up your agent system.
For each agent listed in your ChatGPT output, click Create Agent, enter the agent name (e.g., "UI Agent"), copy the complete agent instructions from ChatGPT, paste them into the configuration field, and save the agent.
Repeat this process for all agents generated by ChatGPT. Common agents include UI Agent, Logic Agent, Data Agent, Render Agent, and Form Agent. Once done, you'll have multiple specialised agents ready to work together.
1
Open Copilot Chat
Launch the chat panel in VS Code
2
Configure Agents
Click the configuration button to begin setup
3
Create Each Agent
Set up agents one by one using ChatGPT instructions
4
Verify Configuration
Check that all agents appear in your list
Steps 5-7: Run Plan Mode and Review
Now open Copilot Chat again and at the top, switch the mode from Chat to Plan. This crucial mode allows Copilot to plan and execute a complete development workflow rather than responding to individual queries.
1
Switch to Plan Mode
Change the mode selector from Chat to Plan at the top of Copilot Chat
2
Trigger the Build
Type a simple instruction like "Build this web application using the configured agents and follow the generated project architecture" and press Enter
3
Review the Plan
Copilot will generate a development plan with tasks and action sequences. Read through the plan carefully to ensure it matches your expectations
4
Approve the Plan
Once you've reviewed and confirmed the plan is correct, approve it to begin execution
Steps 8-9: Execute and Run Your Website
Let Copilot Execute
Once approved, Copilot will begin executing the tasks automatically. Each agent will handle responsibilities according to its configuration, creating folders, generating files, writing code, and connecting components.
This is where the multi-agent system shines—each agent acts like a specialised developer in a small team, working together to build your complete website. The process typically takes several minutes depending on project complexity.
Monitor Progress
Watch as agents create files and folders in real-time
Verify Completion
Check that all expected files have been generated
Launch Server
Open index.html and run with Live Server extension
Test Website
Verify all features and functionality work as expected
Your web application should now be running! The entire development process—from empty folder to working website—was handled by AI agents following your carefully configured instructions.
Made with