vidtheque.

read-only demo

Videos c-2eEv2ou7Y

Why MCP and ChatGPT Apps Use Double Iframes — Frédéric Barthelet, Alpic

index_state ready data_status ok

AI Engineer· published 2026-06-15· 0:20:11· en-US· indexed 2026-08-11 10:41

Open on YouTube

Scene timeline

  1. Shot 0, 0:00 to 0:05, 1 of 1 keyframes kept
  2. Shot 1, 0:05 to 0:09, 1 of 1 keyframes kept
  3. Shot 2, 0:09 to 0:14, 1 of 1 keyframes kept
  4. Shot 3, 0:14 to 0:25, 1 of 1 keyframes kept
  5. Shot 4, 0:25 to 0:32, 1 of 1 keyframes kept
  6. Shot 5, 0:32 to 1:02, 1 of 1 keyframes kept
  7. Shot 6, 1:02 to 1:32, 1 of 1 keyframes kept
  8. Shot 7, 1:32 to 2:02, 1 of 1 keyframes kept
  9. Shot 8, 2:02 to 2:39, 1 of 1 keyframes kept
  10. Shot 9, 2:39 to 3:15, 1 of 1 keyframes kept
  11. Shot 10, 3:15 to 3:34, 1 of 1 keyframes kept
  12. Shot 11, 3:34 to 3:59, 1 of 1 keyframes kept
  13. Shot 12, 3:59 to 4:24, 1 of 1 keyframes kept
  14. Shot 13, 4:24 to 4:49, 1 of 1 keyframes kept
  15. Shot 14, 4:49 to 5:15, 0 of 1 keyframes kept
  16. Shot 15, 5:15 to 5:40, 0 of 1 keyframes kept
  17. Shot 16, 5:40 to 6:05, 1 of 1 keyframes kept
  18. Shot 17, 6:05 to 6:30, 0 of 1 keyframes kept
  19. Shot 18, 6:30 to 6:56, 1 of 1 keyframes kept
  20. Shot 19, 6:56 to 7:36, 1 of 1 keyframes kept
  21. Shot 20, 7:36 to 7:43, 1 of 1 keyframes kept
  22. Shot 21, 7:43 to 8:09, 1 of 1 keyframes kept
  23. Shot 22, 8:09 to 8:34, 1 of 1 keyframes kept
  24. Shot 23, 8:34 to 9:00, 0 of 1 keyframes kept
  25. Shot 24, 9:00 to 9:26, 1 of 1 keyframes kept
  26. Shot 25, 9:26 to 9:52, 1 of 1 keyframes kept
  27. Shot 26, 9:52 to 10:17, 0 of 1 keyframes kept
  28. Shot 27, 10:17 to 10:50, 1 of 1 keyframes kept
  29. Shot 28, 10:50 to 11:17, 1 of 1 keyframes kept
  30. Shot 29, 11:17 to 11:43, 1 of 1 keyframes kept
  31. Shot 30, 11:43 to 12:10, 1 of 1 keyframes kept
  32. Shot 31, 12:10 to 12:36, 0 of 1 keyframes kept
  33. Shot 32, 12:36 to 13:02, 1 of 1 keyframes kept
  34. Shot 33, 13:02 to 13:29, 1 of 1 keyframes kept
  35. Shot 34, 13:29 to 13:55, 1 of 1 keyframes kept
  36. Shot 35, 13:55 to 14:21, 1 of 1 keyframes kept
  37. Shot 36, 14:21 to 14:48, 0 of 1 keyframes kept
  38. Shot 37, 14:48 to 15:16, 1 of 1 keyframes kept
  39. Shot 38, 15:16 to 15:51, 1 of 1 keyframes kept
  40. Shot 39, 15:51 to 16:30, 1 of 1 keyframes kept
  41. Shot 40, 16:30 to 16:35, 1 of 1 keyframes kept
  42. Shot 41, 16:35 to 16:53, 1 of 1 keyframes kept
  43. Shot 42, 16:53 to 16:57, 1 of 1 keyframes kept
  44. Shot 43, 16:57 to 16:58, 1 of 1 keyframes kept
  45. Shot 44, 16:58 to 17:30, 1 of 1 keyframes kept
  46. Shot 45, 17:30 to 17:58, 1 of 1 keyframes kept
  47. Shot 46, 17:58 to 18:25, 0 of 1 keyframes kept
  48. Shot 47, 18:25 to 18:36, 0 of 1 keyframes kept
  49. Shot 48, 18:36 to 18:48, 1 of 1 keyframes kept
  50. Shot 49, 18:48 to 18:53, 0 of 1 keyframes kept
  51. Shot 50, 18:53 to 19:00, 0 of 1 keyframes kept
  52. Shot 51, 19:00 to 19:06, 1 of 1 keyframes kept
  53. Shot 52, 19:06 to 19:17, 0 of 1 keyframes kept
  54. Shot 53, 19:17 to 19:20, 1 of 1 keyframes kept
  55. Shot 54, 19:20 to 19:23, 0 of 1 keyframes kept
  56. Shot 55, 19:23 to 19:25, 1 of 1 keyframes kept
  57. Shot 56, 19:25 to 19:30, 1 of 1 keyframes kept
  58. Shot 57, 19:30 to 19:56, 1 of 1 keyframes kept
  59. Shot 58, 19:56 to 20:10, 1 of 1 keyframes kept

