Slides: Real World Development with GitHub Copilot and VS Code — Harald Kirschner, Christopher Harrison
Source Video
Real World Development with GitHub Copilot and VS Code — Harald Kirschner, Christopher Harrison
Relationship To World's Fair 2026
These slides are extracted from a public AI Engineer YouTube video connected to World's Fair 2026. Speaker-matched clips are supporting context unless later confirmed as exact session recordings; official livestream recordings are day-level/event-level source material.
Related Scheduled Sessions
- No individual scheduled session mapping has been assigned yet; treat this as an event livestream deck.
Extracted Slides
OCR text:
INNOVATIONPARTNER
aws
PLATINUMSPONSORS
Graphite
WWindsurf
MongoDB
daily
augment code
Workos
OCR text:
AndrejKarpathy @karpathy
AIE There'sa newkindof codingIcallvibe coding，whereyoufullygivein to gettingtoogood.Alsoljust talkto ComposerwithSuperWhispersol find it.IAcceptAllalways,Idontread the diffs anymore.Whenlget thevibes,embrace exponentials,and forgetthat the code even exists. It'spossiblebecause theLLMs(e.g.CursorComposerwSonnet)are barelyeven touchthekeyboard.Iaskforthedumbestthingslike decrease thepaddingonthe sidebarbyhalfbecauseI'mtoolazy to
And forgetthat the code even exists Fully give in to the vibes, Embrace exponentials,
aws
Worid'sFair
OCR text:
The Vibe-Coding Journey
AIE
“FUN CHAOS”
“PROFESSIONAL ZEN”
OCR text:
The Vibe-Coding Journey
re ae
YOLO Vibes SIA CUle dv c re!
creativity & speed Vib =X
folelolala me MATES COLAeley tS 2
“FUN CHAOS” “PROFESSIONAL ZEN”
Y Speed + Maintainabiliy
Y Instant gratification + Readability
st learning + Quality control
7
s |
- a
» pam a Microsoft ary?
OCR text:
YOLO 1. Outcome-first focus, ignore the code
Vibe Coding 2. Iterate with natural language
3. Auto-accept changes, undo if needed
Best for:
- Rapid prototyping and proof-of-concepts
- Learning unfamiliar technologies or frameworks
- - Personal projects with no maintenance concerns
es
a _ ; Pay
R | a Microsoft § SCC
td
iq
OCR text:
AIE
YOLO
VIBE
CODING
Microsoft
smol ai
World's Fair
OCR text:
AIE
ShowAliCommands
OpenFlle orFolderxo
Open Recent.
New Untited Text File XN
Open Chat
90400G00000
Microsoft
smol?
Worid'sFair
OCR text:
DPLORER CHAT
NO FOLDEROPENED
OpenFolder
AIE You can clone arepository locally. Clone Repository EditwithCopilot Agent Mode
You can openaremote repository or pullrequest without cloning. Open Remote Repository AskCopiot to edityourfles nagentmdeCopllot wil automatically usemultiple requests to pickfles to edit run terminal commands,andierate oneors.
Tolearnmoreabout how to use Git and source controlin Vs Coderead our docs. Review output carefully before use.
ShowAll Commands ortype toattach context
Create Swift Project OpenFle or Folder 0
Open Recent
New Untitled Texi Fle xN
Open Chat AddContet
Edlt flesinyour
WordsFar 08G0660000 Microsoft smol?
OCR text:
AIE
CHAT
Chat with Copilot
Agent Mode
Select tools that are available to chat
62 Selected
OK
vscodeAPI Use VS Code API references to answer questions about VS Code extension devel...
problems Check errors for a particular file
changes Get diffs of changed files
testFailure Includes information about the last unit test failure
terminalSelection The active terminal's selection
terminalLastCommand The active terminal's last run command
new Scaffold a new workspace in VS Code
newJupyterNotebook Create a new Jupyter Notebook
openSimpleBrowser Preview a locally hosted website in the Simple Browser
runCell Trigger the execution of a cell in a notebook file
readCellOutput Read the output of a previously executed cell
Add Context...
Edit files in your workspace in agent mode
OCR text:
O Search
G
CHAT
AIE EditwithCopilot Agent Mode
AskCopillot to edit yourfilesin agent mode.Copilot wll automatically use multiple requests topickfiles toedit, run terminal commands,and iterate on errors.
Copilot is powered by Al,somistakes are possible. Reviqwoutput carefullybefore use.
Show All.Commands or type#to attach context
Open File or Folder
Open Recent R
New Untitled Text Flle OpenChatx X N Edit files inyour workspace inagentmode Add Context Agent Claude Sonnet 4
Worid'sFair 800500000N Microsoft smol?
OCR text:
Pvibing-at-alo
EXPLORER
VIBING-AT-AIE
AIE
ShowAllCommands
Go to Flie
P
Open Chat
Start Debugging F5
aws
Worid'sFair
OCR text:
vibing-at-aio
G
EXPLORER CHAT +
AIE VIBING-AT-AIE 5.Implement Apple-inspired design with clean,large touch 7.Build andrun the application 6.Setupproject structure and configurationfiles targets
√Geting setup information
Now Illscaffold the React/TypeScript Viteproject:
Run command in terminal
npx create-viteglatest -teaplate react-ts
Show All Commands Creating a React TypeScript Vite project in the current directory
Go to File Continue Cancel
Open Chat 3
Start Debugging F5 ToggleTerminal Editfiles inyour workspace inagentmode Agent Add Context.. Claude Sonnet4
World'sFair.00￥00-+80M000.0000000000900006 Microsoft smol?
OCR text:
vibing-at-aie 日日口
Settings G
AIE User approve Chat)Tools:Auto ApproveExperimental Controls whether tool use should be automatically approved. Workspace 1Seting Found Last synced:O secs ago Let me start by getting the Vite project template: CHAT 5.lmplementApple-inspired design with clean,large touch 7.Build andrun the application 6.Set up project structure and configuration files targets +③
√Getting setup information
Now Illscaffold the React/TypeScript Vite project:
Run command in terminal
npx create-viteglatest
Creating a React TypeScript Vite projectin the current directory
Continue Cancel
Add Context..
Editfilesinyour workspace inagentmode
Agent Claude Sonnet 4
Worid'sFair 0800600000 Microsoft smol?
OCR text:
am a a tt)
- o H
etter Td
Ct at Boe}
Otero aw eee Bo es
Sel up orte tet ture - i
Mak Loraes or Saye eco 0
‘ FUE itor tT gue atey)
ct / 7 :
A Accept Suggestion On Comm.t Charactor woe . aa ;
o » Enabdled
Continue fom ale)
Sear TRY Ry
Pg ao
my ie) ScCSeCcI000e#800 FCO + CR eff 49D 7° ae
Ld a
Wat ft =
easels) SimOol
OCR text:
vibing-at-aio
G
EXPLORER CHAT
AIE eslint.configjs VIBING-AT-AIE ()package.json README.md vite.config.ts >public >src index.html -gitignore tsconfig.json (1tsconfig.app.json (1tsconfig.node.json ）echo2"|npx create-vite@ latest npty.Please choose how to pr oceed: -/vibing-at-aie 11s continue Current directory is note oRemove existing files an Cancel operation OIgnore files and continu colot十① Ineed tocontinue with the existing directory.Letme proceed: Let me try a different approach-Ill input the choice directly: Selecting option3 to ignore files and continue Run command in terminal Add Context.... Continue printf“3\n|npx create-viteglatest -tenplate react-ts npx create-viteglatest echo2|npx create-viteglatest react-ts Cancel -template react-ts -tenplate
Editfilesinyour workspace in agentmode
-/vibing-at-aie Agent Claude Sonnet 4
000080000.00000900000900806
aws
World'sFair
OCR text:
vibing-at-aie
Settings 白
approve 5Settings Found CHAT
User Workspace Last synced:6secs ago keepgoing,itworked
AIE Chat>Tools:AutoApproveExperimental chat.tools.autoApprove Controlswhether tool use shouldbe automaticallyapproved. Great Nowletme installthe Material-Ul dependencies andother GitHub Copilot
PROBLEMS Editor:AcceptSuggestion On Commit Character Controls whether suggestions should be accepted on commit characters.For example,in JavaScript, the semi-colon（）can bea commit character that accepts a suggestion and DEBUG CONSOLE TERMINAL PORTS copllot十 Run command in terminal npa install gaui/eaterial genotion/react gemotion/ styled g=ui/icons-naterial@nui/x-date-pickers dayjs
/vibing-at-aie 11s echo"2"|npx create-vite@latest --template react-ts
oRenove existing files and continue oIgnore files and continue Current directory is not enpty.Please choose how to proceed: Cancel operation Editfilesinyour workspace in agentmode Add Context... Continue Cancel
Agent Clude Sonnet 4
A00￥00080M000.000000000090080
aws
WortdsFair
OCR text:
April2025(version1.100)
ing,itworked
Edit with Copllot
AIE
eL500.k:Theiodefr 5dh
As Coo lsedt yuSe
andother
1Apr 2025 ShudeCod
hop youa df cay iiphncd
n pa pepa ucrg
eta
LM.M
NCBLISS
OSTPUT
DSCONOLL
cmotion/
kers
libraries
nle SatTT8msTa
oIgnore files and continue
OUTLAE
Microsoft
smol?
World's Fair
OCR text:
areact/vite withmaterial des
on tracking.simple and big accessible ui foilowing
gn principies
AIE
Edit with Copilot
ibCopilot
AgentMode
1create a React/Vite website for water hydration tracking
a CtloedtyoaSi
inten
ele mn
Let me start by creating the workspace structure.
redly
Create New Workspace*
Continue with #new workspace setup
ib Copilot
antext..
nyour workspacein agentmode
Claude Sonnet 4
aws
World'sFair
OCR text:
8日口口@
epuup areact/vitewithmaterialdes
AIE bCopilot impleand bog acc
createa React/Vite website for water hydration tracking
Let me start by creating the workspace structure.
Create New Workspace*
Continue with #new workspace setup
bCopilot
text.
your workspace inagent mode
Claude Sonnet4
aws
World'sFair
OCR text:
CHAT
-Waterintake tracking functionaity
5.Setup the development envronment and tasks
Letme beginc
AIE
npx create-viteglatest
-tenplate
react-ts
Greati Now letme install the depe
UI React components:
npinstall
PROBLEMS
DEBUG CONSOLE
TERMINAL
PORTS
OUTPUT
Coplot
necessary dependencies:
-/vibing-at-aie-2
npninstall gfluentui/react-components@fluentui/react-icons lucide-react
npainstall gfluentus/react-coaponents
npm crror
npaerror
Fora full report see:
Woring-
npa
npm
error
/Users/digitarald/.npm/_1ogs/2025-06-03T20_37_34_059Z-eresolve-report.txt
npa
erroxAcomplete 1ogofthisrun can be found in:/Users/digitarald/.npn/_logs/2025-06-03T20_37
Add Context.
34_059Z-debug-0.1og
Edtflesinyour
I
Microsoft
smol?
Worid'sFair
OCR text:
日口口
Settings copilot-instruetior
approve 5SettngsFound oxddudu CHAT
AIE User Workspace TextEdior（1) Extensions(1) Features(3) (1） （）suosebons Chat(3) Editor:Accept Suggestion On Commit Character Controls whether suggestions shouldbeacceptedoncommtcharacte.For Chat>Edits2:Enabled Controls whether tool example,inJavaScript,the semi-colon（）can bea commit character that acceptsasuggestion and types thatcharacter. models that don't support tool-caling are unavailable for Edits mode. chat.tools.autoApprove-Modified Last synced:Q secs ago Now let me installFluent Ul React components and other necessary dependencies: Isee theres a dependency confict with React types. Let me instal the Fluent UI esddso Great Now letme nstll the dependencies and add Fluent Ul React components: TTeasuT adu 1ucide-react--egacy-peer-deps npa1nstall gfluentui/react-coponents gfluentui/react-icons npx create-viteglatest np install gfluentui/react-conponents@fluentui/react-icons lucide-react
PROBLEMS DEBUG CONSOLE TERMINAL PORTS OUTPUT PerfectlNow let me create thegithub/copilot-instructions.nd fle
npninstallgfluentui/react-components @fluentui/react-iconslucide-react y-peer-deps 48packagesare looking for funding found 8vulnerabilities ~/vibing-at-aie-2 runnp fundfor details -legac Edt flesin yo 1a changed Add Contet Ecopilot-instructions.md lot-inatructions.md D
4s
9088G0660000 0
Worid's Fair Microsoft smol"
OCR text:
Settings
App.tx
.md口
approve
5SettngsFound
CHAT
User Workspace
Last symced:Osecs ago
Isee there's a dependency conflict withReact types.Letme instal the Fluent U
components withthe legacy peer depsflag:
TextEdior(1)
Suggestions(1)
Chat)Tools:Auto ApproveExperimental
Controls whether tool use should be automatical
npa install gfluentui/react-coeponentsgfluentut/xeact-icons
Foatures(3)
lucide-react--legacy-peer-deps
AIE
Chat(3)
Extensions(1)
Perfectl Now letme create thegithub/copilot-instructions.nd fle:
Editor:Accept Suggestion On Commit Character
(）d
Conrols whether suggestions shouldbeacceptedoncommtcharactes.For
Createdcopilot-lnstructions.md
example,inJavaScript,the semi-colon（）canbea commit character that
acceptsasuggestion and types that character.
Chat)Edits2:Enabled
App.tx+t90-25
d
models that don't support tool-calling are unavailable for Edits mode.
PROBLEMS
DEBUG CONSOLE
TERMINAL
PORTS
OUTPUT
App.
~/vibing-at-aie-2
Now let
npninstall gfluentui/react-components @fluentui/react-iconslucide-react
-legac
sdap-raad-
2rles changed
Fcopilot-instructions.mdpthub
48packages are looking for funding
App.tsxsrc
runnpm fund' for details
8Asd Cotet.
foundevulnerabilities
Edit fles in ypur workspa
4s
net4
aws
OCR text:
AIE
#root {
max-width: 1280px;
}
/ Apple-inspired design with Fluent UI /
.app-container {
min-height: 100vh;
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
}
.app-header {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(20px);
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
Perfect! Now let me create the.github/copilot-instructions.md file:
Created copilot-instructions.md
Now let me create the main hydration tracking application. I'll start by updating the main App component:
Let me fix the TypeScript error by properly typing the entry:
Now let me create the CSS file for the app with Apple-inspired design principles:
Now let me also update the global CSS to ensure proper baseline styling:
48 packages are looking for funding
run
npm fundfor detailsfound 0 vulnerabilities
aws
World's Fair
OCR text:
App.ss App.x Fcoplot-instructions.md 日口口
This isa React/Vite water hydration tracking application with the CHAT 3
following requirements: App.tsx
AIE ##Design Principles interface Focus on simplicity and user-friendly design Follow Apple design principles:clean,minimal,intuitive Use Fluent Design components for consistent UI Ensure high contrast and readable text Implement big,accessible UI elenents for easy interaction Nowletme create the CSSfle forthe app with App A0.c.215-31 App.tx
PROBLEMS ##Technical Stack Vite for build tooling React 18 with TypeScript TERMINAL PORTS OUTPUT KpUndo1of12个 o十 Now rllreplece the entire filecontent: Read·inexcisnes3169 Readinekcss，ines1to30 Woring.
opninstallgfluentui/react-components @fluentui/react-icons lucide-react sdap-raad-s 48packages are looking for funding found @vulnerabilities -/vibing-at-aie-2 runnpm fundfor details --legac Edit flesin your workspace in agent mode App.c5s 3fles charged Ecopllot-lnstructons.mdthb Asd Contet. App.tsxrc
4s Caude Sonnet.4
Wortd'sFair #8G0500000 Microsoft smol? Ln1,Col1 Spaces:4 (）nstructions
Slide-Derived Subjects To Review
Subject extraction uses video title, related session titles/descriptions, transcript context, and OCR text when available. OCR is best-effort and should be reviewed against the embedded slide images.