AWS AmplifyとBedrockで苦手な文章作成を助けてくれるウェブアプリをサクサクっと作る

はじめに

KDDIアジャイル開発センターのむらです。
4月に入社して早いもので12月になってしまいました

8月から配属になったプロジェクトにも少しずつ慣れてきて、最近では連携する他チームの方と連絡を取ることが増え、ちゃんとしたビジネス文章を書く機会が増えてきました。
しかし、毎度どんな文章がいいのか、失礼がない表現か、など文章を作るのにかなりの時間を使ってしまっています...
チームの振り返りで実際にこれを話題に出してみたら、「ChatGPTは手放せない」とアドバイスをもらいました。確かに最初から生成AI使えばいいのに、どうして自分は使ってなかったのか疑問です笑
ただ、普通にChatGPTなどに聞くのではつまらないなあと思ってしまい、うーんと考えていたところ、自分の業務で使えるように自分好みのアプリにしてしまえば楽しいし使えるのではないかと思いつきました。
そこで今回は、AWS AmplifyとBedrockでSlackやTeams、メールの文章を生成AIに作らせるウェブアプリをサクッと作ってみようと思います。

作る！！！

なんとなくの仕様

どんなアプリにするか考えるときに、今自分が困っていることがなにかを思い返してみました。
ぱっと浮かんだのは、連絡手段ごとの文章の書き分けに困っているということです。業務では基本的にはSlackを使いますが、チーム外のサービス担当者と連絡を取るときにはTeamsを使いますし、完全に社外の方とはメールで連絡を取っています。Slackでのチャットとメールの文章では明らかな違いがありますし、Slackの調子でメールを送ってしまったら怒られてしまいます。ちゃんとした文章を書くために時間がかかってしまうのは、これが一番大きな困りごとだなと思いました。
さらに、これと関連して送る相手との距離感も気にしているなあと気づきました。少しくだけた関係性なのか、全く話したことのない方なのか、など相手との関係性も考えた文章を考えるのは大変です。いつも自分のことを見てくれている先輩に対して外部の方に送るような堅っ苦しい文章は向いていないですし、馴れ馴れしすぎる文章もおかしいです。

そんなこんなで「自分の業務で使えるように」という視点で考えて、以下の機能にまとめてみました。

• Slack、Teams、メールのそれぞれに合わせた表現（書きぶり）を出力してほしい
  • 長さや敬語の堅さをうまい具合に調整してほしい
• チームの人、チーム外のサービス担当者、外部の方の送る相手に合わせた温度感の文章の雰囲気にしてほしい

使う技術

今回は、AWS AmplifyでReactアプリをサクッとデプロイして、生成AIにはBedrockを使います。

会社ではAWSをメインに使っている事が多く、自分のプロジェクトでもAWSを使っています。ただ、AWSのリソースをアレコレいい感じにしてくれているのは他チームの方たちなので、自分はログ調査のときにしか使っていません...
それではもったいないですし、今後を見据えるとAWSをちゃんと使えるようになっておきたいです。そこで、今回はAWSのサービスを使ってAWSと友達になることも目標の一つにしてみたいと思います。

環境準備

サクッと作りたいので、AWSのブログ記事を元に作っていきます。
AmplifyでGitHubのリポジトリからすぐにデプロイできてめちゃくちゃサクッと終わっちゃいました。

モデルには、せっかくなのでいいやつを使ってみたくてClaude 3.5 Sonnetにしました。

思いついた仕様をサクサクっと反映させていく

とは言っても、すでにあるサンプルコードをすこーし手直しするだけでおしまいです！

送るチャットツールと、送る相手を選択できるようにしたいので、以下の要領で追加します。

page.tsx

<select
  name="app_type"
  id="app_type"
  className="border border-black text-gray-900 p-4 rounded-lg text-xl"
>
  <option value="Slack">Slack</option>
  <option value="Teams">Teams</option>
  <option value="Email">メール</option>
</select>

内容の箇条書きだけではなく、全体の温度感も加味してほしいので下の選択肢も追加しました。これがどれほど影響を与えてくれているのかはよくわからないですが...

page.tsx

<select
  name="temperature"
  id="temperature"
  className="border border-black text-gray-900 p-4 rounded-lg text-xl"
>
  <option value="neutral">普通な</option>
  <option value="request">依頼する</option>
  <option value="thank">感謝する</option>
  <option value="apologize">謝罪する</option>
</select>

そして、肝心のプロンプトはとりあえず下のようにしてみました。本当はもっと工夫すべきなのだとは思うのですが、今回はサクッと作ることが目的なので一旦この形でいってみます。
（もとのサンプルコードが入力した食材からレシピを生成するものなので、ingredientsになってるところもそのままです...）

const prompt = `以下に箇条書きした内容を${temp_jp}感じで${app_type}で${who_jp}に送るので、${app_type}に合った文章を日本語で生成してください。そのまま送ってしまいたいので本文だけ作ってください。\n\n${ingredients}`;

完成！

こんな感じのものを作ってみました。試しに、「知らない先輩にTeamsで普通な内容を送る」という前提で、「お茶が美味しい」ことと「最中が好きなこと」を伝えたいとしたら以下の文章を作ってくれました。

お疲れ様です。
最近、美味しいお茶を見つけたのでおすすめです。
また、最中も大好きなのですが、皆さんはどんなお菓子が好きですか？
よかったら教えてください。

伝えたいことは同じで、今度は「社外の人にメールで感謝する内容」を指定してみたらこうなりました

件名: お茶と最中について

本文:

お世話になっております。

先日、素晴らしいお茶を頂く機会がありました。香りが豊かで、味わい深く、とても美味しかったです。お茶の魅力を改めて感じることができました。

また、最中も大変好きで、特にサクサクとした皮の食感と中のあんこのバランスが絶妙だと思います。季節によって様々な味が楽しめるのも魅力の一つですね。

これからも日本の伝統的なお茶菓子を楽しんでいきたいと思います。

今後ともよろしくお願いいたします。

ちゃんとメール文面っぽい感じになってますし、Teamsのバージョンよりも堅めの敬語になっている気がします。

まとめ

今回は本当にサクッとチャットで送る文章を作るアプリを作ってみました。もう少しプロンプトをいじってみればもっといい感じに文章を生成してくれそうな感じがする結果でした。サクッと作ってみたわりには頑張れば使えそうなものができてよかったです。
また、AWSのサービスを使って本当に一瞬でデプロイできてしまえてびっくりしました。本当は自分でいろいろ設定しないといけないのだと思うのですが、サクッと作りたいときには便利だと感じました。これからも適当に作りたいときには活用していきたいと思います。

全部生成AIに任せて文章を作ってもらうのも自分の文章力向上には繋がらないので、次に改善するとしたら自分の文章を添削してくれる機能もつけてみたいです。これからも相棒としてAIを活用していきたいと思える機会でした！