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

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

Extracted Slides

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

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

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

slide-004.jpg

OCR text:

Parts of MCP

a

aane ie K Engineering the future of Al

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 - é

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 .

slide-007.jpg

OCR text:

Who’s building MCP Apps?

Shopify Exaclidraw Figma

——

S| l | |

= b AlEngineer

ial . sel ce) aa

a ae

slide-008.jpg

OCR text:

Building MCP Apps in

mm | VS Code (demo)

_

~ 7 7 Engineering the future of Al

»

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

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

slide-011.jpg

OCR text:

9Aor424

Amain

Pofie 556s > 203 s

AIE

Engineering the future of Al

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.