59 shot(s).

keyframes kept every frame deduplicated

What was stored

cues
160
whisperx 160
chunks
35
from 160 cues
keyframes
46
kept of 59 captured
frames with text
46
1,249 lines read
chapters
0
from the source metadata
keyframe bytes
6.5 MB
word timings on 160 cues

Provenance

Each pipeline stage, its state and the model that produced it
stage state model started took
fetch done — 2026-08-11 10:37 1m 36s
stt done — 2026-08-11 10:39 22s
chunk done — 2026-08-11 10:39 0s
text_embed done — 2026-08-11 10:39 0s
keyframe done — 2026-08-11 10:39 1m 49s
ocr done — 2026-08-11 10:41 22s
frame_embed done — 2026-08-11 10:41 7s

Frames, and what the machine read

  • 0:02 #0 done2 line(s)

    shot 0·sharpness 668.7

    1. Al Engineer0.93
    2. EUROPE1.00

  • 0:06 #1 done2 line(s)

    shot 1·sharpness 819.1

    1. PRESENTING SPONSOR0.99
    2. Google DeepMind1.00

  • 0:11 #2 done3 line(s)

    shot 2·sharpness 939.2

    1. PLATINUM SPONSORS0.98
    2. # Braintrust0.95
    3. WorkOS OpenAI0.96

  • 0:16 #3 done9 line(s)

    shot 3·sharpness 627.1

    1. AlEngineer1.00
    2. Why MCP & ChatGF0.97
    3. EUROPE1.00
    4. Double Iframes0.99
    5. And What That Means for Your App1.00
    6. Frédéric Barthelet0.99
    7. EU/ACC1.00
    8. AlEngineer1.00
    9. EUROPE1.00

  • 0:27 #4 done9 line(s)

    shot 4·sharpness 2911.7

    1. Why MCP & ChatGPT Apps Use0.99
    2. Double Iframes1.00
    3. AIE1.00
    4. And What That Means for Your App1.00
    5. Frédéric Barthelet1.00
    6. Co-founder @ Alpic0.98
    7. Google DeepMind1.00
    8. gineer0.98
    9. 260.99

  • 0:50 #5 done22 line(s)

    shot 5·sharpness 2590.8

    1. VV0.52
    2. What are MCP & ChatGPT Apps?0.97
    3. +16:340.97
    4. Fifty Six0.98
    5. ***0.67
    6. AIE1.00
    7. Discoverability in-chat and in stores on ChatGPT and Claude1.00
    8. £2751.00
    9. £279 63660.93
    10. ★1.00
    11. ★1.00
    12. ★1.00
    13. ★1.00
    14. Interactive UI inside Al chats0.98
    15. Liad and Ido experimenting with MCP-UI1.00
    16. Initially released on ChatGPT as OpenAl's Apps SDK0.98
    17. Standardized as MCP first official extension0.99
    18. Poser une question0.99
    19. Omupbox0.86
    20. Engineering the future of Al1.00
    21. gineer1.00
    22. 260.99

  • 1:08 #6 done34 line(s)

    shot 6·sharpness 2632.0

    1. AV0.67
    2. What are MCP & ChatGPT Apps?1.00
    3. +16:350.99
    4. (reduced from £429) is very competitive for a1.00
    5. January coastal stay.0.98
    6. AIE1.00
    7. ★1.00
    8. Discoverability in-chat and in stores on ChatGPT and Claude1.00
    9. - Pet-friendly W - not all 1-bed coastal0.98
    10. cottages allow dogs, so this is a big plus if1.00
    11. you're bringing one.1.00
    12. ★1.00
    13. ★1.00
    14. ★1.00
    15. ★1.00
    16. Interactive UI inside Al chats0.99
    17. - Easy & practical – Wi-Fi, on-site parking, and0.98
    18. Overall vibe0.98
    19. no resort crowds.0.98
    20. Liad and Ido experimenting with MCP-UI1.00
    21. Quiet, comfortable, and well located — ideal if0.99
    22. Initially released on ChatGPT as OpenAl's Apps SDK0.99
    23. Poser une question1.00
    24. Standardized as MCP first official extension0.99
    25. C'est0.99
    26. Oui0.86
    27. M1.00
    28. 1231.00
    29. 己0.57
    30. 曲0.83
    31. Braintrust1.00
    32. WorkOS OpenAI0.95
    33. gineer1.00
    34. 260.89

  • 1:53 #7 done31 line(s)

    shot 7·sharpness 2567.9

    1. What are MCP & ChatGPT Apps?0.97
    2. 16:341.00
    3. ChatGPT5.21.00
    4. @0.77
    5. Can you find me a cottage for 20.99
    6. ★1.00
    7. in Cornwall next week?1.00
    8. AIE1.00
    9. Discoverability in-chat and in stores on ChatGPT and Claude1.00
    10. Cottages1.00
    11. ★1.00
    12. Connwall 26 Jan - 2 Fob - 2 aduits - 39 properties0.96
    13. ★1.00
    14. ★1.00
    15. Interactive UI inside Al chats0.99
    16. Liad and Ido experimenting with MCP-UI1.00
    17. Initially released on ChatGPT as OpenAl's Apps SDK0.99
    18. Standardized as MCP first official extension0.99
    19. Rosecraddoc Holiday Village -...1.00
    20. Liskeard0.94
    21. Anneth0.94
    22. ★5.01.00
    23. witCar parking on site0.91
    24. Detached1.00
    25. Cottages ×0.94
    26. +0.53
    27. Poser une question1.00
    28. AlEngineer0.97
    29. gineer1.00
    30. EUROPE1.00
    31. 260.93

  • 2:34 #8 done26 line(s)

    shot 8·sharpness 2731.6

    1. AV0.53
    2. Howit works1.00
    3. Host1.00
    4. MCP Server1.00
    5. tools/list1.00
    6. tools with _meta.ui.resourceUri0.98
    7. AIE1.00
    8. loop1.00
    9. ★1.00
    10. Views render in response to tool calls0.99
    11. tools/call1.00
    12. ★1.00
    13. ★1.00
    14. resources/read1.00
    15. HTML documents live in resources1.00
    16. View HTML with _meta.ui { csp permissions }0.99
    17. Views can be cached ahead of time1.00
    18. Create view in the chat1.00
    19. with iframe1.00
    20. result { content + _meta.ui.url }0.97
    21. Hydrate view with tool response0.99
    22. Host1.00
    23. MCP Server1.00
    24. Engineering the future of Al0.99
    25. gineer0.99
    26. 260.99

  • 2:46 #9 done26 line(s)

    shot 9·sharpness 2735.4

    1. AV0.63
    2. How it works0.98
    3. Host1.00
    4. MCP Server1.00
    5. tools/list1.00
    6. tools with _meta.ui.resourceUri0.98
    7. AIE1.00
    8. loop1.00
    9. ★1.00
    10. Views render in response to tool calls1.00
    11. tools/call1.00
    12. ★1.00
    13. ★1.00
    14. resources/read1.00
    15. HTML documents live in resources1.00
    16. View HTML with _meta.ui { csp permissions }0.99
    17. Views can be cached ahead of time1.00
    18. Create view in the chat1.00
    19. with iframe1.00
    20. result { content + _meta.ui.url }0.97
    21. Hydrate view with tool response0.99
    22. Host1.00
    23. MCP Server1.00
    24. Engineering the future of Al1.00
    25. gineer1.00
    26. 260.98

  • 3:32 #10 done12 line(s)

    shot 10·sharpness 508.3

    1. ming into the V0.99
    2. AlEngineer0.99
    3. EUROPE1.00
    4. <body> chatgpt.com0.98
    5. src-"https://alpic.we0.95
    6. sro-"about:blank">0.94
    7. <div> Your App </div>0.98
    8. </body>0.98
    9. EU/ACC1.00
    10. Why two0.95
    11. AlEngineer1.00
    12. EUROPE1.00

  • 3:49 #11 done18 line(s)

    shot 11·sharpness 1438.7

    1. AY0.52
    2. Zooming into the View1.00
    3. <body> chatgpt.com0.98
    4. AIE1.00
    5. <iframe src="https://alpic.web-sandbox.oaiusercontent.com">1.00
    6. <iframe src="about:blank">0.99
    7. ★1.00
    8. ★1.00
    9. ★1.00
    10. <div> Your App </div>1.00
    11. </iframe>0.99
    12. </iframe>1.00
    13. </body>0.93
    14. Why two iframes?0.98
    15. AlEngineer0.97
    16. gineer1.00
    17. EUROPE1.00
    18. 260.98

  • 4:21 #12 done48 line(s)

    shot 12·sharpness 2257.2

    1. AV0.77
    2. Before AI Apps - the host page0.96
    3. chatgpt.com Content-Security-Policy1.00
    4. Directive1.00
    5. Allowed values0.99
    6. default-src'self'0.95
    7. script-src'nonce--'https://*.chatgpt.com0.98
    8. default-1.00
    9. style-src 'selfunsafe-inline0.98
    10. connect-src 'self'*.openai.com wss://*.chatgpt.com0.98
    11. src1.00
    12. 'none'0.99
    13. 'self'1.00
    14. https:1.00
    15. AIE1.00
    16. img-src 'self' * blob: data: https:0.96
    17. ★1.00
    18. ★1.00
    19. ★1.00
    20. ★1.00
    21. frame-src 'self*.stripe.com *.youtube.com-0.96
    22. script-src1.00
    23. inline'1.00
    24. 'none'0.95
    25. 'nonce-.0.95
    26. 'unsafe-eval'1.00
    27. 'strict-dynamic'1.00
    28. 'unsafe-0.94
    29. style-src1.00
    30. 'self'1.00
    31. 'unsafe-inline'1.00
    32. 'nonce-..0.90
    33. connect-1.00
    34. src1.00
    35. 'self'1.00
    36. https:1.00
    37. WSS:0.83
    38. img-src1.00
    39. 'self'1.00
    40. data:1.00
    41. blob:1.00
    42. frame-src1.00
    43. 'self'1.00
    44. 'none'1.00
    45. blob:1.00
    46. AlEngineer0.97
    47. gineer1.00
    48. EUROPE1.00

  • 4:27 #13 done47 line(s)

    shot 13·sharpness 2268.3

    1. Before AI Apps - the host page0.96
    2. chatgpt.com Content-Security-Policy1.00
    3. Directive1.00
    4. Allowed values0.99
    5. default-srcself1.00
    6. ★1.00
    7. script-src'nonce-_'https://*.chatgpt.com0.98
    8. style-src'self'unsafe-inline0.99
    9. connect-src 'self'*.openai.com wss://*.chatgpt.com0.97
    10. default-1.00
    11. src1.00
    12. 'none'1.00
    13. 'self'1.00
    14. https:0.99
    15. AIE1.00
    16. img-src 'self' * blob: data: https:0.97
    17. ★1.00
    18. ★1.00
    19. ★1.00
    20. ★1.00
    21. frame-src 'self'*.stripe.com *.youtube.com-0.96
    22. script-src1.00
    23. inline'1.00
    24. 'none1.00
    25. 'nonce-.0.96
    26. 'unsafe-eval'1.00
    27. 'strict-dynamic'1.00
    28. 'unsafe-0.99
    29. style-src1.00
    30. 'self'1.00
    31. 'unsafe-inline'1.00
    32. 'nonce-.0.95
    33. src1.00
    34. connect-1.00
    35. 'self'1.00
    36. https:1.00
    37. WSS:0.83
    38. img-src1.00
    39. 'self'1.00
    40. data:1.00
    41. blob:1.00
    42. frame-src0.99
    43. 'self'1.00
    44. 'none'1.00
    45. blob:1.00
    46. Engineering the future of Al1.00
    47. gineer1.00

  • 4:55 #14 skipped

    shot 14·duplicate of #13

  • 5:18 #15 skipped

    shot 15·duplicate of #13

  • 6:00 #16 done15 line(s)

    shot 16·sharpness 2221.1

    1. Rendering external HTML?1.00
    2. Useiframes1.00
    3. AIE1.00
    4. ★0.99
    5. ★1.00
    6. ★1.00
    7. The1.00
    8. <iframe>1.00
    9. HTML element represents a nested browsing context,0.99
    10. embedding another HTML page into the current one.0.99
    11. - MDN Web Docs0.90
    12. AlEngineer0.96
    13. gineer1.00
    14. EUROPE1.00
    15. 260.97

  • 6:20 #17 skipped

    shot 17·duplicate of #16

  • 6:41 #18 done21 line(s)

    shot 18·sharpness 1359.7

    1. 150 %0.97
    2. Réinitialiser0.99
    3. AY0.51
    4. What if — srcdoc?0.98
    5. chatgpt.com Content-Security-Policy1.00
    6. script-src 'nonce-' https://*.chatgpt.com0.98
    7. frame-src'self' *.stripe.com *.youtube.com0.98
    8. AIE1.00
    9. ★1.00
    10. ★1.00
    11. ★1.00
    12. ★1.00
    13. <body>1.00
    14. <iframe srcdoc="_">0.98
    15. <div> Your App </div>0.99
    16. </iframe>1.00
    17. </body>1.00
    18. x inherits parent CSP without script nonce, all view scripts blocked0.98
    19. Engineering the future of Al1.00
    20. gineer1.00
    21. 261.00

  • 7:23 #19 done11 line(s)

    shot 19·sharpness 466.5

    1. if-srcdoc?0.98
    2. AlEngineer0.99
    3. chatgpt.com Content-Securit0.99
    4. script-src nonce-https:0.95
    5. EUROPE1.00
    6. frame-arc "snlf' *.stripe.o0.81
    7. srcdoce0.87
    8. EU/ACC1.00
    9. inherits parent CSP without script n0.98
    10. AlEngineer1.00
    11. EUROPE1.00

  • 7:41 #20 done18 line(s)

    shot 20·sharpness 1295.6

    1. What if— srcdoc?0.94
    2. chatgpt.com Content-Security-Policy1.00
    3. script-src 'nonce-' https://*.chatgpt.com0.97
    4. frame-src 'self' *.stripe.com *.youtube.com-0.97
    5. AIE1.00
    6. ★1.00
    7. ★1.00
    8. ★1.00
    9. ★1.00
    10. <body>1.00
    11. <iframe srcdoc="_.">0.94
    12. <div> Your App </div>1.00
    13. </iframe>0.98
    14. </body>0.99
    15. x inherits parent CSP without script nonce, all view scripts blocked0.99
    16. Engineering the future of Al1.00
    17. gineer0.93
    18. 260.99

  • 8:01 #21 done21 line(s)

    shot 21·sharpness 1541.5

    1. AY0.51
    2. What if- relax the CSP?0.96
    3. chatgpt.com Content-Security-Policy1.00
    4. script-src'unsafe-inlineunsafe-eval0.99
    5. ***0.81
    6. frame-src'self'*.stripe.com *.youtube.com .0.98
    7. AIE1.00
    8. ★1.00
    9. ★1.00
    10. ★1.00
    11. ★1.00
    12. <body>1.00
    13. <iframe srcdoc="_">0.96
    14. <div> Your App </div>1.00
    15. </body>0.99
    16. x iframe inherits parent's origin — view scripts can access ChatGPT's cookies, localStorage, DOM0.99
    17. $0.53
    18. Braintrust1.00
    19. WorkOS OpenAI0.98
    20. gineer1.00
    21. 260.98

  • 8:31 #22 done19 line(s)

    shot 22·sharpness 1461.5

    1. What if — sandbox?0.93
    2. chatgpt.com Content-Security-Policy1.00
    3. script-src'nonce-_'https://*.chatgpt.com0.97
    4. ***0.51
    5. frame-src 'self' *.stripe.com *.youtube.com0.97
    6. AIE1.00
    7. ★1.00
    8. ★1.00
    9. ★1.00
    10. ★1.00
    11. <body>1.00
    12. sframe srcdoc="_" sandbox="allow-scripts">0.96
    13. <div> Your App </div>1.00
    14. </body>0.98
    15. x Browser assigns opaque origin — no localStorage, no cookies, no IndexedDB0.98
    16. AlEngineer0.96
    17. gineer1.00
    18. EUROPE1.00
    19. 260.98

  • 8:40 #23 skipped

    shot 23·duplicate of #22

