OpenAIの「AgentKit」を使うと、ノーコードの画面で作ったAIエージェントのワークフローを、自分のWebサイトのチャット画面に組み込んで公開できます。Agent Builderで流れを作り、公式のChatKitスターターで手元のパソコンで動かし、GitHubとVercelでインターネットに出す、という一連の作業が講座の主題でした。
2025年10月16日のProcevoの講座では、講師のひろささんがAgentKitの実演を担当し、KEITOが進行を務めました。
セミナー開催レポートブログ
OpenAI AgentKitの使い方｜BuilderからVercel公開まで
今後のセミナー予定
OpenAI AgentKitとは？
AgentKitは、OpenAIが2025年10月に発表した、AIエージェントを作って組み込むための道具一式です。中心になるのは次の2つです。
- Agent Builder：ノードをつないでAIエージェントのワークフローを作る画面。Difyのようなワークフロー型のツールです
- ChatKit：作ったワークフローを、Webサイトに埋め込めるチャット画面として表示する仕組み
講座では、Difyより余計なものが入っていないぶんコードを読み書きしやすく、Claude Codeなどで画面を作り込みやすい点が紹介されました。また、OpenAIの公式ツールであることは、企業に導入を提案するときの説明のしやすさにもつながると指摘されました（公式：AgentKit（https://openai.com/index/introducing-agentkit/））。
始める前に何を準備する？
講座で示された準備は次のとおりです。
- OpenAIのAPIキーと課金設定：これがないとワークフローが動きません
- GitHubのアカウント：ソースコードを置く場所です
- Vercelのアカウント：Webに公開するためのサービスです。手元のパソコンで動かすだけなら不要です
- Node.js：プログラムの実行環境です。Claude Codeをインストールしたことがあれば、すでに入っていることが多いとされました
- ターミナルとエディター：VS CodeやCursorなど
インストール方法が分からないときは、ChatGPTなどのAIに「Node.jsのインストール方法を教えて」と聞けば、手順と公式URLを教えてくれると紹介されました。
Agent Builderでワークフローはどう作る？
最小のワークフローは、「Start（開始）」→「Agent」→「End（終了）」の3つのノードをつなぐだけで動きます。講座のデモでは、間に「User approval（ユーザーの承認）」ノードを入れ、エージェントを起動するかどうかをユーザーに選ばせる例が作られました。
Agentノードで主に設定する項目は次のとおりです。
- Instructions：AIへの指示（システムプロンプト）です。指示文を自動で作る機能もあります
- Include chat history：これまでの会話を覚えさせるかどうか。基本はオンで問題ないとされました
- Model：使うモデルです
- Reasoning effort：推論モデルがどれくらいじっくり考えるかの設定です
- Tools：Web検索やMCPサーバーなど、エージェントに使わせる道具です
- Output format：テキストで返すか、Widget（ボタンや画像の入ったUI部品）で返すかを選べます
GPT-5を選ぶときの注意
講座開催時（2025年10月）には、GPT-5を使うにはOpenAIの組織の本人確認（Verify Organization）が必要で、済んでいないと動かない場合があると説明されました。確認には時間がかかるため、すぐ試したい場合はo4-miniやGPT-4.1などのモデルを選ぶとよいとされています。実際にデモ中にも応答が返らなくなり、モデルを変えることで解決が試みられました。
Guardrailsなど、使えるノードには何がある？
Agent以外でよく使いそうなノードとして、次の2つが挙げられました。
- File search：ファイルを検索して答えに使う、いわゆるRAG用のノード
- Guardrails：危険な入力や出力をはじくノード。ジェイルブレイク（AIの制限を外させようとする指示、プロンプトインジェクション）を防ぐ設定などがあります
Guardrailsには、個人情報の検出やハルシネーション（もっともらしい誤り）の検出もあります。ただしハルシネーションの検出は精度に期待しすぎず、用途に合わせて試しながら使うのがよいとされました。If/else（条件分岐）、While（繰り返し）、Transform（データの整形）などは、作りたいものによって使い分ける発展的な機能です。
ワークフローを公開してIDを控えるには？
ワークフローができたら「Publish」で公開します。公開するとワークフローIDが表示されるので、手元に控えておきます。
このIDが外部に漏れると、ChatKit経由で自分のAPIのクレジットを使われてしまうおそれがあります。取り扱いには注意が必要です。
ChatKitスターターを手元で動かすには？
次に、GitHubで公開されている公式の「ChatKit Starter Template」を使って、チャット画面を手元のパソコンで動かします（openai-chatkit-starter-app（https://github.com/openai/openai-chatkit-starter-app））。
git cloneでスターターのコードを取ってきて、そのフォルダに移動する- 見本の環境変数ファイルをコピーして
.env.localを作る .env.localに、OpenAIのAPIキーと、控えておいたワークフローIDを書き込むnpm installで必要なパッケージを入れる（1〜2分かかります）npm run devで起動し、表示されたURLをブラウザで開く
.env.local のようにドットで始まるファイルは、Windowsでは隠しファイルになっていて見つからないことがあります。エクスプローラーで隠しファイルを表示する設定にするか、エディターで開くと見つけやすくなります。起動直後は表示まで30秒ほどかかることがあります。
起動すると、Agent Builderで作ったワークフローがチャット画面で動きます。デモでは、User approvalノードの確認がボタン付きで表示されました。
Widgetはサンプルから始めるのが確実
講座では、自作のWidgetがうまく表示されない場面がありました。ChatKitの公式ページにあるWidgetのギャラリーのサンプルは安定して動き、Widget Builderで開いてダウンロードして使えると紹介されました。デモでは、カフェのメニューを注文するWidgetで「ミルクティー2つ」と入力すると、商品カードが表示されました。
講座では、こうしたWidgetに決済リンクなどを組み合わせれば、ECサイトのチャットで商品を提案し、カートに入れるところまで進められるようになるという見通しも語られました。ただし、ボタンを押したあとの処理は自分で作る必要があります。
GitHubにコードを上げるには？
Webに公開するために、まずコードを自分のGitHubリポジトリに上げます。
- GitHubで新しいリポジトリを作る。
.envなどの設定ファイルを含む可能性があるため、プライベートにしておくのがおすすめです - ターミナルでスターターのフォルダに移動し、GitHubに表示されるコマンドを順に実行してプッシュする
もとのリポジトリからクローンしているため、「remote originがすでにある」というエラーが出ることがあります。その場合は、エラーメッセージをそのままClaudeやChatGPTに貼れば、代わりのコマンドを教えてもらえます。
別のやり方として、受講者からは、スターターをZIPでダウンロードしてCursorで開き、エージェントに「GitHubにプッシュして」と頼むと必要な設定まで済ませてくれたという方法も紹介されました。ZIPで取ってくると、もとのリポジトリとのつながりがないため、自分のものとして扱いやすくなります。
APIキーの入ったファイルをうっかりリポジトリに上げてしまった場合は、キーを削除して作り直すのが安全です。
Vercelにデプロイして公開するには？
Vercelは、Webサイトやアプリをインターネット上で動かすためのサービスです。手元のパソコンで動いているだけでは他の人は使えないため、こうしたサーバーに置く必要があります。
- Vercelで「Add New」→「Project」を選ぶ
- GitHubと連携し、さきほどのリポジトリを選んでインポートする
- Environment Variables（環境変数） に、
.env.localと同じAPIキーとワークフローIDを設定する - 「Deploy」を押す
動かないときは、まず環境変数のコピーミスを疑うとよいとされました。Vercelには無料のHobbyプランがあり、試しに使う程度なら無料枠で収まると説明されました（料金はVercelの料金ページ（https://vercel.com/pricing）を参照）。
公開した画面が暗くなるときは？
デプロイ直後にサイトを開くと、チャット画面が一瞬出たあとに暗くなって使えないことがあります。これは、公開したサイトのドメインからOpenAIを呼び出すことが許可されていないためです。講座では、この原因の調査に丸一日かかったという体験も紹介されました。
対処の手順は次のとおりです。
- Vercelのプロジェクトの「Settings」→「Domains」で、公開先のドメイン（
○○.vercel.app）をコピーする - OpenAIのプラットフォームの設定（歯車）→「Security」を開く
- 「Domain allowlist」の「Add domain」に、コピーしたドメインを貼り付ける
これでチャットが正常に表示され、応答が返るようになります。独自ドメインを使う場合は、Vercelの同じ画面でドメインを追加します。
公開後も、Agent Builder側でワークフローを編集すれば、サイトの再デプロイなしに中身を更新できます。
AgentKitのチャットボットはどこで使える？
講座では、AgentKitを使った仕事の形として、次のようなイメージが語られました。
- 企業向けに作り込んだチャットボットを、その会社の環境やドメインで動かす
- 社内向けなら、ログイン認証（Clerkなど）を付けて社員だけが使えるようにする
- 商品が増えたら、商品データをアップロードし直すだけで更新する
運用にかかる費用は、サーバー（VercelやAWSなど）の料金と、OpenAIのAPIの利用料が中心になります。講座では、開発費とは別に保守費用を含めた月々の目安についても話題になりました。
ワークフロー型のツールでAIアプリを作る別の例はDifyの使い方入門｜チャットフローでSNS投稿文を一括作成するAIアプリの作り方、Vercelでサイトをテスト公開する流れはバイブコーディングでサイト設計｜FigmaのワイヤーフレームとVercelテスト公開で扱っています。
まとめ
- AgentKitは、Agent Builderでワークフローを作り、ChatKitでチャット画面に組み込むOpenAIの仕組み
- 準備するのはAPIキーと課金設定、GitHub、Vercel、Node.js、エディター
- ワークフローIDとAPIキーは
.env.localに入れ、外部に漏らさない - GitHubのリポジトリはプライベートにし、Vercelでは環境変数を設定してデプロイする
- 公開後に画面が暗くなるときは、OpenAIの「Domain allowlist」に公開先ドメインを追加する
よくある質問
AgentKitとDifyの違いは何ですか？
どちらもノードをつないでAIのワークフローを作れます。AgentKitはOpenAIの公式ツールで、ChatKitを使って自分のサイトに組み込む前提になっている点が特徴です。講座では、コードがシンプルで、AIに画面を作り込ませやすい点も挙げられました。
GPT-5が選べない、または動かないのはなぜですか？
講座開催時は、OpenAIの組織の本人確認（Verify Organization）を済ませないとGPT-5を使えない場合がありました。設定画面の「Verifications」から手続きできます。急ぐ場合は、o4-miniやGPT-4.1などを選びます。
.env.local が見つからないときは？
ドットで始まるファイルは隠しファイル扱いになることがあります。Windowsではエクスプローラーで隠しファイルを表示する設定にするか、VS CodeやCursorでフォルダを開くと表示されます。
Vercelは無料で使えますか？
無料のHobbyプランがあり、試しに公開する程度なら無料枠で使えると説明されました。アクセスが増えたり、細かい機能を使ったりする場合は有料プランが必要になります。最新の条件はVercelの料金ページで確認してください。
デプロイしたサイトが真っ暗になるのはなぜですか？
公開先のドメインがOpenAI側で許可されていないためです。OpenAIのプラットフォームの「Security」→「Domain allowlist」に、Vercelのドメインを追加すると解決します。
Widgetが表示されないときはどうすればよいですか？
講座開催時は、自作のWidgetが安定しない場面がありました。ChatKitのギャラリーにあるサンプルをWidget Builderで開き、ダウンロードして使うと動かしやすいとされました。
アーカイブ動画はProcevoで見られます
Procevoでは、毎週1回、専門家によるセミナーを開いています
- 毎週1回のセミナー
- 動画は見放題
- いつでも参加できる
- いつでも退会できる
- 入会金0円
- オフラインイベントは無料
- オンライン交流会
- 情報の共有
Procevoに参加する（登録ページが新しいタブで開きます）
プランは登録のあとに選べます
