目標先講清楚：
分析OpenAI Apps SDK，了解OpenAI Apps SDK是怎麼使用MCP當作跟其他Apps交互的protocol

1) OpenAI Apps SDK的主要角色關係

1. OpenAI Apps SDK主要跟三個角色相關：App提供的MCP Server, chatGPT, openAI的sandbox環境
2. chatGPT 是MCP Client，或是也可以稱作Host
3. 上圖以簡單的例子說明三個角色的互動關係：
   • 情境：披薩清單
     • Step 1.
       • 使用者在 ChatGPT(Host) 輸入「列出台北的披薩店」 → ChatGPT(Host) 判斷要用工具 get_pizzas → ChatGPT(Host) call_tool 到 App（MCP）。
     • Step 2.
       • App(MCP) 回 structuredContent:{ places:[...], favorites:[] }、content、_meta）→ OpenAI透過iframe將APP(MCP)回傳的_meta中的註冊元件 HTML載入sandbox中啟動，chatGPT在 sandbox 注入 window.openai.toolOutput 等 → 元件渲染清單 → 使用者在ChatGPT上iframe中看到披薩店清單。
   • 情境：使用者在清單點「加入最愛」：
     做法：(在sandbox的）元件 → setWidgetState → ChatGPT(Host) 儲存 UI 狀態。
     • 如果想要把使用者的資料傳給App，App必須在提供的MCP包含「把檔案傳回給App」的工具，讓ChatGPT(Host)執行完以上後，在呼叫該工具，把資料帶回給App

將3個角色整理成表格：

心得：
原本以為可以直接使用App原先的元件，沒想到是App提供元件代碼和MCP server，在這樣的狀況下，等於讓App開發者多了需要另外維護更新的部分。

2) 結構化資料渲染的相關開源

• OpenAI在OpenAI-Structured-output-samples-generative-ui-Github有分享將結構化輸出渲染成組件的方式；

• 包含3種組件 - 包含：card、table、bar_chart、carousel；對於想在chat window呈現圖表可參考．

接下來要做什麼

回到context，透過分析Manus ai的文章，探討為什麼有些agent可以調用幾十個以上的tools

參考資源

1.OpenAI Apps SDK
2.OpenAI-Structured-output-samples-generative-ui-Github