Transcript

160 cues· 3,281 words· 17,748 chars

  1. 0:15 Hi, everyone.
  2. 0:16 My name is Fred.
  3. 0:17 I'm the CTO and co-founder of Alpic, the MCP hosting company.
  4. 0:22 And today, I would like to share with you an adventure of deep diving into the double iframe mechanisms that we have on ChatGPT and MCP app and why it matters when we build apps.
  5. 0:33 First thing first, if you haven't had the chance to listen to Ido and Léa talks just before about MCP apps, a quick sum up of what those MCP and LGBT apps are.
  6. 0:46 That's a new surface area for your business to expose product and services with new acquisition channel that has two main criteria.
  7. 0:54 First one being discoverability, so you will have
  8. 0:57 Ecosystems of connectors and apps available in a consumer generalistic agent like CGPT and Cloud.
  9. 1:04 So CGPT App Store and Cloud Connectors.
  10. 1:07 Those apps are browsable inside the store, but they are also discoverable in chat.
  11. 1:12 So if you're having a conversation that's relevant for an app to be brought into to add additional context and feature some nice additional actions, that will be brought into the conversation.
  12. 1:23 And the second part, which is the biggest part and what we will be focusing on in this talk, which is the addition of interactive UI inside those conversational agents, where you used to add text only, apps adds a new layer of UI that could be provided by the MCP server, but could be generated or generative UI as well.
  13. 1:43 They were first sort of using MCP UI that was developed by Léa Danido just before,
  14. 1:49 then released by OpenAI with an apps SDK back in October last year and standardized across multiple clients on the first official extension of MCP called the app extension.
  15. 2:02 How does it work?
  16. 2:03 If we take a little bit closer look at how this UI is brought into the conversation, those are brought using views.
  17. 2:12 Views are the name that we use for those small snippet of UI that appears inside the conversation.
  18. 2:18 Views are always rendered as a result of a tool call.
  19. 2:22 So if your server exposed multiple tools to be used, you can actually add metadata on some of them to say this tool is best used when results will be displayed using a specific UI.
  20. 2:33 And if the host supports MCP apps, it will use the relevant view corresponding to this tool call to display the results.
  21. 2:42 Views are simple HTML document.
  22. 2:44 You can include CSS inside.
  23. 2:46 Nothing new under the sun here.
  24. 2:47 It's just a way to package those small snippets of application.
  25. 2:52 And they are discoverable ahead of time because all views are described on the two list calls that happens at the beginning of the conversation between the host and your MCP server or MCP app.
  26. 3:04 So each tool that supports UI will advertise the resource that's needed to display the UI.
  27. 3:10 It can be cached ahead of time or it can be served and downloaded and served right away when the tool call that needs UI to be rendered is made.
  28. 3:19 The conversational agent on the host will create this new iframe where the view will be displayed and it will inject the tool results inside so that you have dynamic content rendered to the user.
  29. 3:31 If you take a closer look at what is inside the DOM of the host, when you take a, I was a bit curious, I wanted to know how it was working, how ChatGPT was actually rendering third-party UI inside the conversation.
  30. 3:48 I was a bit surprised and I was met with not so much expectation about having a double iframe, having an iframe nested inside another iframe.
  31. 3:58 and this gave me the idea for this talk.
  32. 4:01 I want to bring you today with me, deep diving into why the decision was made to do this kind of inception nesting of iframes, and what are the benefits, what was it put in place, and what are the implications when you build apps, what you should be paying attention to, and how to make sure that your experience is very nice.
  33. 4:18 Before we go into that, let's take a close look at what ChatGPT was before MCP apps were implemented.
  34. 4:25 We'll be using ChatGPT as the examples for this deep dive, but the exact same happened on Cloud AI if you want to take another look by yourself.
  35. 4:33 The initial thing to take a look at that is very important is something called content security policy.
  36. 4:39 Those are directives returned by a server as response header to document calls.
  37. 4:45 So when you load ChargeGPT inside your browser, ChargeGPT will respond with a document plus security policy directive on what the browser should be allowed to load and execute and what it shouldn't be able to load and execute.
  38. 4:57 You've got multiple directives, including inside content security policy, some about which scripts you can run, which CSS style sheet you can download, which image you can download, which API you can connect to and ask questions to.
  39. 5:11 I will not go into the details, but two are very important to remember here.
  40. 5:14 FrameSRC, which basically is the directive to allow a specific website to render iframe inside the document.
  41. 5:21 and ScriptSRC, which basically allows specific site scripts to be run inside the browser.
  42. 5:29 To be able to run external UI inside ChatGPT, we will use a dedicated HTML element that has been made specifically for this purpose, which is the inline frame element, or iframe, that is made to basically spawn up a nested browsing context inside your browser window.
  43. 5:48 So those small pieces of views will be rendered as almost separately, completely isolated browsing context.
  44. 5:55 They are very convenient and they have two ways to be used.
  45. 5:58 First one is to provide a source for the iframes that you want to render.
  46. 6:02 So basically a URL of another page to be loaded by your browser and executed locally and rendered inside the space it's made for.
  47. 6:10 and the sourceDoc, which is another attribute which allows you to push inside the iframe content that you want to render as is, without having to bother to load another content.
  48. 6:22 So if we want to build this marketplace of app and have third-party UI rendered inside ChatGPT, why not use straightaway source doc as the attribute for injecting context into?
  49. 6:36 And I'm realizing now that it's a little bit small, but I think I can zoom in a bit.
  50. 6:41 No, I cannot.

Open at this second