NotionデータベースをAIに渡して振り返りをしてみる

POSSEでエンジニアインターンをしている吉川唯音です。普段から「コードレビューでいただいた内容をNotionデータベースに入れて振り返る」ということをしているのですが、より効率的で、面白い振り返りを実現したいと考え、今回のアプリケーションを作成しました。

現状の課題感

振り返りの内容に偏りがある
副産物的な学習が少ない
ぱっと振り返れない内容のものがある

これらの課題を、Amazon Bedrockを活用したWebアプリで解決しました。

アプリケーションのイメージ：

ユーザーが振り返りボタンを押す
Notionデータベースの内容を取得する
Bedrockに内容とプロンプトを送る
分析内容をフロントに送る

使用した技術

Next 15 / TypeScript
TailwindCSS v4
Python / Boto3
AWS
・Bedrock (gpt-oss-20b)
・S3 + CloudFrontによるフロント配信
・Lamda (Serverless Framework)

上記のようななるべく費用のかからない構成にしています。UIはGitHubのようなイメージで作成しました。また、今回はPythonやLamda、Noiton APIを初めて使用したため、自分で調べつつAmazon Q developerに手伝ってもらいながら実装をしました。

今回のゴールとしては「振り返りをAIに返却してもらう」までとして、過去の振り返り閲覧などはスコープ外にしました。(Nextの学習を深めるために見た目は実装しています)

やることを考える

設計や調査、実装に関するタスクを事前にプランニングしました。また、技術選定やデザイン作成、どの部分で生成 AIを活用するかなどの構想も行いました。

▼Miroでタスクを洗い出し

▼Miroで作成した github likeなデザイン

実装してみた

⭐️フロントの作成

コンテナプレゼンテーションを採用し、直感的にわかりやすい粒度でコンポーネントに分けて実装しました。Buttonは共通コンポーネントとして作成し、渡すpropsをオブジェクトのキーとして定義し、それに応じてCSSを切り替えるという実装をしました。枠レイアウトであるContainerの実装は、自作したButtonを参考にQ devにお願いしてみましたが、スムーズに実装してくれました。

また、ローディング処理といった軽微な作業もQ devにお願いしました。自分は普段ローディングの処理をuseStateとuseEffectやReact Hook formを活用した実装していましたが、Q devは <Susponse /> 使用した記述を提案しました。「生成 AI を使用することが副産物学習につながる」という点が、とてもモダンな学習方法だなと感じました。(Reactの標準機能を知ることができたのは良かった..と同時に公式ドキュメントをもっと読もう！と思いました)

⭐️AWSのセットアップ

基本的に自力でセットアップしてみました。Serverless.yml の記述やセッティングが難しかったなと感じました。

起こった問題：

デプロイ時に serverless-python-requirements でエラーになる
1. serverless Frameworkの進化: 新しいバージョンでは
serverless-python-requirementsが組み込み機能になった
・プラグインとして追加する必要がない
・custom.pythonRequirements設定があれば自動で有効
2. 互換性の問題: 外部プラグイン版の
serverless-python-requirementsと組み込み版が競合してJSZipエラーが発生

Q devに聞くと上記のような返答が返ってきました。実際に調べてみても正しい情報であるため、Q devの手順通りに修正しました。自分だと時間がかかってしまう作業を一瞬で解決できたという点に驚きました。また、「Serverlessのスタック状態を確認する」などの簡単なAWS CLIコマンドも一瞬で出してくれたため、スムーズに作業ができました。

⭐️バックエンド

Q devを活用して下記の内容を実装しました。ファイル数も少なかったため、実装はスムーズに行うことができました。

Pythonの記述や構文の質問
Bedrockに送るプロンプトの相談
Notionのレスポンスのイメージを出力
リファクタリングの相談

振り返り方法は「ランダム」「直近の1件振り返り」で実装する想定であったため、Notionからの取得の部分に工夫が必要でした。Notionの仕様上、ランダム取得ができないため自前での実装が必要なのですが、この部分をQ devにお願いしてみました。しかし実装してもらった Notion取得時のレスポンスが異常に遅かったため、コードをみると「全てのデータを取得」後にランダムサンプリングしていました。そのため、「特定のidのみを取得」という実装の方がいいのではないか？という相談をQ devにしながら修正していきました。

デプロイしたもの

参考リンク：