---
title: "Slides: Building Interactive UIs in VS Code with MCP Apps — Marlene Mhangami & Liam Hampton, GitHub"
category: "slides"
video_id: "_xIwFcnHqp4"
sourceLabels: ["Public YouTube video frames", "Public YouTube metadata"]
---

# Slides: Building Interactive UIs in VS Code with MCP Apps — Marlene Mhangami & Liam Hampton, GitHub

## Source Video
[Building Interactive UIs in VS Code with MCP Apps — Marlene Mhangami & Liam Hampton, GitHub](https://www.youtube.com/watch?v=_xIwFcnHqp4)

## 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/_xIwFcnHqp4/slide-001.jpg]]

OCR text:

> ee,
> . Mocplettmea lmparacrivas |. RS 7
> IOa ee iS Rea kotaes eye oe
> ir a ee a a
> ieee ee OlOl ow SUN Ein Alon eae el ele

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

OCR text:

> Open dar ami/ ae
> Agenda
> . O2 MCP Apps
> Session
> ra a * 03 Building MCP Apps in VS Code (demo)
> 7 ia
> bd t bd
> s ; ec:
> al. c
> | r
> . . |S H

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

OCR text:

> Model Context Protocol
> ae MCP is an open protocol that standardizes how
> _ applications provide context to LLMs
> “a : — oO
> ai
> moo i EUROPE
> : | ee

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

OCR text:

> Parts of MCP
> a
> aane ie K Engineering the future of Al

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

OCR text:

> Co ntext Draw a d.ageam explaining MCP
> Reyewed be
> Pa 1c=>.4e Here's a diagram explainng NCP iModel Context Protocol)
> i i Soot
> ace rm
> Ala AL Poel / tla] *1° Sends requests wio 4CP* BINMCR Client”)
> * * B -- 29 MCP Protocoint JSON RPL over StG1O/HTTPI”: C(“MCP® Server’!
> wy *
> C --» DITN\ Toolset fuactians the sogel can callin}
> C --> EL’ * Resources\aidata the todel can read "}
> € spo Promptsinireusable provet terptatess"}
> D ---ivenecutes? GIExterral API s\oDatadases\1F ile Systew\nwed Search”)
> E -->;"enpases" | G
> F -->)"proviites contest fron”| G
> . a —
> . ill
> S| o
> ro Al Engineer
> oe i EUROPE
> 7! Pt - é

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

OCR text:

> * * i i * Cori ma ™ cat] ee — “e = : a
> * * .
> aan se : e Cf Cy
> : td 7 -- a
> ta
> Data Exploration Configuration Wizards E-Commerce
> ; 7 , Interactive dashboard with region Form with dependent fields, select.ng Browse, filter, compare, and add to cart
> in — SE atemee filters, drill-down capabiities, export “production” reveals security opt.ans; PH itet sce ( east Lome 1CTe i oh a fad
> options “staging” shows different defaults inventory from the MCP Server.
> a Googl Mi
> -_ 7 :
> = oogie DeepMind
> ae
> . . a .

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

OCR text:

> Who’s building MCP Apps?
> Shopify Exaclidraw Figma
> ——
> S| l | |
> = b AlEngineer
> ial . sel ce) aa
> a ae

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

OCR text:

> Building MCP Apps in
> mm | VS Code (demo)
> _
> ~ 7 7 Engineering the future of Al
> > »

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

OCR text:

> Pe ee er rod _. Or)
> F me i
> le ibesewiabiinw a
> enc FC Lele Nels)
> 7 ee
> eusatncritaseanzs cmeecencomart
> .
> miter e Ra tetas
> : : Le ea ie eee eee
> a i is A ih ee i een a eerie ry
> * bal eat ee ee ee ee dee Rie ee
> im x Smt a teen peuaaneraenwen
> * * : ee ee ee ee a eer Rare
> aa s
> ote Si) ane RLY
> ee eh et a
> Kidiresit one coor
> sag er
> eae a a on
> ee ee
> oe Cereals
> nee
> . | er ees
> at 7 | ; _ ;
> i
> . Al Engineer
> a rd } EUROPE
> 4

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

OCR text:

> tclertar et）（
> LAS
> .rjl.
> fechyCptatll（
> /.Catoitatxt
> AIE
> arytsx
> coalotisnt
> fr1100*（
> MApo.to
> 12s
> .Sif（1））.Cf（1）
> idhs
> ncfibenaccl（e Sat） Jet（
> T1012
> fsoi(
> returns
> aci（s-1)fanacct（2)
> eryateri3(
> ste js[yt,10
> Engineering the future of Al

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

OCR text:

> 9Aor424
> Amain
> Pofie 556s > 203 s
> AIE
> Engineering the future of Al

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

OCR text:

> i ro a Cee ee
> ' coed
> ; °
> Y
> Ope tena 7 Shan SE La
> . Yrde- od be ,
> vas 7 : ee ee ee
> 5d ad ee at . :
> - toe teen TO GND
> +
> x Pd ees ;
> on and dats Seay bee ee gee
> “yy fat ae ee ee
> _—
> — are eG
> ‘yr
> OT RT Path eee’
> ve 7 web be ode
> inane Va tte Cie care nt
> Sw a ee
> . Aye ee egant
> ae rtadss oo
> i wee ee ey canoes
> 4 | -_ an —
> es ’ Pa 5 : | /
> 6s \ 1
> _— b #3 Braintrust €} WorkOS OpenAl
> ~ 41. *
> - a


## 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.