此技能提供使用 mcp-use 和 OpenAI Apps SDK 建立互動式小工具的完整文件。它引導開發者了解架構、設定、實作，以及建立豐富互動 ChatGPT 體驗的高級模式。
下載技能 ZIP
在 Claude 中上傳
前往 設定 → 功能 → 技能 → 上傳技能
開啟並開始使用
測試它
正在使用「chatgpt-app-builder」。 如何建立顯示搜尋結果的小工具？
預期結果:
- 在 server.tool() 處理程式中使用 widget() 輔助函式
- 回傳 widget({ props: searchResults, output: text('找到 X 個結果') })
- 在 resources/ 中建立接收 props 的 React 元件，透過 useWidget()
正在使用「chatgpt-app-builder」。 props 和 output 有什麼不同？
預期結果:
- output：LLM 在對話中看到的內容（文字、物件、markdown）
- props：傳送至小工具 UI 的資料（對 LLM 隱藏）
安全審計
安全This skill is documentation/reference material for building ChatGPT apps with mcp-use. All static analyzer findings are false positives: (1) 'Weak cryptographic algorithm' triggers on 'sha' substring in words like 'shape' - no actual crypto usage; (2) 'Ruby/shell backtick execution' detects markdown code fences, not shell commands; (3) 'System reconnaissance' and 'Hardcoded URL' are documentation patterns; (4) The critical heuristic 'Code execution + Network + Credential access' is triggered by documentation showing code examples with URLs and environment variables - standard documentation practice, not malicious behavior. This skill contains no executable code.
低風險問題 (2)
品質評分
你能建構什麼
使用互動式小工具建立 ChatGPT 應用程式
開發者學習使用 mcp-use 框架建立具有豐富互動 UI 元件的 ChatGPT 應用程式
MCP 伺服器開發
開發者建立具有 AI 助手自訂 React 小工具的 MCP（模型上下文通訊協定）伺服器
ChatGPT 外掛程式架構
工程師設計 ChatGPT 或 Claude 對話的小工具互動
試試這些提示
我想使用 mcp-use 建立具有互動式小工具的 ChatGPT 應用程式。如何設定專案並建立我的第一個小工具？
餐廳搜尋功能應該使用工具還是小工具，它會以列表顯示結果並允許使用者點擊查看詳情？
如何在小工具互動中保留跨對話的小工具狀態並觸發 LLM？
建立具有表單輸入、API 呼叫，並根據使用者選擇進行條件渲染的多步驟小工具。
最佳實務
- 先從純工具開始，只有在需要視覺互動時才升級至小工具
- 讓小工具專注於單一目的 - 多個簡單的小工具比一個複雜的小工具更容易擴展
- 對 LLM 不應看到的敏感資料使用 props，對話上下文則使用 output
避免
- 懶載入應該預先回傳的資料 - 工具呼叫昂貴
- 使用工具管理小工具內部狀態 - 機票選擇、表單資料應保留在小工具狀態中
- 為純對話功能建立小工具，不需要視覺呈現