--- schema: 1 type: video title: >- Building Interactive UIs in VS Code with MCP Apps — Marlene Mhangami & Liam Hampton, GitHub description: >- The demo profiles a Go app running bubble sort and Fibonacci and the result renders as an interactive flame graph directly inside the VS Code chat window. Not a link. Not a text summary. A live iframe you can scroll and query, sandboxed for the same reason you put a hamster in a cage: so it cannot chew up your VS Code settings or call external APIs. The mechanism: an MCP tool returns both data and a resource reference pointing to a bundled HTML UI. VS Code fetches the HTML and renders it in a sandboxed iframe in chat. The app calls back to the server, the server returns fresh data, the UI updates. Shopify uses this pattern for checkout flows inside chat. Excalidraw uses it for interactive architecture diagrams you can drag and edit. Marlene and Liam walk through building one from scratch using a skill from the MCP repository. Speaker info: - https://x.com/marlene_zw - https://www.linkedin.com/in/marlenemhangami/ - https://github.com/marlenemhangami - https://x.com/liamchampton - https://www.linkedin.com/in/liam-conroy-hampton/ - https://github.com/liamchampton --- Watch along with the corrected transcript, summary, timestamps and resources on this talk's official AIE page: https://ai.engineer/talks/_xIwFcnHqp4-building-interactive-uis-in-vs-code-with-mcp-apps-marlene-mhangami-liam-hampton-github Join our upcoming AI Engineer conferences (see https://ai.engineer landing page): - AIEi Shanghai, November 5–6 — the first for meeting top Chinese labs and engineers - AIE CODE in SF, November 10–12 — the top AI Coding conference returns - AIEi Sydney, December 7–8 — the first AIEi run alongside NeurIPS 2026 in Sydney --- canonical: 'https://liquidgold.cc/watch/_xIwFcnHqp4' markdown: 'https://liquidgold.cc/watch/_xIwFcnHqp4.md' llms: 'https://liquidgold.cc/watch/_xIwFcnHqp4/llms.txt' parent: 'https://liquidgold.cc/channel/aidotengineer.md' channel: aidotengineer updated: '2026-10-24T09:46:40.867Z' language: null children: [] videoId: _xIwFcnHqp4 durationSeconds: 966 publishedAt: '2026-06-06T18:00:32.000Z' searchChunks: - ordinal: 0 text: null startSeconds: 14 endSeconds: 136 watch: 'https://liquidgold.cc/watch/_xIwFcnHqp4?t=14' heldReason: rights - ordinal: 1 text: null startSeconds: 136 endSeconds: 147 watch: 'https://liquidgold.cc/watch/_xIwFcnHqp4?t=136' heldReason: rights - ordinal: 2 text: null startSeconds: 147 endSeconds: 229 watch: 'https://liquidgold.cc/watch/_xIwFcnHqp4?t=147' heldReason: rights - ordinal: 3 text: null startSeconds: 240 endSeconds: 342 watch: 'https://liquidgold.cc/watch/_xIwFcnHqp4?t=240' heldReason: rights - ordinal: 4 text: null startSeconds: 342 endSeconds: 355 watch: 'https://liquidgold.cc/watch/_xIwFcnHqp4?t=342' heldReason: rights - ordinal: 5 text: null startSeconds: 355 endSeconds: 457 watch: 'https://liquidgold.cc/watch/_xIwFcnHqp4?t=355' heldReason: rights - ordinal: 6 text: null startSeconds: 355 endSeconds: 457 watch: 'https://liquidgold.cc/watch/_xIwFcnHqp4?t=355' heldReason: rights - ordinal: 7 text: null startSeconds: 468 endSeconds: 547 watch: 'https://liquidgold.cc/watch/_xIwFcnHqp4?t=468' heldReason: rights - ordinal: 8 text: null startSeconds: 558 endSeconds: 671 watch: 'https://liquidgold.cc/watch/_xIwFcnHqp4?t=558' heldReason: rights - ordinal: 9 text: null startSeconds: 671 endSeconds: 682 watch: 'https://liquidgold.cc/watch/_xIwFcnHqp4?t=671' heldReason: rights - ordinal: 10 text: null startSeconds: 682 endSeconds: 770 watch: 'https://liquidgold.cc/watch/_xIwFcnHqp4?t=682' heldReason: rights - ordinal: 11 text: null startSeconds: 770 endSeconds: 782 watch: 'https://liquidgold.cc/watch/_xIwFcnHqp4?t=770' heldReason: rights - ordinal: 12 text: null startSeconds: 782 endSeconds: 892 watch: 'https://liquidgold.cc/watch/_xIwFcnHqp4?t=782' heldReason: rights - ordinal: 13 text: null startSeconds: 892 endSeconds: 904 watch: 'https://liquidgold.cc/watch/_xIwFcnHqp4?t=892' heldReason: rights --- # Building Interactive UIs in VS Code with MCP Apps — Marlene Mhangami & Liam Hampton, GitHub The demo profiles a Go app running bubble sort and Fibonacci and the result renders as an interactive flame graph directly inside the VS Code chat window. Not a link. Not a text summary. A live iframe you can scroll and query, sandboxed for the same reason you put a hamster in a cage: so it cannot chew up your VS Code settings or call external APIs. The mechanism: an MCP tool returns both data and a resource reference pointing to a bundled HTML UI. VS Code fetches the HTML and renders it in a sandboxed iframe in chat. The app calls back to the server, the server returns fresh data, the UI updates. Shopify uses this pattern for checkout flows inside chat. Excalidraw uses it for interactive architecture diagrams you can drag and edit. Marlene and Liam walk through building one from scratch using a skill from the MCP repository. Speaker info: - https://x.com/marlene_zw - https://www.linkedin.com/in/marlenemhangami/ - https://github.com/marlenemhangami - https://x.com/liamchampton - https://www.linkedin.com/in/liam-conroy-hampton/ - https://github.com/liamchampton --- Watch along with the corrected transcript, summary, timestamps and resources on this talk's official AIE page: https://ai.engineer/talks/\_xIwFcnHqp4-building-interactive-uis-in-vs-code-with-mcp-apps-marlene-mhangami-liam-hampton-github Join our upcoming AI Engineer conferences (see https://ai.engineer landing page): - AIEi Shanghai, November 5–6 — the first for meeting top Chinese labs and engineers - AIE CODE in SF, November 10–12 — the top AI Coding conference returns - AIEi Sydney, December 7–8 — the first AIEi run alongside NeurIPS 2026 in Sydney --- Canonical: https://liquidgold.cc/watch/_xIwFcnHqp4 · Channel: [AI Engineer](https://liquidgold.cc/channel/aidotengineer.md) > Search chunk text is held until public-source provenance is verified. ## Document chunks > Missing: no stored document chunks are available.