生成AIアプリ「Bedrock Engineer」使ってみた

はじめに

こんにちは!クラウド活用推進担当、新人の濱岡です。


今回はAWS製の開発者向け生成AIアプリ「Bedrock Engineer」を使ってみたので、

構築手順や機能を紹介したいと思います!


「Bedrock Engineer」とは、(後述で詳しく書きますが)

簡単なプロンプト(指示)から、Webサイトやアプリ、AWS構成図をまるっと作って、編集できて、改修してくれるアプリになります!


目次

  1. はじめに
  2. 目次
  3. 「Bedrock Engineer」とは
  4. 構築&設定
    ・前提
    ・構築
    ・設定
    ・モデルのリクエスト申請
  5. Agent Chat
    ・シンプルなウェブサイトを作成
    ・JavaScriptの基礎学習の教材作成
  6. Agent Directory
    ・紙芝居の達人
  7. Website Generator
    ・フィットネスのブログサイトの作成
  8. Step Functions Generator
    ・ユーザ登録プロセスの作成
  9. Diagram Generator
    ・サーバレスなAPI利用のAWS構成図
    ・シーケンス図の作成
  10. さいごに

「Bedrock Engineer」とは

"あなた"の開発を支援する 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が起動


start.png

(npm installでつまずいた話)

環境のプロキシ設定によっては、モジュールのインストールでつまずくことがあります。(というか、つまずきました。)

本筋とはずれますが、プロキシ設定について補足します。

 

npm install実行時に、プロキシ設定を忘れたためにタイムアウトが発生する問題が起きます。

特に、ステータスバーがずっと回り続けている場合に以下の設定を試してみてください。

(npm install --verboseコマンドで進行状況を確認することができます)




設定


左メニューバーの歯車アイコンから設定していきます。


プロジェクト設定:生成物の格納先を設定します。

Language:言語を設定します。


エージェントチャット:Tavily APIキーとコンテキスト長を入力します。

【Tavily検索とは】

エージェントチャットでのWeb検索ができるようになります。最新の情報や追加のコンテキストが必要な場合に使用します。

Tavilyを使用するのに、アカウント作成が必要です。APIキーは無料プランで1000クレジット/月の提供があります。tavily.com


set_1.png

AWS Settings:AWSアクセスキー、シークレットアクセスキー、セッショントークン(任意)、リージョンを入力します。

Amazon Bedrock:使用するLLMモデルを選択します。(本記事ではClaude 3.5 Sonnetを選択)

推論パラメータ:最大トークン数、温度、トップPを設定します。今回はデフォルトのまま進めます。

※推論パラメータについては、こちらを参照してください。

(補足)推論パラメータとは | AIにプレゼン原稿を考えてもらう -Amazon Bedrock|技術 Blog|DTSのクラウド基盤ソリューション

Amazon Bedrockガードレール:ガードレールの有効化を設定します


set_2.png

詳細設定:Enterキーの操作を設定します。

通知設定:デスクトップ通知を設定します。


set_3.png

モデルのリクエスト申請


Amazon Bedrockのコンソール画面を開きます。リージョンは先ほど設定したリージョンに合わせてください。

左メニューバーの「モデルアクセス」>「モデルアクセスを変更」をクリックすると、使用したいモデルを選択できます。

本記事では「Amazon / Titan」系と「Anthoropic / Claude」系のアクセスを許可しています。

※画像を生成したい場合は、画像生成系のモデルアクセスを許可する必要があります。


model.png

Agent Chat

では、さっそくAgent Chatを試してみたいと思います。左メニューバーの上からの2番目のアイコンをクリックします。


機能(Gitから引用)は以下の通りです。今回は一部の紹介とさせていただきます。

💬 人間のような Amazon Nova, Claude, Meta llama モデルとの対話型チャットインターフェース
📁 ファイルシステム操作(フォルダ作成、ファイル作成、ファイル読み/書き)
🔍 Tavily APIを使用したWeb検索機能
🏗️ プロジェクト構造の作成と管理
🧐 コード分析と改善提案
📝 コードの生成と実行
📊 データ分析と可視化
💡 エージェントのカスタマイズと管理
🛠️ ツールのカスタマイズと管理
🔄 チャット履歴の管理
🌐 多言語対応
🛡️ ガードレール対応

agent_chat.png

シンプルなウェブサイトを作成


エージェント「Software Developer」を選択して、シンプルなウェブサイトを作成してみました。

agent_choice.png

以下のプロンプトを入力します。



まず、指定したフォルダ配下にルートフォルダが作成されます。


simple_web_1.png

続いて、そのフォルダの中にファイルが3つ順番に生成されています。


simple_web_2.png

最後にウェブサイトの特徴や機能についてテキスト出力されました。


simple_web_3.png

実際にファイルが作成されているのを確認できました。


simple_web_4.png

作成されたウェブサイトはこんな感じです。

