OpenAIのAgentKitを使用したエージェント開発のライブデモンストレーション。DevDayのウェブサイトに統合される対話型エージェントを、わずか8分以内でビジュアルワークフロービルダーを用いて構築する過程を実演している。コーディングなしでノードをビジュアルに配置し、専門化されたエージェント、ファイル検索ツール、カスタムウィジェット、PII保護のためのガードレールを組み込み、最終的にプロダクション環境へのデプロイまでを完遂する。このデモは、AgentKitがいかに開発者のエージェント構築を加速させるかを具体的に示すものである。
AgentKitによる高速エージェント開発
ありがとうございます、サム。皆さん、こんにちは。私はクリスティーナと申しまして、AgentKitを構築しているチームで働いています。今日は、AgentKitがどのように開発者がこれまで以上に速くエージェントを作成できるようにするのかをお見せしたいと思います。
皆さんはすでに私たちのDevDayウェブサイトをご覧になったかもしれません。こちらが皆さん全員がアクセスできるサイトで、今日のスケジュールに関するすべてが掲載されています。しかし今のところ、これは単なる静的なページです。もしこれが実際に皆さんが一日をナビゲートするのを助け、最も関連性の高いセッションを教えてくれたらどうでしょうか。私たちはOpenAIです。DevDayのウェブサイトにAIが必要です。
ですから、これから一緒に構築していくのは、AgentKitによって動作するエージェントで、このサイトの中に直接デプロイします。そして、これを面白くするために、私は自分自身に8分という時間を与えて、ここで皆さんの目の前でエージェントを構築してデプロイします。エージェントを構築することがどれほど難しいか、皆さんは今聞いたばかりです。ですから、これは少し挑戦になります。そして、私を正直に保つために今からタイマーをスタートさせます。タイマーが動いています。
ビジュアルワークフローの構築開始
それでは、OpenAIプラットフォームのワークフロービルダーから始めます。コードから始めるのではなく、実際にノードを視覚的に配線できます。エージェントビルダーは、私たち自身がエージェントを構築する中で学んだ共通のパターンを使用して、非常に複雑なワークフローを簡単かつ視覚的にモデル化するのを助けてくれます。
ここの左側には、すでに共通の構成要素が抽出されています。例えば、ファイル検索やMCPのようなツール、ガードレール、ヒューマンインザループ、その他のロジカルノードなどです。今日は、2つの専門化されたエージェントを使用するワークフローを構築する予定です。
1つ目はセッションエージェントで、スケジュールに関する情報を返します。2つ目はより汎用的な開発情報エージェントです。まずは、メッセージのタイプをルーティングして分類するための分類エージェントから始めます。特定のセッションについて尋ねているのか、それともより一般的なことについて尋ねているのかを判断します。
そして、その分類に基づいて動作をルーティングするために、if-elseノードを追加しました。次に、セッションエージェントを作成します。ここで、エージェントノードをドラッグアンドドロップします。これをセッションエージェントと呼びます。セッションに関する情報を取得するためのコンテキストを与えます。そして、ここに様々なツールを追加できます。
ツールとウィジェットの統合
今日はすでにセッションに関するすべての情報を含むドキュメントを持っています。ですから、単純にそれをドロップします。これをセッションと呼んで添付します。これで、このエージェントは私の質問に答えるために必要なすべての情報を持っています。しかし、スケジュールを表示することは楽しく視覚的に興味深いものであるべきで、単なるプレーンテキストではありません。ですから、ウィジェットも作成します。
ウィジェットビルダーに移動します。ここでは、ゼロからウィジェットを作成することもできます。ギャラリーを閲覧して他のウィジェットについて学び、それらを再利用することもできます。しかし今日は、実はこのユースケースのためにすでにウィジェットを設計しています。この場合、これはフローのためのオンボーディングセッションウィジェットです。フローは会場周辺で見かけるDevDayの友達の一人で、ゴールデンゲートパークで101オンボーディングセッションを開催しています。
ですから、これを単純にダウンロードして、エージェントに戻り、先ほど作成したセッションエージェントの出力フォーマットとして添付します。あ、ダウンロードをクリックしていなかったようです。戻って実際にダウンロードボタンをクリックします。できました。素晴らしい。
それをドロップします。プレビューして、正しいウィジェットを追加したことを確認し、すべて準備ができているように見えます。これでセッションエージェントは完成です。次に、一般的なDevDayエージェントを作成します。再びエージェントノードをドラッグします。これをDevDayエージェントと呼びます。再び、何をしているかについてのコンテキストを与えます。
そして、今日のブランドに本当に合わせるために、フローのスタイルで話すようにします。また、ファイルを追加します。その日に関するすべての情報を含むファイルがあります。これをDevDayと呼びます。添付します。このエージェントも準備完了です。そして、ここに接続します。
セキュリティとガードレールの追加
まだ数分あるようです。ですから、事前構築されたガードレールの1つを使用して、追加のセキュリティを追加しましょう。エージェントを構築する際の最も重要なことの1つは、それらを信頼できることです。ガードレールは、ハルシネーションに対する保護、モデレーションの追加、PIIのブロックなどを行い、その自信を持たせてくれます。
この場合、すでにいくつかの事前構築されたガードレールがあります。PIIに対するものを1つオンにします。そして、簡単に動作を確認できるように、名前も含めます。フローがPIIに対して本当に保護されるように、これをワークフローの最初に接続します。そして、この情報が渡された場合を処理するために、追加のエージェントを追加します。
再び、一貫性を保つためにフローのスタイルで話すようにします。そして、機密情報を含む質問には対応できないことを思い出させ、コンテキストを削除します。素晴らしい。このワークフローは準備ができたと思います。また、エンドユーザーに何が表示されるかを決定するために出力を設定することもできます。
この場合、内部的なものであればファイル検索のソースをオフにすることもできます。これで完了だと思います。テストしてみましょう。エージェントビルダーから直接プレビューできます。
テストと検証
ここで、エージェントの構築について学ぶためにどのセッションに参加すべきか尋ねることができます。そして、このメッセージが、先ほど作成したワークフローを通って移動していくのが見えます。ガードレールをチェックし、意図を分類し、追加したばかりのセッションのファイルから情報を引き出します。
適切なセッションを見つけ、追加したウィジェットを使用します。そして、11時15分のジェームズとローハンによる「大規模なエージェントのオーケストレーション」が、これについてもっと学ぶために私が参加すべき最高のセッションだと判断します。そして、いくつかのリビットが見えます。なぜなら、これは実際にフローが私に話しかけ、リビットしているからです。
オーケー、このエージェントは良さそうです。時間に注意する必要があります。私たちは、ツールを使用していくつかの専門化されたエージェントを構築しました。ガードレールを追加しました。ウィジェットを使用してカスタマイズし、プレビューでワークフローをテストしました。
まだやっていないことの1つは、完全な評価セットです。これもエージェントビルダーから直接行うことができ、公開前にすべてが期待通りに動作することを確認できます。しかし今、巨大な時計が私を追いかけており、DevDayが待っています。では、これを公開しましょう。
デプロイと統合
ここで公開をクリックします。これをask frogeと呼びます。公開をクリックします。これで、直接実行できるワークフローIDを持つ、完全にデプロイされた公開済みのプロダクション環境のエージェントが完成しました。右側には、自分の環境、自分のサーバーでこれを実行したい場合のコードエクスポートがあります。
しかし、これはかなりの量のコードを書く必要があることがわかります。ですから、作成したばかりのワークフローIDを使用することにして、サイトに移動します。DevDayサイトで、まず、作成したばかりのワークフローを使用してChatkitセッションを作成します。そのワークフローIDを単純にドロップします。
自分のサーバーで作成したばかりのクライアントシークレットを使用して、Chatkit Reactコンポーネントを追加します。そして、これを本当にフローをテーマにするために、視覚的なカスタマイズも追加します。この場合、ask frogeと呼ばれます。プレースホルダーでリビットし続けます。そして、フロー専用の色とスターターのプロンプトを持ちます。
このフローチャットをボトムシートに追加するので、ページの下部から上がってきます。そして最後に、サイトの上部にask frogeへのリンクを追加して、ウェブサイトの最前面に配置します。では、サイトに戻りましょう。できました。サイトの上部にask frogeがあります。試してみましょう。
エージェントの構築について学ぶためにどのセッションに参加すべきですか?そして再び、これは作成したばかりのまったく同じワークフローを実行しており、ガードレールをチェックし、メッセージを分類し、ファイル検索のツールから引き出し、デザインしたウィジェットを使用し、そして再び大規模なエージェントのオーケストレーションが私が参加すべき適切なセッションであると判断し、フローのスタイルでリビットし続けます。
完成と今後の展開
オーケー、素晴らしい。やりました。エージェントの準備ができました。時計を止めることができます。49秒を残してエージェントの準備ができました。そして、ビジュアルビルダーで直接このエージェントを反復し続け、コードの変更を一切行わずにこれらの変更をサイトに直接デプロイすることもできます。
これには、新しいツールの追加、他のユースケースのための新しいウィジェットの追加、新しいガードレールの追加が含まれ、ウェブサイトで直接アクションを実行するためにクライアント側のツールに接続することさえできます。
ですから、わずか数分で、エージェントワークフローを視覚的に設計しました。いくつかのツールとウィジェットを追加しました。プレビューし、デプロイし、テストし、そして今、皆さん全員がそれを使用できます。これは実際に今、皆さんのDevDayサイトでライブになっています。バッジをタップすれば、それを見て使用でき、皆さんにとって最適なセッションを見つけることができるはずです。
ですから、私たちはそれを使用し、フローに会い、また皆さんがエージェントを使用して構築できる新しい体験のすべてを見ることを楽しみにしています。ありがとうございました。サムに戻します。
コメント