はじめに
ChatGPTやClaudeとの会話で、その場では理解できても後で見返したい時に探せないという経験はありませんか？
「あの時教えてもらったコードどこだっけ...」
「重要な説明をスクショで保存したけど整理できてない...」
そんな課題を解決するため、AIの回答を自動で要約・タグ付けして保存するChrome拡張機能とカードレイアウトで表示するwebアプリを作りました。
また今回は私自身がはやくこのアプリを使いたかったことと最近流行りのAIバイブコーディングとやらを経験する意味も込めてclaudeで要件定義→実装まで行いました。
システム構成
-
Chrome拡張 (TypeScript)
- AIの回答をコピペして保存
-
AI Engine (Claude 3.5 Haiku / Gemini)
- テキストからtitle, summary, tags等を抽出
-
Backend / Database (Supabase)
- 拡張機能からREST API経由でデータを永続化
- PostgreSQLのRLS（Row Level Security）により、ユーザーごとのデータを保護
-
Web Frontend (React + Vite)
- Supabase Realtimeにより、保存したカードを即座にダッシュボードへ反映
使い方
１. 普段通りAIに質問する
２. 保存したい回答をコピーし拡張機能に貼り付けて保存
保存時のアクションはこれだけでOK
あとは時間があるときにアプリにログインします。
３. アプリで確認
赤枠のように先ほど保存したAI回答をもとにカードが作成されています。
カードをクリックすると...
詳細画面が表示されタイトル、タグ、要約、コード(AI回答にあれば)、メモの項目があります。いずれも編集可能です。（詳細画面のUIは改善予定です..タイトルは切れちゃってるし、要約もmd形式にしてより見やすくしたいですね...）
基本的な使い方は以上です。
ここまでの機能をmvpとして実装していたので今後地道に機能を拡充していきたいですね。
今後の展望
・確認した方がいいカードのリマインド機能
・カード間の関連性や親子関係がわかるようなUI/UX
・スマホからの保存
などいろいろやってみたいですがどこまで拡充できるのでしょうか...
一応検索機能である程度カードのフィルタリングはできますが、カードの背景色を変えるだったり、なにかしらの仕組みでより管理しやすくしたいですね。
（でないとカードがずらっと並んで、見るのが億劫なアプリになってしまいそう..）
ただいずれにせよ本来の目的はこのアプリを利用して「知識をストックしていくこと」なのでどんどん活用していきたいです。