挿入されている画像はフリー素材サイトを参照しているみたいです。(pexels.com


webpage_1.png webpage_2.png

数分でウェブサイトが作成できました!!


JavaScriptの基礎学習の教材作成


今度は、エージェント「Programming Mentor」を選択して、JavaScriptの基礎学習の教材を作成してみます。


以下のプロンプトを入力します。



JavaScriptファイルと、コードについて丁寧に解説してくれます。


java_ex_1.png java_ex_2.png

質問や演習問題の作成などもでき、ハンズオン形式で個人学習できます!


java_ex_3.png

Agent Directory

Agent Directoryは、優れたコントリビューターによって作成されたAIエージェントを発見してすぐに使用できるコンテンツハブです。


機能(Gitから引用)は以下の通りです。今回は一部の紹介とさせていただきます。

〇コレクションの閲覧
〇検索とフィルタリング
〇詳細情報の表示
〇コレクションの追加
〇カスタムエージェントの投稿

agent_dir_1.png

紙芝居の達人


Agent Directoryから「紙芝居の達人」というエージェントを追加してみます。

該当エージェントをクリックすると、詳細画面が出てくるので1番下までスクロールして「マイエージェントに追加」をクリックします。


kamisibai_1.png kamisibai_2.png

Agent Chat機能のエージェントの選択から「紙芝居の達人」をクリックします。


kamisibai_3.png

以下のプロンプトを入力します。



まず、作業用フォルダが作成されます


kamisibai_4.png

次にストーリーが構成されます。


kamisibai_5.png

そして5枚の画像が生成されます。。

が、モデルIDエラーで再試行を繰り返し、アクセス許可したモデルにたどり着きそうな気配がなく、、、

生成を停止して下記の追加のプロンプトを指示しました。



どうなるのか試験的だったのですが、無事に作業の途中から再開でき

モデルIDエラーも突破し、画像生成できました。


kamisibai_6.png

最後にHTMLが作成されました。


kamisibai_7.png

作成された紙芝居はこんな感じです。

kamisibai_8.gif

Website Generator

ウェブサイトを描画するソースコードを生成し、リアルタイムにプレビューします。追加で指示を与えることで対話的にコードを生成することができます。


以下のライブラリに対応しています。(2025/4時点)

〇React.js(w/ Typescript)
〇Vue.js(w/ Typescript)
〇Svelte.js
〇Vanilla.js

入力ボックスの右上にある機能について簡単にまとめました。

webgen_func.png


〇Search:ウェブ検索機能の有効化。この機能により、最新のライブラリ情報、デザイントレンドなどを参照できます。

〇Connect:Amazon Bedrock の Knowledge Base に接続できます。

〇スタイルプリセット:3つのプリセットを選択できます。

〇プレビュー:リアルタイムにプレビューしながらソースコードを編集できます。


フィットネスのブログサイトの作成


プレビュー機能をオンにして、他はデフォルト設定のまま

以下のプロンプトを入力します。



画面の左側にソースコードが生成され、右側にプレビュー画面が表示されます。

この状態でソースコードを編集でき、プレビュー画面上での操作もできます。

また、AIが追加機能を検討し、提案してくれます。


webgen_1.png

Step Functions Generator

AWS Step Functions の ASL 定義を生成し、リアルタイムにプレビューします。


ユーザ登録プロセスの作成


以下のプロンプトを入力します。


step_func.png

Website Generatorと同様、画面上で編集できます。

Diagram Generator

自然言語の説明からAWSアーキテクチャ図を簡単に作成できます。

Diagram GeneratorはAmazon Bedrockの強力な言語モデルを活用して、テキスト説明からプロフェッショナルなAWSアーキテクチャ図を生成します。


機能(Gitから引用)は以下の通りです。

🏗️ 自然言語の説明からAWSアーキテクチャ図を生成
🔍 Web検索機能を統合し、最新情報に基づいた正確な図を作成
💾 図の履歴を保存して簡単に参照・改善
🔄 図の改善に関するインテリジェントな推奨事項を取得
🎨 AWSアーキテクチャアイコンを使用したプロフェッショナルな図のスタイリング
🌐 多言語対応

draw.ioが統合されていて、位置調整や色指定などの編集はアプリ上からできるみたいです!(^^)!


サーバレスなAPI利用のAWS構成図


以下のプロンプトを入力します。



シンプルですが、矢印や正式名称などが正確な構成図が生成されました。


diagram_1.png

追加のプロンプトを入力します。



配置が窮屈な感じがしますが、こちらも想定通りに生成されました。


diagram_2.png

シーケンス図の作成


以下のプロンプトを入力します。



シーケンス図が作成されました。


sequence.png

さいごに

AWS開発者必見のアプリ「Bedrock Engineer」を紹介しました。

いかがだったでしょうか!


個人的には、AWS構成図が数分で作成できちゃうのが、嬉しいかなと思います。

(サービスアイコン探したり、名前つけたり、矢印付けたりを、AIがやってくれるなんて!!)


Diagram Generatorは今後、実際に稼働しているAWS上のリソース情報を収集し、描画する機能を実装する予定らしく、アップデートが楽しみです!

クラウド基盤ソリューション