このスキルは、mcp-useとOpenAI Apps SDKを使用してインタラクティブなウィジェットを持つChatGPTアプリを構築するための包括的なドキュメントを提供します。開発者をolda архитектура、セットアップ、実装、そして丰富でインタラクティブなChatGPTエクスペリエンスを作成するための advanced patternsを通じてガイドします。
スキルZIPをダウンロード
Claudeでアップロード
設定 → 機能 → スキル → スキルをアップロードへ移動
オンにして利用開始
テストする
「chatgpt-app-builder」を使用しています。 検索結果を表示するウィジェートの作り方を教えてください
期待される結果:
- サーバ.tool()ハンドラーでwidget()ヘルパーを使用してください
- widget({ props: searchResults, output: text('X件の結果が見つかりました') })を返してください
- resources/でuseWidget()を通じてpropsを受け取るReactコンポーネントを作成してください
「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（Model Context Protocol）サーバーを作成する開発者
ChatGPTプラグインアーキテクチャ
ChatGPTまたはClaude会話のためにウィジェットベースのインタラクションを設計するエンジニア
これらのプロンプトを試す
mcp-useを使用してインタラクティブウィジェットを持つChatGPTアプリを構築したい。プロジェクトのセットアップと最初のウィジェットの作り方を教えてください。
リスト形式で結果を表示し、ユーザーがクリックして詳細を確認できるレストラン検索機能には、ツールとウィジェットのどちらを使用すべきですか？
ウィジェット状態を会話間で永続化し、ウィジェットインタラクションからLLMをトリガーする方法を教えてください。
フォーム入力、API呼び出し、ユーザーの選択に基づいて条件付きレンダリングを持つマルチステップウィジェットを作成してください。
ベストプラクティス
- ツールのみから始め、視覚的なインタラクションが必要な場合にのみウィジェットにアップグレードしてください
- ウィジェットは単一の目的に焦点を当ててください - 複数の简单なウィジェットは1つの复杂なウィジェットよりもスケーリングが多いです
- LLMが見るべきではない機密データにはpropsを使用し、会話を続けるためのコンテキストにはoutputを使用してください
回避
- 最初に返す必要があるデータを遅延ロードする - ツール呼び出しはコストがかかります
- ウィジェット内部の状態管理にツールを使用する - フライト選択、フォームデータはウィジェット状態に保持在ください
- 視覚的表現が必要ない对话機能のみのためのウィジェットを作成しないでください