サーバーレス30秒クッキング 「作りたいもの」を書くと構成図とサンプルコードを作ってくれる AI エージェント
2026-10-05 | Author : 佐藤 雄太
はじめに
今年も AWS Summit Japan の会場に、サーバーレスの Serverless TFC ブースを出展しました。「AWS サーバーレスを見て、触って、相談しよう」をテーマに、大きく 3 つの体験を用意したブースです。
- 見る — サーバーレスで作られたアプリケーションのデモ
- 触る — AI エージェントでその場でアプリを構築する体験
- 相談する — エキスパートへの技術相談
この「触る」枠として展示したのが、私たちが作ったデモアプリ「サーバーレス 30 秒クッキング」です。ブースには複数のコンテンツを用意していましたが、その中でもこの 30 秒クッキングが、特に多くの方に楽しんでいただける人気のコンテンツになりました。やることはシンプルで、来場者が「作りたいアプリのアイデア」を入力すると、AI エージェントがその場で、サーバーレスアーキテクチャを設計します。そして設計に基づいて以下の成果物を生成します。
- AWS 公式アイコンを使った構成図
- 設計に従った AWS CDK の IaC
自分のアイデアが数十秒で「AWS の具体的なサーバーレス構成図」になる体験が好評で、多くの方に触っていただけました。この記事では、このデモをどう作ったか、そしてブースに立って分かったことを、制作の裏話としてご紹介します。
builders.flash メールメンバー登録
builders.flash メールメンバー登録で、毎月の最新アップデート情報とともに、AWS を無料でお試しいただけるクレジットコードを受け取ることができます。
「サーバーレス 30 秒クッキング」とは ?
コンセプトは「アイデアを入れると、AWS の構成図が"料理"されて出てくる」。生成 AI のデモはチャット形式が多いですが、ブースでは体験が地味になりがちです。 そこで「入力 → 絵が出てくる」に振り切り、しかも AWS のブースらしく、出てくる内容は AWS アーキテクチャ図にしました。
来場者の体験は、次の流れで進みます。
1. 作りたいものを入力する
「リアルタイムチャットアプリ」「写真共有 SNS」——カテゴリを選んでもよし、自由入力でもよし。ここで大事にしたのは、専門用語を知らなくても遊べること。技術者でない方でも「こんなの作りたい」と一言入れれば動き出します。
2. シェフリスが調理を始める
入力すると、リスのシェフ（シェフリス）がフライパンを振る調理アニメーションが始まります。実はここに、体験設計の小さな秘密があります。AI エージェントが構成を考える時間は、どうしても 30〜50秒かかります。この待ち時間を「処理中…」のスピナーで見せると、ブースでは一気に熱が冷めてしまう。そこで「いまあなたの構成をキッチンで調理しています」という見立てにして、待ち時間そのものを楽しい時間に変えることにしました。「30秒クッキング」という名前もここから来ています。
演出だけでなく、待ち時間そのものを削る工夫もしています。モデルをタスクごとに使い分けるのがその一つです。構成図の生成は来場者が目の前で待つ処理なので Claude Sonnet、待つ人がいない裏側の IaC コード生成は品質重視で Claude Opus を使っています。開発中に一度 Opus で構成図を作ってみたのですが、ブースの回転を考えると待ち時間が長すぎたので、「人が待つ同期的な処理」と「人が待たない非同期的な処理」でモデルを使い分ける形に落ち着きました。
3. 構成図が描き上がる
調理が終わると、構成図がアニメーションで一つずつ描かれていきます。使われた AWS サービスが公式アイコンで並び、サービス間が線でつながり、「API 層」「データ層」のようにグループ分けされて、最終的になぜこの構成なのかの解説文も表示されます。ブースには Ask an Expert セクションといった AWS のソリューションアーキテクトと相談できるスペースを設けており、出来上がった構成図に対して相談するといった流れもよく見かけられました。
4. 「やっぱり認証も」と追い注文する
一度出た構成に、「認証機能も追加して」「キャッシュを入れて」と追い注文を行うこともできます。このときシェフリスは鍋をかき混ぜるアニメーションに変わり、構成図が更新されます。会話しながら構成が育っていく感じが、ブースでの自然な会話のきっかけになりました。
5. QR コードでお持ち帰り
完成した構成図は QR コードから持ち帰れます。構成図の画像はもちろん、その構成を実際に AWS 上に構築するための CDK のコードもあわせてダウンロードできるようにしました。来場者が自分のスマホに「自分のアイデアの構成図とコード」を持ち帰れる——この持ち帰り体験が、思い出として残るだけでなく、実際に手を動かす次の一歩にもつながる仕掛けです。
アーキテクチャ
今回のアプリの構成図を紹介します。 全体はシンプルなサーバーレス寄りの構成となっています。
ブラウザ (React + TypeScript)
│ 「チャットアプリ作りたい」
▼
Amazon CloudFront → ALB → Fargate (FastAPI + Strands Agents)
├─ Amazon Bedrock（Claude）が設計を考える
├─ AWS Serverless プラグインの Skills でベストプラクティスを参照
└─ diagram_output ツールで構成 JSON を出力
▼
フロントが AWS アイコン付きで構成図をアニメーション描画
▼
Amazon S3 に画像を保存 → QR (署名付き URL) でお持ち帰り
フロントエンドは React、バックエンドは FastAPI で、AI エージェント部分に Strands Agents SDK を使っています。数行でエージェントを定義でき、自作ツールを渡すのも簡単なので、今回のように「ツール1つで体験が決まる」アプリとは相性が良かったです。バックエンドの実行環境は、当初 Amazon Bedrock AgentCore で組んでいました。実際にデプロイまで動いたのですが、このアプリのバックエンドはエージェント呼び出しだけでなく、画像のアップロード・検証や署名付き URL の発行、後述する IaC 生成の制御といった API も持っています。それらを 1 つの FastAPI にまとめて、シンプルに CloudFront 1 枚の背後に置きたかったので、Amazon ECS（AWS Fargate）+ ALB に切り替えました。すでに動いていたものをコンテナに載せるだけで済むのも、ブース展示までの時間を考えると確実でした。
なお、AgentCore を CloudFront の背後に置き、フロントと同一オリジンで配信する構成は公式に案内されています。詳しくは Set up custom domain names for Amazon Bedrock AgentCore Runtime agents をご覧ください。 LLM は Amazon Bedrock の Claude（構成図は Sonnet、IaC は Opus）、構成図の画像は Amazon S3 に置き、Amazon CloudFront 経由で配信しています。アイコンは公式配布の AWS アーキテクチャアイコン を使っています。
アーキテクチャ図と裏側の仕組み
体験を支える裏側の技術
AI エージェントに「構成図を出力する専用ツール」を持たせる
このデモの技術的な核は、AI エージェントに自作ツールを1つ持たせたことです。
普通に「構成を教えて」と LLM に聞くと、答えは文章で返ってきます。でも図を描くには、サービス一覧・接続・グループ分けが構造化されたデータで欲しい。そこで diagram_output という自作ツールを用意し、エージェントが設計を終えたら「サービス配列・接続配列・グループ配列を引数にして、このツールを呼ぶ」ように仕向けました。エージェントがツールを呼んだ瞬間、フロントで描画できる JSON が手に入ります。
Skills でベストプラクティスを効かせる
AWS Serverless プラグイン の Skills（AWS Lambda や Amazon API Gateway などのベストプラクティス知識）を AI エージェントに読ませています。おかげで、単にサービスを並べるだけでなく「ここは DLQ を付ける」「認証は Amazon Cognito で」といった、それらしい判断が構成に入るようになりました。
このプラグインは AWS Agent Plugins として公開されていて、お使いのコーディングエージェントにそのまま追加できます。サーバーレスの構成を AI に考えさせてみたい方は、まずこれを入れてみるのがおすすめです。
構成図を「線までキレイに」画像化する
持ち帰り用の PNG 生成で地味に苦労したのが、アイコン間の接続線です。画面の DOM をそのまま画像化すると線がうまく入らず、最終的に Canvas に構成図を描き直し、アイコンも接続線も含めた画像を書き出すようにしました。
構成図だけでなく CDK コードも生成する
構成図を見て終わりではなく、来場者が家に帰ってから実際に手を動かせるよう、その構成を AWS 上に再現する AWS CDK のコードも生成しています。構成図 (どのサービスをどうつなぐか) が決まっていれば、そこから IaC を組み立てるのは AI エージェントの得意分野です。なお生成されるコードはあくまで叩き台なので、ダウンロードしたプロジェクトは手元で cdk synth して内容を確認してからお使いください。構成図を「絵」として持ち帰るだけでなく「動くコード」として持ち帰れることで、デモがその場の体験で終わらず、次の一歩につながります。
ブースで分かったこと
まず、初心者から中級者まで幅広い方が興味を示してくれたことが嬉しかったです。「サーバーレスって何ができるの?」という方には入口として、ある程度分かっている方には「自分が今考えている構成の答え合わせ」として楽しんでいただけました。構成図＋解説＋持ち帰り QR が1画面に出るので、説明する私たちも会話に集中でき、「構成図はやっぱり強い」と実感しました。「サーバーレスって何ができるの?」という方には入口として、ある程度分かっている方には「自分が今考えている構成の答え合わせ」として楽しんでいただけました。
面白かったのは、来場者が SA の視点で遊び始めることです。「この構成、本番だとここが足りないよね」と会話が広がり、AI が出した構成を叩き台に人間が議論する、という使われ方が自然に生まれました。デモが「答え」ではなく「議論のきっかけ」になる感覚です。
意外だったのは、サーバーレスそのものより「この 30 秒クッキング、どうやって作ったんですか? プロンプトでどう制御しているんですか ?」という、アプリの作り方への質問が多かったこと。この記事は、その質問への答えでもあります。
そして「このアプリ、公開してほしい」という声を複数の来場者からいただきました。作る方向だけでなく「既存の構成をアップしたら採点・アドバイスしてほしい」という要望もあり、ブース映えのためのデモが、実務でも使えるツールとしての可能性を見せてくれました。ブース全体としても、相談型の落ち着いた展示が多い会場の中で、多くの方に足を止めて楽しんでいただけたのは嬉しい結果でした。その中で 30秒クッキングは、「まず触ってみたくなる入口」としてブースの賑わいづくりに一役買ってくれたと思います。
(左図: サーバーレスエージェントによる構成図の解説 右図: AI が作成した構成図に対して Ask an Expert セクションでのサーバーレス構成に関して技術相談)
まとめ
「サーバーレス30秒クッキング」は、AI エージェントに専用ツールを1つ持たせるだけで、チャットが「アイデアを構成図に翻訳する体験」に変わる、という実験でした。待ち時間をシェフリスの調理で楽しく見せる、追い注文で構成を育てる、QR で持ち帰る——技術そのものより、体験の設計にいちばん時間をかけたデモでもあります。
現在このアプリはサンプルコードとして公開できるよう準備を進めています。あわせて、サーバーレス以外も含めた構成への対応や、AWS Price List API と連携した料金試算 (構成図と一緒に「この構成、月額いくら」を実単価で出す) といった拡張も試しています。今回のアプリを作った開発者として、AWS Summit Japan の参加者の方が興味深そうに、また楽しそうにアプリを触ってくださっている光景を見られて本当に作って良かったと実感しました。 AWS Summit Japan に参加、開発に関わっていただいた方、何よりアプリを触っていただいた方ありがとうございました !
筆者プロフィール
佐藤 雄太 (Sato Yuta)
AWS Japan のスタートアップソリューションアーキテクトとして、普段は幅広いスタートアップのお客様への技術支援、趣味でデザインを勉強しています。
