microsoft/LAB500-Terminal-to-Party-Live-Coding-with-Copilot-CLI-and-Hydra

microsoft/LAB500-Terminal-to-Party-Live-Coding-with-Copilot-CLI-and-Hydra

License: MIT

Stars: 0

Forks: 1

Open issues: 1

Created: 2026-06-23T21:41:57Z

Pushed: 2026-06-25T17:32:39Z

Default branch: main

Fork: no

Archived: no

README: --- lab: title: TechLab: TechLab: Terminal to Party: Live-Coding with Copilot CLI and Hydra description: level: 200 duration: 120 minutes islab: true primarytopics: ---

LAB500: Terminal to Party - Live-Coding with GitHub Copilot CLI and Hydra

Welcome to the GitHub Copilot Dance Party! Over the next \~75 minutes you'll turn a blank app into a browser-based AV playground - part code editor, part synth rig, part dance floor - with GitHub Copilot CLI riding shotgun the entire set.

> [!WARNING] > Photosensitive seizure warning > > The visuals you build with Hydra can include rapidly flashing lights, high-contrast patterns, and strobe-like effects. A small percentage of people may experience seizures when exposed to such images - even people with no prior history of epilepsy. If you experience dizziness, altered vision, eye or muscle twitching, disorientation, or convulsions while building or watching demos, stop immediately and consult a medical professional. If you or anyone in your family has a history of seizures or epilepsy, talk to a doctor before participating. > > To help with this, make sure your app has an easy-to-hit stop button. You can add that as a requirement when talking with Copilot!

🚦 Before you begin

You'll be working from a provided lab environment: a codespace with everything you need, running from the local machine you're using rather than the lab environment. GitHub Copilot CLI is already installed, and you've been provided a starter project you can use to help you quickly create your masterpiece.

> [!NOTE] > This is intentionally not a step-by-step exercise sheet. You are the architect and the DJ. Copilot CLI is your technical co-producer. Discover, prompt, remix, iterate, and ship something loud enough to demo.

Lab sections

The content of this lab is designed to help set you up for success. It walks through the starter environment you have access to, talks through best practices when working with GitHub Copilot (and really any AI tool), and defines the requirements of the cool tool you're building. These include:

0. Backstage \- soundcheck the rig: log into the codespace\, sign into GitHub\, and get to a Copilot CLI prompt inside your project.

1. Hello, world \- explore the starter app you'll be building from and confirm everything's wired up. 2. The vibe \- what you're building, the experience you're aiming for, and the libraries you'll wire together. 3. The set list \- the Copilot CLI moves that keep your loop tight: model picks\, parallel agents\, MCP servers\, tips\, resources\, and stretch ideas\. Skim it for shape; you'll put it to work next\. 4. Take the stage \- concrete first prompts to run with Copilot CLI: plan\, research\, set up project context\, and build\. This is where the actual building happens\. 5. Take it on the road \- stretch ideas, in\-room awards, retro questions, and curated resources to keep the energy going after the lab wraps\.

Let's get started!

Select NEXT down below to move onto the next page!

===

0. Backstage

Before we can take the stage we need to show our all access pass. We need to authenticate! Let's tackle that first!!

> [!IMPORTANT] > We aren't going to be using the VM provided in the lab environment, but rather using the browser on the local system. The steps here will walk you through obtaining the credentials from the lab and authenticating locally.

Authenticate

Unlike most other labs at Build, you'll be working in a cloud codespace rather than a provided VM. You'll still be using the lab credentials, which we'll walk through right now.

1. In the new tab, navigate to https://github.com/enterprises/skillable-events/sso. 2. When prompted to Single sign-on to Skillable Events, select Continue. 3. From the Resources tab in the lab interface, copy the username and paste it back into the username field on the login screen.

!IMAGE[Screenshot of the resources tab with arrow pointing at keyboard for username](../../media/username.png)

> [!IMPORTANT] > You will use the credentials provided on the Resources tab, rather than the ones on the screenshots. The screenshots are there just to help you see what the interface looks like.

4. Select Next. 5. From the Resources tab in the lab interface, copy the TAP (temporary access code) and paste it into the TAP dialog field on the login screen.

!IMAGE[Screenshot of the resources tab with arrow pointing at the keyboard for tap](../../media/tap.png)

6. Select Sign in. 7. Select Yes to stay logged in.

Summary

You've authenticated!! Next step - setup the development environment. Select Next to move forward to creating the starter environment!

===

00 Your developer rig

Now that you have access to the stage, you need to soundcheck the rig. Or, more specifically, to spin up the codespace you'll use for the workshop!

> [!NOTE] > You will be using Codespaces the browser in the lab PC rather than the VM in the browser. This will ensure we have the best possible throughput. For authentication you'll use the credentials from the lab, which these next steps will walk you through. Please feel free to begin working through these steps as you're getting situated.

Codespaces

GitHub Codespaces is a fully-configurable cloud-based container where you can develop. It even comes with a browser-based version of Visual Studio Code, allowing you to write code without installing anything locally. Additionally, any services you start on your codespace, like a web server, become available via tunneling. It feels a lot like working on your own local system, but everything's being done in the cloud!

Create your starter environment

Now that you're logged into GitHub, it's time to set up your project! We've provided a starter with a core set of assets. You'll explore it more in the next step (with the help of Copilot!), so for now our focus will be on creating the copy you'll use.

1. Open a new browser tab by selecting Ctrl+T. 2. Navigate to https://github.com/GeekTrainer/lab500-starter. 3. Select...