mcpField
C
chatgpt-app-builder

chatgpt-app-builder

github.com/mcp-use開発10.8k9.4k 回インストール1 日前に更新
リポジトリ

chatgpt-app-builder について

chatgpt-app-builderは、mcp-useを使ったプロジェクト実装を支援し、ChatGPTアプリに関する指針を含むスキルです。導入済みAPIの確認、インタラクティブビューの構築、実際の動作に基づく変更検証をエージェントに促します。

主な機能

  1. 01インストール済みAPIとプロジェクトファイルの確認
  2. 02ツールとインタラクティブビューの構築
  3. 03バージョンに応じた規約の遵守
  4. 04実際のライフサイクルで変更を検証
  5. 05未対応APIや安全でない状態の回避

活用シーン

  1. 01インタラクティブなChatGPTアプリビューの構築
  2. 02導入済みmcp-useのバージョンに合わせた実装
  3. 03完了報告前の実動作確認

MCP 対応

mcp-useによるMCPサーバーとインタラクティブなMCPアプリの実装を支援します。ツール、リソース、プロンプト、ビューが対象です。

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/mcp-use/mcp-use --skill chatgpt-app-builder

インストール後、Claude Code で/chatgpt-app-builderを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

LICENSE.txt
references/
advanced-features.md
auth.md
migration.md
server.md
skills-over-mcp.md
verification.md
views.md

詳細

mcp-use で構築する

インストール済みの mcp-use パッケージ、そのエクスポートされた型、生成された宣言、およびプロジェクトの既存コードを信頼できる情報源として扱ってください。API の選択やコードの変更を行う前に、インストール済みのバージョンを確認してください。

ワークフロー

  1. package.json、サーバーのエントリーポイント、エクスポートされたツール参照、mcp-env.d.ts、views/、skills/、およびインストール済みの mcp-use のバージョンを確認します。
  2. create-mcp-use-app@latest と適切なテンプレートを使って、新しい安定版プロジェクトをスキャフォールディングします。ベータ版、カナリア版、または既存のバージョン指定プロジェクトを扱う場合は、パッケージのバージョンまたは dist-tag に合わせます。
  3. タスクに必要なリファレンスだけを読みます。
    • ツール、リソース、プロンプト、MCP ミドルウェア、リクエストコンテキスト、および結果のエンベロープについては、サーバーを参照します。
    • インタラクティブな MCP Apps、React フック、モデルコンテキスト、ホスト機能、アセット、CSP、およびエンドポイント/UI ドメインの処理については、ビューを参照します。
    • OAuth プロバイダー、検証済みアイデンティティ、スコープ、権限、および認可については、認証を参照します。
    • サーバーのツールとともに再利用可能なワークフローを提供する場合は、MCP 経由のスキルを参照します。
    • OpenAPI、プロキシ、通知、サブスクリプション、およびエリシテーションについては、高度な機能を参照します。
    • 廃止済みまたは互換性維持専用のインポート、ヘルパー、登録形式、UI パターン、またはセッションの前提が存在する場合に限り、移行を参照します。
    • 実装作業の完了を報告する前に、検証を参照します。
  4. インストール済みの型に基づいて実装します。コピーした例や過去の変更履歴より、フレームワークの現在の規約を優先してください。
  5. 変更した動作を証明できる最小限の実際のライフサイクルを検証し、その後、リスクに応じてチェックを拡張します。

基本原則

  • サーバー API は mcp-use から、React API は mcp-use/react から、OAuth プロバダーアダプターは mcp-use/oauth/* サブパスからインポートします。
  • ツールの引数は inputSchema で定義します。構造化された結果、およびすべての View バインドツールには outputSchema を追加します。
  • MCP の結果エンベロープをそのまま返します。スキーマに基づく成功結果には、一致する structuredContent を含める必要があります。想定される失敗の場合は、モデルが読み取れる content とともに isError: true を返してもかまいません。
  • 各 View は views/<name>/view.tsx に配置し、view: { name: "<name>" } でバインドします。
  • View が使用する、静的に宣言されたすべてのツール参照をエクスポートします。mcp-use dev、build、start で使われるサーバーのエントリーポイントをデフォルトエクスポートします。
  • アイデンティティと変更可能なワークフロー状態は、リクエストスコープまたは外部ストアで管理します。クライアントが報告するメタデータは未検証として扱います。
  • サーバーが、ツールの説明を肥大化させるような反復可能な複数ステップのワークフローを提供する場合は、MCP 経由のスキルを検討します。

ガードレール

  • エクスポート、設定フィールド、コールバックの形式を推測で作らないでください。不確かな点は、インストール済みの宣言またはソースコードで確認します。
  • 既存のプロジェクトに記載されているという理由だけで、インストール済みのバージョンに存在しない API を残さないでください。
  • ツールのコールバックから、通常のドメインオブジェクトをそのまま返さないでください。
  • 一致する outputSchema と structuredContent の結果がない状態で View をバインドしないでください。
  • リクエストをまたぐアイデンティティ、エリシテーションの継続性、または永続的な業務状態の管理に、モジュールグローバルを使わないでください。
  • 型、パッケージのエクスポート、認証、またはインタラクティブな動作に変更があった場合、ソースのビルドだけで成功したと判断しないでください。
  • ユーザーから明示的な依頼がない限り、デプロイや外部システムの変更を行わないでください。

コメント