OpenAIが開催したBuild Hourでは、ChatGPT内でのアプリ構築プロセスが詳細に解説された。MCPサーバーとWebコンポーネントを組み合わせた新しい開発パラダイムが紹介され、Codexと新たにリリースされたDocs MCPサーバーを活用することで、従来の開発プロセスを大幅に効率化できることが実演された。デモでは、数回のプロンプトだけでリアルタイムマルチプレイヤー対応のピンポンゲームアプリを構築し、AIモデルによる試合後分析機能まで実装。全世界のユーザーが利用できるアプリマーケットプレイスへの申請方法、UI/UXガイドライン、収益化オプションなど、実践的な開発ノウハウが包括的に共有された。
イントロダクション
配信開始です。皆さん、こんにちは。OpenAI Build Hoursへようこそ。私はクリスティン、スタートアップマーケティングチームに所属しています。本日は、デベロッパーエクスペリエンスチームのコーリーと一緒にお届けします。
ありがとうございます、クリスティン。皆さんにお会いできて嬉しいです。私は特にチャットアプリを担当していますが、OpenAIのデベロッパープラットフォームとツール全般にわたって、デベロッパーエクスペリエンスチームで働いています。
今年最初のトピックは、ChatGPTにおけるアプリ開発についてです。これは今年最初のBuild Hourで、実は今日はバークレー、スタンフォード、MITの学生たちが初めて参加してくれることになっていて、とても楽しみにしています。Build Hourに馴染みのない方のために説明すると、これはOpenAIのAPIとモデルを使って会社を成長させるためのベストプラクティス、ツール、AI専門知識を提供するものです。
画面下部にホームページへのリンクがあります。過去のBuild Hourをオンデマンドで視聴したり、今後開催予定のものに登録したりできます。では本日の内容を簡単にご紹介しましょう。まず、アプリプラットフォームの概要説明を行います。ローンチ内容、実際のユースケースについてお話しします。実際にChatGPTに入って、今すぐ使えるアプリをお見せします。その後、アプリ構築の全プロセスに深く入り込み、Codexと新しくローンチされたDocs MCPサーバーの使い方もご紹介します。そしてもちろんデモも行います。Build Hourでは常にライブビルドを行っています。
今日はChatGPT内でピンポンをプレイするアプリを作成します。事前にピンポンの練習もしてきたので、準備は万全です。その後、コーリーがアプリをさらに良くするためのベストプラクティスをご案内します。これにはUI/UXガイドラインや、アプリを本当に価値あるものにする要素、そして追加のリソースが含まれます。これらを使ってアプリを構築し、ChatGPTで公開するためのレビュー申請ができるようになります。
最後はQ&Aセッションです。10分間を確保しています。セッション中、画面右側のQ&Aボタンをクリックして、質問やコメントを自由に送信してください。私たちのチームがサンフランシスコとニューヨークの会場にいて、セッション全体を通して回答していきます。そして、いくつかをピックアップしてライブで答えます。では、早速始めましょう。
アプリプラットフォームの概要
ありがとうございます、クリスティン。では皆さん、おはようございます、こんにちは、こんばんは、どちらから参加されているにせよ。今日はChatGPTアプリ、特にアプリプラットフォームについてお話しし、構築方法をお見せできることをとても楽しみにしています。
今日は様々な方が参加されていることは承知しています。ChatGPTアプリを初めて見る方もいれば、配信前にメッセージをくれたベテラン開発者の方もいます。ですので、これが新規のビルダーの方にも、経験豊富な方にも役立つことを願っています。では始めましょう。次のスライドに移ります。
まず、Dev Day以降にローンチしたものをカバーしましょう。Dev DayでChatGPTアプリがプラットフォームとしてローンチされて以来、私たちはApps SDKをローンチしました。フレームワークから、ChatGPTがクライアント内にUIウィジェットを注入する方法、MCPサーバーを使用して異なるコンテキストやツールを取り込み、ユーザーの意図に基づいてアクションを実行する方法まで、すべてが含まれています。
また、developers.openai.comのApps Docサイトもローンチしました。構築したい体験のための様々なコンポーネントや要素について学べる場所です。さらに最近では、パブリックアプリ申請フローもローンチしました。クリスティンが述べたように、世界中の人々が使用できるChatGPT内に自分の体験を配置する機会があります。また、アプリを発見してChatGPTにインストールできるアプリマーケットプレイスもあります。
最後になりますが、私たちはUI コンポーネントライブラリなど、様々なリソースを提供してきました。これにより、ChatGPTの他の部分と統一感のある見た目と雰囲気のアプリを作成するための、すでにスタイル設定されたアセットが利用できます。アプリサンプルリポジトリもあります。ぜひチェックしてください。そして最後になりますが、今日お見せできることを楽しみにしているのが、さらに速く構築できるようにする新しいDocs MCPサーバーです。
では、実際のアプリのデモに移りましょう。ChatGPT内でアプリが実際にどのように見えるかをお見せしてから、実際にアプリを作成する作業に移ります。
ChatGPT内のアプリデモ
では、私の画面を共有します。ここにChatGPTがあります。All Trailsアプリをあらかじめ読み込んであります。プラスボタンに移動して、そこから直接アプリを追加したり、アプリディレクトリに行ってインストールしたい様々なアプリを探したりできます。
今週末はハイキングに行きたいと思っています。All Trailsアプリに手伝ってもらいましょう。「マリンでハイキングに行きたいです。素晴らしいトレイルを見つけるのを手伝ってください」とお願いします。
さて、処理が進んでいる間に説明すると、モデルは私の意図を受け取り、そのコンテキストをAll TrailsのMCPアプリに渡しています。そしてAll Trailsプラットフォームにあるデータのリストを提供してくれています。これがアプリの本当に強力な点です。公開されているウェブ上やモデルが直接アクセスできる場所には存在しない可能性のある、コンテキストデータを取り込むことができるのです。
All Trailsには、その種の情報に関する素晴らしいレビューがたくさんサイトにあります。そして、世界のどこにあるかを確認できるようにUIレイヤーが表示されています。でも、ここでさらに強力なことをして、体験を絞り込みたいと思います。何かアクションを実行してもらい、犬連れOKのトレイルを見つけてもらいましょう。「マリンで犬連れOKのトレイルを見つけてください」とお願いします。
この時点で、モデルはAll Trailsアプリで絞り込み作業を行っています。ほら、犬連れOKの素晴らしいオプションが絞り込まれました。これはアプリから直接提供される機能で、モデルのパワーを使用する、より魅力的で没入感のある体験を作り出すことができます。UIからのエンゲージメント体験、そしてAll Trailsから取り込まれたロジックとデータです。また、フルスクリーンモードの機能もあります。
これらは、ChatGPT内の体験をコントロールするために公開されている素晴らしいウィジェット機能です。では次のアプリに移りましょう。Adobe Expressアプリをまだご覧になっていない方のために、ここで読み込みます。ChatGPT内で直接、興味深いビジュアル作成ができるようになりました。
「1月24日にサンフランシスコで開催されるビルダーイベントのチラシを作成してください。アウトドアウェアのテーマでお願いします」と依頼します。今週末のハイキングの冒険に合わせて。処理が進んでいる間に説明すると、多くのことが動き出しています。Adobe ExpressアプリのMCPサーバーが呼び出されています。作成のためのロジックが渡されています。生成されるチラシのスタイルと雰囲気を選ぶための、様々なテンプレートが表示されます。
この中から好きなものを選びましょう。これがいいですね。これを選びます。この時点で、気に入ったかどうかを決めることができます。実際に上記のコンテキストを入力できます。「イベント詳細をテキストに入力してください」と言います。その時点で、最初のプロンプトから提供したコンテキストを取得し、選んだイベントテンプレートに直接注入できます。
素晴らしい。ここにいくつかのオプションがあります。ビルダーイベントのためにこれをさらに編集できます。また、これを直接確認してパーソナライズすることもできます。でも、次のアプリに移りましょう。今度はクイズをお見せします。
クイズは、OpenAIが誰でも独自のクイズツールを構築して、より多くの情報を学ぶのを手助けするために作ったアプリです。私はコーヒーが大好きなので、素晴らしいエスプレッソの淹れ方についての知識をテストするクイズアプリを作りましょう。
クイズアプリの興味深い点の1つは、このUI内のすべてのコンテンツが動的にレンダリングされることです。これは、ツールレスポンス内に構造化された出力を作成することで実現しました。そうすることで、UIが提供されたコンテキストに基づいて、コンテンツを正確にレンダリングする方法を理解できるようになります。
ここでの生成はすべて動的にのみ行われ、バックエンドに必ずしも保存する必要はありません。これは、動的なコンテンツを持ちたい場合にアプリに追加できるパラダイムの1つです。クイズの生成に少し時間がかかっています。少し待ちましょう。
「多くの現代的なマシンでバランスの取れたエスプレッソを作る場合、一般的な開始点となる抽出比率は何ですか?」クリスティン、分かりますか?
1対4の比率だと推測します。
さて、確認してみましょう。残念ながら、1対2でした。「エスプレッソの一般的な目標抽出温度範囲は何ですか?」実は私もこれは知りません。98から105度かもしれません。110から120度、80から96度。まあ、こんな感じです。
クイズアプリを使えば、基本的にテストしたいあらゆるタイプの情報を構築でき、同じチャット履歴に戻って学習のためにそれらをやり直すことができます。これらは、ChatGPT内で構築できるものを示すための楽しい体験のほんの一部です。では実際に次のコンテンツを見てみましょう。画面共有を停止します。
戻りました。これらすべてのChatGPT内のアプリをご案内いただき、ありがとうございました。視聴中の方は、ぜひご自身で試して、遊んでみてください。
アプリの構造と仕組み
素晴らしい。いくつかのアプリを見てきました。ローンチした内容と、それらがChatGPTでどのように動作するかを確認しました。アプリの構成要素、つまりChatGPTにおけるアプリとは何かについて、1〜2分お話ししてから、実際にアプリの構築に移りたいと思います。
視聴されている方で、まだMCPの概念に馴染みのない方のために説明すると、MCPはツール、アクション、リソース全体にわたって機能を提供し、AIクライアントが様々なアクションと知識を取り込み、読み取りと書き込みの両方の機能でユーザーに代わってアクションを実行できるようにします。
ユーザーがChatGPTに、例えば「トレイルを見つけて」と尋ねた場合、All TrailsアプリがMCPサーバーと通信し、バックエンドからデータを取り込むことから、その場で情報を生成することまで何でも実行できます。そして、ChatGPTがWebコンポーネントをレンダリングするためのツール出力内のURIで応答します。
Webコンポーネントはオプショナルです。バックエンドのみのChatGPTアプリを持つこともできます。でも、最も強力だと思うのは、モデル、MCPサーバーからのデータロジック、そしてChatGPT内でインタラクティブなWebコンポーネント、この3つを組み合わせることです。
Webコンポーネントは、ChatGPT内に読み込まれ、window.openai API機能にアクセスできます。これにより開発者として、没入感のある体験を提供するChatGPT内で様々なことができるようになります。2つタブを移動しましょう。
強調したいことの1つは、私たちが構築したこのフレームワークは、ChatGPT内で動作しますが、オープンプロトコルだということです。誰でもMCPサーバーを持つことができ、AIクライアント内にUIを持つウィジェットランタイムを注入する同じフレームワークを使用して、MCPサーバー上にUIを配置できます。
実際のWebコンポーネントについてもう少し深く掘り下げると、私たちはwindow.openai APIを公開しました。これにより開発者として、ウィジェットテンプレートでこのAPIを呼び出し、コンテキストの更新への反応から状態の更新、ツール結果の受信による何らかのアクションの実行、またはツールを直接呼び出して他の操作を実行することまで、様々なことができます。
これらの機能が何であるかについて、あと数分お話ししてから、先に進めていきます。まだご存じでない方のために、フルスクリーンモードの機能があります。先ほど述べた通りです。また、アプリ申請ガイドラインとポリシーに適合していれば、UI内に好きなものを追加できます。マップビューのレンダリングは、非常に没入感のある体験を作り出す例の1つです。
私たちには、提供しているUIコンポーネントライブラリがあります。このライブストリームの後やチャットでも共有します。利用可能な表示モードオプションのいくつかとしては、ウィジェットをインラインで読み込むことができます。これが最も一般的な体験です。ユーザーがモデルと話し続ける中で、フロー内で取り込まれ、体験に追加的な強化を提供します。
ピクチャー・イン・ピクチャーもあります。これは非常に興味深いもので、ユーザーが関与し続ける中で、何らかのフローティングウィンドウを常に表示しておくことができます。そして、先ほど述べたフルスクリーンもあります。
素晴らしい。実際にアプリ構築のプロセスを見ていく時間だと思います。アプリを構築するプロセスを実際に見ていき、その後Codexの使い方をお見せします。
従来の開発プロセスとAI支援開発
素晴らしい。では、聞いている皆さん全員に開発者として話しかけ、ChatGPTアプリを構築するとはどういうことかをご案内したいと思います。これは今日ほとんどの開発者に存在するプロセスであり、アプリを構築する従来の方法です。
ドキュメントを読んで、API、SDK、例えばクイックスタートなどについて多くのことを学ぶかもしれません。次にGitHubに行って、実際にコードをダウンロードし、いくつかの例も確認するでしょう。私たちが提供したコンポーネントライブラリも参照するかもしれません。これは、人々がすぐに始められるようにし、すでにスタイル設定されたものを使用するのに非常に役立ちます。
そして、リポジトリでコーディングを始めるかもしれません。サンプルをダウンロードし、編集して、ハッキングを始めます。これらすべてのステップ、つまり概念を理解し、コンポーネントを見て、リポジトリに入るという反復プロセスを覚えておく必要があります。そして何日もコーディングします。これは、私たち全員が馴染みのある、長い間続いてきた従来のソフトウェア開発の形式です。また、デプロイメントを修正し、アプリケーションとそのランタイムを管理する必要もあります。
これは素晴らしいことですが、CodexとDocs MCPサーバーを使用したアプリ構築プロセスを見ることで、AIファーストの世界でより速く構築する機会もあると思います。従来の方法で構築すること、つまり読んで、サンプルコードをダウンロードし、情報を取り込むことは、皆さんに引き続きお勧めします。でも同様に、より速く始めたい場合や、一緒に作業してコードペアリングするための本当にスマートで思慮深いパートナーが欲しい場合、Codexはより速く構築するのに役立つ優れたツールです。
この時点で、あともう1つスライドがあります。先ほど述べたDocs MCPサーバーについて、簡単に強調したいと思います。MCPは、AIクライアントが追加情報とコンテキストを持ち、代わりにアクションを実行できるようにします。私たちのDocs MCPサーバーが行うことは、これをCodexに直接読み込むことができ、OpenAIのAPIにアクセスする方法や、コードをスキャフォールドする方法などを、AIが有効な方法で構築する方法に関するすべてのコンテキストを持つことができます。
私たちのMCPサーバーは、OpenAIのコンテンツすべてに基づいています。ですので、私たちのAPIやApps SDKなどを構築できます。でも今日は、これを使ってチャットアプリを構築する方法に焦点を当てます。
Codexを使った実践的なアプリ構築
では、これをお見せできるように切り替えます。ありがとうございます。まだCodexに馴染みのない方のために説明すると、始めるのは非常に簡単です。OpenAI開発者サイトに行き、Codexに移動して概要を確認できます。これがインストール方法です。npmインストールコマンドだけです。今すぐやってみましょう。
ここでターミナルにいます。Codexをインストールします。すでにCodexはインストール済みなので、もう少しパッケージがスキャフォールドされるでしょう。でもほら、Codexをインストールしました。
次に、OpenAI開発者ドキュメント用のMCPサーバーを追加します。再びOpenAI開発者サイトのリソース内にいます。そこにDocs MCPサーバーへのリンクがあります。これはCodexと一緒に使用でき、VS Codeでも使用でき、Cursorでも使用できます。私たちのDocs MCPサーバーは、AIコーディングツールに使用するプラットフォームに関係なく、構築を支援するためにここにあります。
これをコピーして、再びターミナルに入りましょう。ウィンドウをクリアします。そのコマンドを貼り付けます。codex mcp add open developer docs、そしてURLです。素晴らしい。グローバルMCPサーバーを追加しました。これで、Codexと話すたびに、この情報が使えるようになります。
では、agents.mdファイルもこのフォルダにコピーします。今、このフォルダにはこのagents.mdファイルしかありません。このagents.mdファイルが行うことは、OpenAI APIやChats SDKなどで何か作業する必要がある場合は、常にOpenAI開発者ドキュメントMCPサーバーを使用するようにと言うだけです。これにより、Codexに必要なコンテキストが提供され、OpenAI開発者ドキュメントを常に使用することを知ることができます。
Codexをインストールしました。Docs MCPサーバーをインストールしました。では、いくつかコードをスキャフォールドしてみましょう。codexと入力してCodexを起動します。リポジトリやワークスペースでCodexを初めて実行する際は、代わりにアクションを実行できるようにするか、承認を要求するかを有効にする必要があります。許可します。
素晴らしい。Codex内にいます。実行したいモデルを選択できます。私はGPT-5.2 Codexを使用し、デフォルトの中程度の推論レベルにとどまりますが、好みに応じてこれらを上下に調整できます。
では、Codexにピンポンアプリを作ってもらいましょう。ご覧の通り、リポジトリにはagents.mdファイル以外何もありません。「シンプルなUIとMCPサーバーを持つChatGPTアプリを作成してください。ピンポンゲームをプレイできるようにしたいです。パドルを制御するためにカーソルをドラッグできるようにして、コンピューターと対戦できるようにしたいです」
これを今思いついたところで、Codexに与えるコマンドです。この時点で、Codexはこのタスクを実行するのに少し時間がかかります。現在のリポジトリを検査しますが、何も入っていません。その時点で、agents.md指示から、おそらくOpenAI Docs MCPサーバーを使用してこの情報の取り込みを開始する必要があることを理解します。
ここでご覧いただけるように、そのコンテキストを理解しており、最初に行ったことは、開発者ドキュメントMCPサーバーを呼び出して、チャットアプリSDKクイックスタートを探していることです。これは、コードをスキャフォールドし、実際にリポジトリの構築を開始するのに役立ちます。
構築が進む中で、参照しているドキュメントを実際に見ることができます。
その通りです。クイックスタートを見ていて、次にMCPサーバーファイルなどを見ていきます。これは、クイックスタートを読み、ドキュメントを見て、それから進めていくという、すでに現在の開発者フローで行っているプロセスかもしれません。
しかし、Codexを通じて、初期のスキャフォールディングの多くを駆動させることができます。これがバックグラウンドで実行される間、初期ゲームを構築するのに数分かかりますが、ここのドキュメントに戻って、Codexが見ているかもしれないいくつかのコンポーネントを簡単にお見せします。
クイックスタート自体は、非常にシンプルなアプリを構築するために必要なすべてを含んでいます。シンプルなHTMLファイルと基本的なMCPサーバーが示されています。この例では、node MCPサーバーパッケージを使用して、独自のMCPサーバーの構築を開始しています。シンプルなツール登録があり、応答するリソースと、そのサーバーを実行する方法もあります。
これが、Codex MCPサーバーが今まさに取り込んで構築しているものです。
質問がありました。誰かがハローワールドWebコンポーネントの例があるかどうか尋ねていて、パッケージングに最も苦労しているそうです。これはCodexを使って助けられることでしょうか?
素晴らしい質問ですね。これに対処する2つのことがあると思います。1つは、クイックスタートを見てください。これが基本的にハローワールドです。GitHubには完全な例のリポジトリもあります。最後にリンクを示してお見せします。
でも、最も簡単に始めるには、Webコンポーネントと MCPサーバーの両方を実行して、非常にシンプルなハローワールドアプリを構築できます。今日お見せしたこととタスクが完了したところですが、自分でダウンロードして、それらの初期ステップを実行したくない場合は、実際にCodexにハローワールドをスキャフォールドするよう依頼できます。
では、Codexがここで何をしたか見てみましょう。ピンポンWebコンポーネントとMCPサーバーを持つ最小限のChatGPTアプリを構築しました。ここでリポジトリを見て、何が入っているか確認できます。私がすでに作成したagents.mdがあり、package.json、HTMLがあるpublic、そしてサーバーがあります。
実際にこのMCPサーバーを実行してみましょう。この別のタブに行きます。ここに作成されたファイルが見えます。npm installでパッケージをインストールします。npm startでこのサーバーを実行します。
おっと、すでにバックグラウンドでサーバーが動いていますね。サーバーをlocalhostの8787から8000に更新してもらいましょう。これは良いライブデバッグです。すでにポートが動いているので、そこに行ってそれを停止する代わりに、Codexにサーバーを更新するよう伝えます。
では、このウィンドウに戻って、再実行しましょう。npm startを実行します。再インストールが必要ですね。実際に他のサーバーをすぐにオフにします。
では、画面共有に戻ります。サーバーがここで動いています。localhost 8787をこのエンドポイントにトンネルします。ChatGPTに入って、このアプリを追加します。設定に行き、アプリに移動します。アプリを作成して、これをピンポンビルドアワーと呼びましょう。
このMCPサーバーを追加します。/mcpを追加します。これは、ngrokトンネルで実行されている実際のMCPサーバーを参照する必要があるからです。認証なしにして、このアプリを許可します。アプリを作成しましょう。
では、このアプリをChatGPTに追加します。ピンポンビルドアワー、「試合開始」と言います。
これは今作成されたばかりの非常に基本的なピンポンアプリです。おっと、パドルをドラッグする必要があるようですね。これは結構楽しいです。でも、ほんの数回のプロンプトで、今コンピューターと対戦しています。非常に基本的なピンポンアプリのコードをスキャフォールドできました。これは本当に楽しいです。
でも、さらに楽しいのは、マルチプレイヤー機能を持ち、モデルが情報を提供できるAIインサイトがあり、チャットにいるクリスティンのような友人と一緒にプレイできるリアルタイムでこれを行うことです。
準備できました。
これはCodexで生成したシンプルなアプリです。MCPサーバー用にngrokトンネルを実行していて、Codexがコードをスキャフォールドしたところです。ここで見ることができます。これが実行されているコードです。
でも、今やることは、このサーバーをオフにして、フルスクリーンで構築したアプリに移ります。ライブでやっているので、お付き合いください。では、ここに入ります。
これは、Codexを使って数日間、あるいは数時間かけて作業してきたピンポンアプリです。このサーバーを起動します。実際には古いサーバーをオフにする必要があります。それは完了しました。新しいトンネルを作成します。
おっと、トンネルはすでにライブです。この時点で、ここに行けるはずです。スコア、ロビー、そしてマルチプレイヤーの機能のような機能を追加するのに、数時間かけました。ライブでやってみましょう。うまくいかなければ、デバッグして動作させます。でも、新しい試合をしましょう。
新しい試合を依頼します。この時点で、クリスティン、あなたも同じことができます。新しい試合です。クリスティンの画面が右側で、私のが左側です。数時間かけて作業したMCPサーバーとピンポンアプリを実行しています。
これはアプリを取って、「試合を作成」します。コードを取ります。C6C2E9です。「試合に参加」します。彼女が試合に参加をヒットすると、ゲームがすぐに動き出すはずです。
私は左の画面だけを動かしています。私のマウスが見えます。クリスティンは右側でプレイしています。おっと、もう1点獲得されました。
リアルタイムマルチプレイヤーゲームのデモ
フルゲームをプレイします。数時間かけてこれを構築したので、皆さんに実際の動作を見てもらいたいです。でもポイントは、これがChatGPT内で初めてのリアルタイムマルチプレイヤーアプリだということです。少なくとも私が見た中では。そして、それはとても楽しいことです。
ゲームでもある体験を作ることができますし、これがライブエディターのようなビジネスワークフローで行われることも想像できます。でもゲームは本当に楽しい例です。友達と一緒にプレイできます。クリスティンに何点か取らせてあげます。彼女は実際ピンポンが本当に上手だからです。
私たちはプレイして、彼女は私を負かしました。
絶対に。
ブーム、彼女が得点します。7点まで行きます。今は、ボールを通過させているだけです。でも、もう1回ラリーして、次のショットをミスします。ブーム。7点まで行きましょう。
ゲームオーバーです。私の負けです。クリスティンの画面には彼女が勝ったと表示されています。本当に楽しいです。でも、さらに良いこと、そしてこれがChatGPT内で行うのが強力な理由は、モデルへのアクセスがすぐそこにあるからです。
ゲーム後分析用に別のツールコールを追加で公開しました。それが興味深いと思います。魅力的で没入感のある体験を作ることができますが、モデルを使用して、そのデータを取得してより多くの情報を提供することもできます。
「ゲーム後の統計と分析、左側」と依頼します。これは私が実装した方法です。クリスティンも同じことができます。「ゲーム後の統計と分析、右側」と言います。
彼女がそれをしている間に、ウィジェット内に前のゲームの統計が読み込まれているのがすでに見えます。3対7で負けました。平均ラリーは4ヒットでした。最長ラリーは7回で、ショットの約30%しか勝てませんでした。
それでも負けました。そして、いくつかのヒントをくれています。最初のリターンで防御を優先すべきだと。それは理にかなっています。デモのためにゲームを終わらせるために、最初のショットでボールを得点させていましたから。
でも、それは理解しているコンテキストで、ゲームを改善する方法は、実際にそれらの最初のヒットを防御することだと知らせてくれています。クリスティンが何を得るか見てみましょう。
私の側で同じプロンプトを書いて、右側にいることを明確にします。これが読み込まれている間に、コーリー、簡単に指摘しておきますが、私たちは両方とも開発者モードにいます。
素晴らしい質問です。このローカルで実行されているアプリを読み込むために、開発者モードに入る必要がありました。これにより、サイドローディングと呼ばれるアプリを作成できました。ローカルで実行していて、ChatGPT内でレンダリングしています。
アプリマーケットプレイスにあるプロダクションアプリを使用するために、開発者モードにいる必要はありません。でも、今作成したこのピンポンアプリのために、ローカルで実行していて、開発者モードにいます。
あなたのスコアは今7対3と表示されています。勝率は70%でした。あなたがよくやったことは、一貫性、バランスの取れた交換です。さらに良くするために、ペースと配置を混ぜ始めることができます。超上級プレイヤーになるために。
これはかなり正確だと思います。
そうですね。でも、ここで本当に楽しいのは、2台の異なるコンピューターでプレイしたことです。世界中のどの友達とでもプレイできます。誰かに私のMCPサーバーを送ることもできますし、他の誰かがプレイすることもできます。または、このアプリをマーケットプレイスに公開することもできます。それは実際に行います。そうすれば、誰でもChatGPT内でピンポンをプレイして、より上手にプレイする方法についてのゲーム後分析を得ることができます。
本当に楽しいです。これは、リアルタイム統計、マルチターン機能などのより多くの機能を持つアプリの例です。そして、Codexを使用して、そこに到達するためにより速く反復することができます。
共有を停止して、プレゼンテーションに戻ります。ここが、私たちが中断した場所で、OpenAI Docs MCPサーバーの実際の動作を見たところです。ここに、今通ったことの簡単な要約があります。
ベストプラクティスとガイドライン
developers.openai.com/appsのApps Docサイトをぜひチェックしてください。そこには、より深く学ぶためのすべてのリソースがあります。または、Codexにそのコンテンツを説明してもらうこともできます。
今日のプレゼンテーションの一部は、様々なリソースとツールのウォークスルーだけでなく、今日のビルダーがどのように構築するかというパラダイムについてもです。複雑で技術的な情報を解析し、あなたにとって役立つ方法で説明するために、特にCodexのようなAIを使用することは本当に本当に役立ちます。
MCPサーバーはどのように機能するのか、ツールコールをどのように構造化すべきか、UIコンポーネントの構築についてどう考えるべきか、フルスクリーンを有効にすることについてどう考えるべきか、などを尋ねることができます。コーディングツールとしてだけでなく、学習ツールとしても使用できます。あなたがより能力を持ち、世界で素晴らしい体験を提供する構築をするために。
また、ユーザーの問題を解決するアプリが際立っています。まだこれについて完全には触れていませんが、次の数スライドで触れます。アプリを構築することの一部は、ただ構築するために構築することではありません。人々の問題を本当に解決するものや、何らかの有用性を提供するもののために構築することです。
ですので、UIとモデルの両方が、どのようにコンテキストデータを取り込むか、またはユーザーのフロー内のターンが、どのように本当に豊かな体験を提供するかについて考えることをお勧めします。ゲーム後分析のようなこと、All Trailsプラットフォームからのライブデータを取り込むようなこと。そう、既存のフローに本当に有用性をどのように持ち込めるかについて考えてください。
最後になりますが、CodexとDocs MCPサーバーの使い方についてお話ししました。
これは簡単なスライドです。コーリーがライブでこれを行うのを見ましたが、スクリーンショットを撮って、開発者モードをオンにして、アプリを読み込む方法を正確に知っておいてください。そうすれば、自分のゲームを作って友達とプレイできます。
素晴らしい。時間を簡単にチェックすると、アプリを反復するためのベストプラクティスを見ていく時間があります。これらのさまざまなトピックすべてについて詳細には触れませんが、UI/UXガイドラインといくつかの他の点について触れます。より深く学ぶために、ドキュメントを見ることを強くお勧めします。各トピックについての情報があります。
UXガイドラインについて、私が述べたことのいくつかは、ChatGPTとは別に構築した既存のアプリプラットフォームがすでにある場合、今日のユーザー体験に価値をどのように抽出するかを考えるべきだということです。その時点で、喜ばしい体験を提供し、自分の体験全体を移植したり、本当に深いマルチページネーションや、その体験の中に閉じ込めておくようなものを追加したりするのとは違います。
それらは素晴らしいですが、必ずしも優れたものがどのように見えるかではありません。なぜなら、ChatGPT内のアプリの力は、モデル、UI、そしてMCPサーバー間の相互作用にあると思うからです。
素晴らしい。ここのスクリーンショットを見ると、これはUIガイドラインの例です。デザイン原則について説明する完全なページがありますが、適切なフォントサイズを使用するような小さなこと、モバイルについて考えることなど、Web開発やネイティブ開発に関する伝統的なことの多くは、ChatGPT内でアプリを構築することを考える際にも持続します。でも、より詳細な情報については、そこのドキュメントを読んでください。
通話の最初に述べたApps SDK UIコンポーネントライブラリがあります。これのURLを示します。あるいは、Googleを使ったり、Codexを使って検索したりできます。これは、アプリをスタイル設定するためのあらかじめ構築されたコンポーネントです。
そのパッケージをインストールしてから、Codexにそれらの同じコンポーネントを使用してアプリを構築するよう伝えることさえできます。これは、アプリを洗練された状態にして、アプリ申請の準備を整えるのに本当に役立つ方法です。
これらのUX原則のいくつかをカバーすると、移植ではなく抽出すること、ChatGPTをホームとして扱うことです。全体的な体験を所有していますが、真にユニークで会話的エントリー用に設計された体験をカスタマイズし、作成する能力があります。
時にはユーザーは常に正確であるとは限りません。MCPサーバーはそのコンテキストを受け取り、本当にアクションを実行したいのか、それとも、より多くの情報を求めるべきだとモデルに知らせたいのかを決定できます。その意図に基づいて行動する能力があります。あるいは、すぐに体験を提供することもできます。
これは、ChatGPTアプリを構築することを考える上で重要な部分だと思います。さまざまなユースケースと、人々がプラットフォームとアプリにどのように関与することを決定するかについて考えることです。
そして、アプリを価値あるものにするものは何か?これは主観的であり、私たちはそこにあるすべてのベストケースを探しています。でも、私たちが強い信念を持っていることのいくつかは、アプリで少なくとも1つのことをより良くすることです。それは、会話とコンテキスト、マルチターン対話を活用できます。
初期のUIを読み込んで、情報を提供し、その後絞り込みを行います。フィルタリングするか、代わりにアクションを実行するよう伝えます。考えることができる3つの柱は、これは何かをもっと知るのに役立つか?MCPでアクションを実行することで、何かをもっと行うのに役立つか?または、何かをより良く、より視覚的に魅力的な方法で見せてくれるか?です。
ここにいくつかの追加リソースがあります。GitHubの例があります。その中の1つは、キッチンシンクです。これは非常にシンプルで、超スタイル設定されたChatGPTアプリの例ではありませんが、UI内で何かを行うことを可能にするwindow.openaiのすべての異なる機能を実装しています。
状態とどのように相互作用できるか、フルスクリーンモード、ピクチャー・イン・ピクチャーをどのように開くか、外部リンクを開く方法を示しています。そして、それらの例を取って、今日やりたいと思う価値ある体験だと思えば、自分のアプリに実装できます。
ここで、今日どのように相互作用するか疑問に思っているかもしれない体験のバケットである、いくつかのアプリパターンについて簡単に述べます。最近、アプリがメモリとどのように相互作用するかのコントロールを有効にしました。
開発者として、メモリに直接アクセスすることは決してありません。でも、モデルが行うことは、すみません、ChatGPTアプリをダウンロードしたとき、現在、ユーザーにとってメモリがアプリと相互作用することを許可するかどうかを尋ねるトグルがあります。
有効にしている場合、モデルは、関連性がある場合にChatGPTと相互作用するときと同様に、それらを参照し、MCPサーバーへのツールコールを行います。データは渡されませんが、アクションを実行するとき、MCPサーバーへのツールコールを行うときに、そのコンテキストを持ちます。また、許可しないこともでき、その場合、アプリはチャット会話内に存在するコンテキストのみで読み込まれます。
収益化については、今日これを行ういくつかの異なる方法があります。初期の例の1つは、アプリに認証フローを持たせることができるということです。ユーザーがアプリをインストールして接続した後、プラットフォームにログインすることを要求でき、自分のサイトで従来のサインアップフローを持つことで収益化できます。
これを行うより ネイティブな方法は、アプリ内にチェックアウトのような体験を追加するか、アプリケーションへの外部リンクを開くボタンを追加することです。そして従来、私たちが良いパラダイムとして見てきたのは、チェックアウトの最終状態のようなものへのディープリンクを人々に送ることができるということです。
そして、外部チェックアウトウィンドウで実際に提供しているものです。OpenAIの機能はリダイレクトURLです。サイトやプラットフォームでそのアクションを完了した後、ユーザーをChatGPTにネイティブに戻して、そこで体験を続けることができます。
最後になりますが、Agent Commerce Protocolとインスタントチェックアウトは、より多くのアプリ、開発者、ビルダーに公開しようとしているものです。ですので、チェックアウトを必要としない、ネイティブな購入体験を実際にできるように本当に一生懸命働いています。
でも今日は、アプリに収益化を追加する方法として、最初の2つのオプションを探求することをお勧めします。多くの人が尋ねているトピックであることは知っているからです。
まとめと質問対応
では、今日これまでにカバーしたすべての要約をしましょう。ユーザーとモデルの両方のために構築することを考えるべきです。新しい開発方法のためのパラダイム、ベストプラクティス、ベストな例のアプリを設定する非常にユニークな機会があると思います。それは単にコードとUIだけではありません。
モデル、MCPサーバーロジック、Webコンポーネントの3つすべてです。単一のプロンプトでAIツールを使ってより速く反復できます。Codexを使用して、スキャフォールドされたコードを生成しました。そして、非常に基本的なアプリを手に入れ、Docs MCPサーバーのようなものを使用して、AIファーストの方法でそのすべてのコンテキストを読み込み、構築と反復を開始しながら、反復を続けることができます。
最後になりますが、利用可能な機能を活用してください。フルスクリーンモードであっても、リアルタイムで何かをしようとしても、創造的になって、何を構築できるかを考えてください。皆さんがChatGPTで何を構築するかを見られることを本当に楽しみにしています。
素晴らしい。Q&Aの時間があります。いくつかフラグを立てたので、1つをあらかじめ読み込んでおきました。それから、チャットからいくつか受け付けます。最初の質問はこちらです。OpenAIはMCPとどのように互換性がありますか?今日はMCPについて多く話しました。
これは素晴らしい質問です。MCPをさまざまな形で述べてきました。レベル設定のために、ChatGPT内のアプリ用のMCPサーバーがあります。私たち自身のMCPサーバー、Docs MCPサーバーもあります。これは、Codexや、Cursor、VS CodeなどのさまざまなAIツールにコンテキストとして読み込むことができます。
また、プラットフォームとツール、API、Apps SDKなどについても考えると、それらはすべてMCPと互換性があります。ですので、フライトデータ用や、特注の製品情報などの異なるMCPサーバーを読み込むことができます。プラットフォームとツールに読み込んで、外部ロジックと機能を使って独自のAI体験を構築できます。
次の質問は、ローカル開発体験をより良くするために推奨するツールはありますか?
素晴らしい質問です。ここで活用できる多くの異なるものがあります。すぐに思い浮かぶ2つは、ローカルサーバーを実行しますよね。MCPサーバーを実行するローカルサーバーがあります。開発モードでChatGPT内で実行するには、特にそれをトンネルする必要があります。これは、コンピューター上で実行されているローカルプライベートMCPサーバーを指すパブリックURLです。
私はngrokを使用しました。Cloudflareを使ってトンネルすることもできます。簡単で速いです。単一のnpm installコマンドで、それらのトンネルを実際に作成するための単一のコマンドです。
でも、プロダクションについて考えるとき、MCPサーバーをどこかでホストする必要があります。開発モード用、またはアプリをレビューしてから、人々がアプリに接続してインストールするときに体験として読み込む、パブリックアプリ申請フロー用にChatGPTに提供できるURLで。
多くの異なるホスティングサービスがあります。自分で持っていない場合は、それらを探求することをお勧めします。認証も大きなトピックです。自分で認証を実装できますが、素晴らしい認証プロバイダーがあります。サイトにリストされているものもあります。より シームレスな方法で認証を実装する方法については、それらを探求してください。
これは今入ってきたものです。アプリを構築する際、デザインをより洗練させるために他の色を使用できますか?デザインシステムにあるものだけに制限されていますか?
素晴らしい質問です。ほとんどの場合、色やフォントなどの面で、適切と思われるようにデザインするコントロールと自由があります。ビジュアルガイドラインにいくつかのものがあります。例えば、許可されていないことを指摘する場合があるので、それらを注意深くレビューすることをお勧めします。でも、ほとんどの場合、デザインに合ったUIを構築できるはずです。
ただし、UIコンポーネントは現在すでにあらかじめスタイル設定されているので、動作を変更するためのさまざまなパラメータとコントロールがありますが、それらはほとんど特定の方法で構築されています。でも、必要に応じてアプリをデザインできます。アプリレビュー中に、ユーザーにとってうまく機能する体験に特に適合していないものがあれば、人々に知らせます。
これは、Adobe とChatGPTをデモしていたときだと思います。誰かが尋ねました。「そのアプリを使用するには、Adobeのアカウントが必要ですか?」
素晴らしい質問です。そのアプリについては、サインインする必要がありました。サインインしたとき、一般的なサインアップボタンがあります。ですので、良いパラダイムだと思うのは、無料のユーザー体験を作りたいが、何らかの形の認証を持ちたい場合、サインインを提供する一般的なプロバイダーを使用できるということです。それにより、アカウントを作成してから、直接体験に入ることができます。
でも、アプリを使用して体験すると、プランをアップグレードする必要があるかもしれません。サインインフローが必要で、すでにサインインしてアプリを実行していました。
例えばAll Trailsは、サインインを必要とせず、単にアプリと話すことでその情報を取り込んでUIをレンダリングします。
素晴らしい。これはすでに回答されたと思います。OpenAIは、ショーケースしたいカテゴリーに関して何か優先事項はありますか?
それは難しい質問です。アプリディレクトリには、既存のライフスタイルとプロダクションカテゴリーがあります。時間とともに進化させていきますが、現時点では、より目立つ形で取り上げている特定のカテゴリーを公開では共有していません。でも、より多くのアプリを承認してエコシステムにリリースし始めると、より具体的なカテゴリーを構築していきます。
これまでのところは以上だと思います。では、いくつかのリソースで本当に簡単にまとめます。ここにいくつかのリンクがあります。繰り返しますが、これらを送ります。最初のものはApps SDKです。素晴らしいChatGPTアプリを作るものは何か?これは実際、今日プレゼンしているコーリーによって書かれた完全なブログでした。
ぜひ要約としてチェックしてください。追加のリソース、ここにUIガイドラインがあります。UI に関してチャットで見る多くの質問に答えることができます。また、UIコンポーネントへのリンクもあります。最後になりますが、ビルドリポジトリ、チャットで最後の瞬間に入ってきたこのピンポンアプリに関するいくつかの質問、どうプレイできるか、そして実際にどう反復して自分のものにできるかも見ました。
ぜひチェックしてください。そして、より多くのBuild Hourに戻ってきてください。2月18日には、プロンプトキャッシングについて話します。そして2月24日には、エージェント機能のために戻ってきます。
Docs MCPサーバーとCodexについて今日見たすべてのものは、実際にこれらの今後のBuild Hourにも適用可能です。ですので、ホームページをチェックして、オンデマンドでOpenAI YouTubeチャンネルで私たちに会いに来てください。参加してくれて、再びありがとうございました。また次回お会いしましょう。
皆さん、ありがとうございました。
コメント