先日のOpenAI DevDay 2025でAgent Builderと共に発表されたのがWidget Builderです。Widget Builderを使うことでチャット上に表示できるウィジェットを簡単に作成できます。作成したウィジェットはAgent Builderで作成するエージェントの出力に設定することでエージェントをリッチにできます。
Widget Builder
起動方法
Agent BuilderでAgentノードを作成し、Output formatでWidgetを選択します。+Widget ボタンをクリックするとAdd widget ポップアップが表示されます。
Create ボタンをクリックすることでWidget Builderが起動します。
ウィジェットの作り方
プロンプトに作りたいウィジェットの説明を入力して実行すると自動で作ってくれます。生成AIのプロンプトと同じで具体的に説明するほどイメージに近いウィジェットが生成されると思います。
ウィジェットに表示したい項目の項目名を具体的に記述するのがコツです。ここで指定した項目名はAgent Builderの後続処理で使用できます。
以下のスクリーンショットではフライト計画を表示するウィジェットを作成する例で便名や出発と到着の情報を表示するように指示をしています。
以下が、作成されたウィジェットです。簡単にモダンなウィジェットを作成できます！
ウィジェットの編集
作成されたウィジェットは編集したり、表示するデータを変えてイメージを確認できます。
- コード表示: ウィジェットのコードを編集できます
{hoge}のように波かっこで囲まれている部分はデータのプレースフォルダーです - プレビュー表示: コードやデータを編集してリアルタイムに見た目を確認できます
月のアイコンでダークモードに切り替えることができます - データ: 表示するデータを編集できます
+ ボタンでタブを追加することでデータを追加できます
ウィジェットのダウンロード
ウィジェットが完成したら右上の Download ボタンでダウンロードします。ダウンロードしたファイルをAgentノードにアップロードすることでAgentノードの出力として設定できます。
Agentノードへの設定
アップロード
Add widget ポップアップの Upload ボタンをクリックしてダウンロードした .widgetファイルをアップロードします。
動作確認
Agent BuilderのPreviewで動作確認を行うと、ウィジェットを使ってAgentノードの出力が表示されます。
後続にAgentノードを接続するとWidget Builderのプロンプトに入力した項目を使用できることが確認できます。ウィジェットの出力項目をエージェントが判断し出力項目を生成してくれることが分かります。
トラブルシューティング
ウィジェットを追加して動かすと以下のエラーが発生することがあります。
Error:
Workflow failed: Error code: 400 - {'error': {'message': "Invalid 'text.format.name': empty string. Expected a string with minimum length 1, but got an empty string instead.", 'type': 'invalid_request_error', 'param': 'text.format.name', 'code': 'empty_string'}}. (code: empty_string)これはnameが入力されていないという意味のメッセージです。どうやらnameが日本語になっていると動かないようです。ダウンロードした.widgetファイルにはnameは設定されており、アップロード時もエラーにならないのに動かしてみると動きません。Widget Builderでウィジェット名を修正するか、.widgetファイルを開いてnameを修正してアップロードし直せば動かすことができます。
まとめ
今回はWidget Builderについて解説しました。テキストやJSONだけのやり取りだと味気ないですが、ウィジェットを使うことでリッチな表現が可能になります。Agent BuilderとWidget Builderを使えばリッチなエージェントを簡単に構築できます。皆さんもウィジェットを駆使して使いやすいエージェントを構築してみて下さい。
この記事を書いた人
