こんにちは!クラウド活用推進担当、新人の濱岡です。
今回はAWS製の開発者向け生成AIアプリ「Bedrock Engineer」を使ってみたので、
構築手順や機能を紹介したいと思います!
「Bedrock Engineer」とは、(後述で詳しく書きますが)
簡単なプロンプト(指示)から、Webサイトやアプリ、AWS構成図をまるっと作って、編集できて、改修してくれるアプリになります!
"あなた"の開発を支援する AI エージェント Bedrock Engineer / introducing-bedrock-engineer - Speaker Deck
Github: aws-samples/bedrock-engineer
Bedrock Engineer は、Amazon Bedrockを活用したソフトウェア開発タスクのための AI アシスタントです。大規模な言語モデルと実際のファイルシステム操作、Web検索機能などを含む自律的な AI エージェントがあなたの開発を支援します。
※機能は都度アップデートされており、2025/4時点では以下の機能を試すことができます
〇Agent Chat
〇Agent Directory
〇Website Generator
〇Step Functions Generator
〇Diagram Generator
まずは、アプリケーションの構築から設定までをしていきます!
本記事では、Windows環境で、Githubリポジトリをクローンし、ソースコードをビルドする方法で実装します。
※Git、Node.jsがインストール済みであること
また、AWSアカウントとAmazon Bedrockの利用環境が必要となります。
ターミナルを開き、以下のコマンドを順番に実行します。
Bedrock Engineerが起動
環境のプロキシ設定によっては、モジュールのインストールでつまずくことがあります。(というか、つまずきました。)
本筋とはずれますが、プロキシ設定について補足します。
npm install実行時に、プロキシ設定を忘れたためにタイムアウトが発生する問題が起きます。
特に、ステータスバーがずっと回り続けている場合に以下の設定を試してみてください。
(npm install --verboseコマンドで進行状況を確認することができます)
左メニューバーの歯車アイコンから設定していきます。
プロジェクト設定:生成物の格納先を設定します。
Language:言語を設定します。
エージェントチャット:Tavily APIキーとコンテキスト長を入力します。
【Tavily検索とは】
エージェントチャットでのWeb検索ができるようになります。最新の情報や追加のコンテキストが必要な場合に使用します。
Tavilyを使用するのに、アカウント作成が必要です。APIキーは無料プランで1000クレジット/月の提供があります。tavily.com
AWS Settings:AWSアクセスキー、シークレットアクセスキー、セッショントークン(任意)、リージョンを入力します。
Amazon Bedrock:使用するLLMモデルを選択します。(本記事ではClaude 3.5 Sonnetを選択)
推論パラメータ:最大トークン数、温度、トップPを設定します。今回はデフォルトのまま進めます。
※推論パラメータについては、こちらを参照してください。
(補足)推論パラメータとは | AIにプレゼン原稿を考えてもらう -Amazon Bedrock|技術 Blog|DTSのクラウド基盤ソリューション
Amazon Bedrockガードレール:ガードレールの有効化を設定します
詳細設定:Enterキーの操作を設定します。
通知設定:デスクトップ通知を設定します。
Amazon Bedrockのコンソール画面を開きます。リージョンは先ほど設定したリージョンに合わせてください。
左メニューバーの「モデルアクセス」>「モデルアクセスを変更」をクリックすると、使用したいモデルを選択できます。
本記事では「Amazon / Titan」系と「Anthoropic / Claude」系のアクセスを許可しています。
※画像を生成したい場合は、画像生成系のモデルアクセスを許可する必要があります。
では、さっそくAgent Chatを試してみたいと思います。左メニューバーの上からの2番目のアイコンをクリックします。
機能(Gitから引用)は以下の通りです。今回は一部の紹介とさせていただきます。
💬 人間のような Amazon Nova, Claude, Meta llama モデルとの対話型チャットインターフェース
📁 ファイルシステム操作(フォルダ作成、ファイル作成、ファイル読み/書き)
🔍 Tavily APIを使用したWeb検索機能
🏗️ プロジェクト構造の作成と管理
🧐 コード分析と改善提案
📝 コードの生成と実行
📊 データ分析と可視化
💡 エージェントのカスタマイズと管理
🛠️ ツールのカスタマイズと管理
🔄 チャット履歴の管理
🌐 多言語対応
🛡️ ガードレール対応
エージェント「Software Developer」を選択して、シンプルなウェブサイトを作成してみました。
以下のプロンプトを入力します。
まず、指定したフォルダ配下にルートフォルダが作成されます。
続いて、そのフォルダの中にファイルが3つ順番に生成されています。
最後にウェブサイトの特徴や機能についてテキスト出力されました。
実際にファイルが作成されているのを確認できました。
作成されたウェブサイトはこんな感じです。
挿入されている画像はフリー素材サイトを参照しているみたいです。(pexels.com)
数分でウェブサイトが作成できました!!
今度は、エージェント「Programming Mentor」を選択して、JavaScriptの基礎学習の教材を作成してみます。
以下のプロンプトを入力します。
JavaScriptファイルと、コードについて丁寧に解説してくれます。
質問や演習問題の作成などもでき、ハンズオン形式で個人学習できます!
Agent Directoryは、優れたコントリビューターによって作成されたAIエージェントを発見してすぐに使用できるコンテンツハブです。
機能(Gitから引用)は以下の通りです。今回は一部の紹介とさせていただきます。
〇コレクションの閲覧
〇検索とフィルタリング
〇詳細情報の表示
〇コレクションの追加
〇カスタムエージェントの投稿
Agent Directoryから「紙芝居の達人」というエージェントを追加してみます。
該当エージェントをクリックすると、詳細画面が出てくるので1番下までスクロールして「マイエージェントに追加」をクリックします。
Agent Chat機能のエージェントの選択から「紙芝居の達人」をクリックします。
以下のプロンプトを入力します。
まず、作業用フォルダが作成されます
次にストーリーが構成されます。
そして5枚の画像が生成されます。。
が、モデルIDエラーで再試行を繰り返し、アクセス許可したモデルにたどり着きそうな気配がなく、、、
生成を停止して下記の追加のプロンプトを指示しました。
どうなるのか試験的だったのですが、無事に作業の途中から再開でき
モデルIDエラーも突破し、画像生成できました。
最後にHTMLが作成されました。
作成された紙芝居はこんな感じです。
ウェブサイトを描画するソースコードを生成し、リアルタイムにプレビューします。追加で指示を与えることで対話的にコードを生成することができます。
以下のライブラリに対応しています。(2025/4時点)
〇React.js(w/ Typescript)
〇Vue.js(w/ Typescript)
〇Svelte.js
〇Vanilla.js
入力ボックスの右上にある機能について簡単にまとめました。
〇Search:ウェブ検索機能の有効化。この機能により、最新のライブラリ情報、デザイントレンドなどを参照できます。
〇Connect:Amazon Bedrock の Knowledge Base に接続できます。
〇スタイルプリセット:3つのプリセットを選択できます。
〇プレビュー:リアルタイムにプレビューしながらソースコードを編集できます。
プレビュー機能をオンにして、他はデフォルト設定のまま
以下のプロンプトを入力します。
画面の左側にソースコードが生成され、右側にプレビュー画面が表示されます。
この状態でソースコードを編集でき、プレビュー画面上での操作もできます。
また、AIが追加機能を検討し、提案してくれます。
AWS Step Functions の ASL 定義を生成し、リアルタイムにプレビューします。
以下のプロンプトを入力します。
Website Generatorと同様、画面上で編集できます。
自然言語の説明からAWSアーキテクチャ図を簡単に作成できます。
Diagram GeneratorはAmazon Bedrockの強力な言語モデルを活用して、テキスト説明からプロフェッショナルなAWSアーキテクチャ図を生成します。
機能(Gitから引用)は以下の通りです。
🏗️ 自然言語の説明からAWSアーキテクチャ図を生成
🔍 Web検索機能を統合し、最新情報に基づいた正確な図を作成
💾 図の履歴を保存して簡単に参照・改善
🔄 図の改善に関するインテリジェントな推奨事項を取得
🎨 AWSアーキテクチャアイコンを使用したプロフェッショナルな図のスタイリング
🌐 多言語対応
draw.ioが統合されていて、位置調整や色指定などの編集はアプリ上からできるみたいです!(^^)!
以下のプロンプトを入力します。
シンプルですが、矢印や正式名称などが正確な構成図が生成されました。
追加のプロンプトを入力します。
配置が窮屈な感じがしますが、こちらも想定通りに生成されました。
以下のプロンプトを入力します。
シーケンス図が作成されました。
AWS開発者必見のアプリ「Bedrock Engineer」を紹介しました。
いかがだったでしょうか!
個人的には、AWS構成図が数分で作成できちゃうのが、嬉しいかなと思います。
(サービスアイコン探したり、名前つけたり、矢印付けたりを、AIがやってくれるなんて!!)
Diagram Generatorは今後、実際に稼働しているAWS上のリソース情報を収集し、描画する機能を実装する予定らしく、アップデートが楽しみです!