---
title: "Slides: Real World Development with GitHub Copilot and VS Code — Harald Kirschner, Christopher Harrison"
category: "slides"
video_id: "eOxOzcw70f0"
sourceLabels: ["Public YouTube video frames", "Public YouTube metadata"]
---

# 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](https://www.youtube.com/watch?v=eOxOzcw70f0)

## 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
![[assets/slides/eOxOzcw70f0/slide-001.jpg]]

OCR text:

> INNOVATIONPARTNER
> aws
> PLATINUMSPONSORS
> Graphite
> WWindsurf
> MongoDB
> daily
> augment code
> Workos

![[assets/slides/eOxOzcw70f0/slide-002.jpg]]

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

![[assets/slides/eOxOzcw70f0/slide-003.jpg]]

OCR text:

> The Vibe-Coding Journey
> AIE
> “FUN CHAOS”
> “PROFESSIONAL ZEN”

![[assets/slides/eOxOzcw70f0/slide-004.jpg]]

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?

![[assets/slides/eOxOzcw70f0/slide-005.jpg]]

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

![[assets/slides/eOxOzcw70f0/slide-006.jpg]]

OCR text:

> AIE
> YOLO
> VIBE
> CODING
> Microsoft
> smol ai
> World's Fair

![[assets/slides/eOxOzcw70f0/slide-007.jpg]]

OCR text:

> AIE
> ShowAliCommands
> OpenFlle orFolderxo
> Open Recent.
> New Untited Text File XN
> Open Chat
> 90400G00000
> Microsoft
> smol?
> Worid'sFair

![[assets/slides/eOxOzcw70f0/slide-008.jpg]]

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?

![[assets/slides/eOxOzcw70f0/slide-009.jpg]]

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

![[assets/slides/eOxOzcw70f0/slide-010.jpg]]

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?

![[assets/slides/eOxOzcw70f0/slide-011.jpg]]

OCR text:

> Pvibing-at-alo
> EXPLORER
> VIBING-AT-AIE
> AIE
> ShowAllCommands
> Go to Flie
> P
> Open Chat
> Start Debugging F5
> aws
> Worid'sFair

![[assets/slides/eOxOzcw70f0/slide-012.jpg]]

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?

![[assets/slides/eOxOzcw70f0/slide-013.jpg]]

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?

![[assets/slides/eOxOzcw70f0/slide-014.jpg]]

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

![[assets/slides/eOxOzcw70f0/slide-015.jpg]]

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

![[assets/slides/eOxOzcw70f0/slide-016.jpg]]

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

![[assets/slides/eOxOzcw70f0/slide-017.jpg]]

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

![[assets/slides/eOxOzcw70f0/slide-018.jpg]]

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

![[assets/slides/eOxOzcw70f0/slide-019.jpg]]

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

![[assets/slides/eOxOzcw70f0/slide-020.jpg]]

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

![[assets/slides/eOxOzcw70f0/slide-021.jpg]]

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"

![[assets/slides/eOxOzcw70f0/slide-022.jpg]]

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

![[assets/slides/eOxOzcw70f0/slide-023.jpg]]

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 fund` for details
> found 0 vulnerabilities
> aws
> World's Fair

![[assets/slides/eOxOzcw70f0/slide-024.jpg]]

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.