Claude CodeでCVE情報を管理するための個人用のWebアプリを作成した

サマリ

CVE情報を個人的に一元管理できると面白いなと思い、claude Codeに作成していただきました。
Next.js, Python, SQLiteの組み合わせを指定して作ってもらったところ、いい感じのWebアプリが完成しました。
私はコードを一切書かずに、対話で構築しました。
対応方法をローカルのLLMに問い合わせる機能も実装しました。

マシンスペック

MacBook Air M2 arm64

作成

アイデア・動き出し

個人的にセキュリティに強くなりたいと思い日々奮闘をしています。
USのTechMediaなどでCVEの記事を見て、なんとなく手元に一元管理して眺めるアプリがあるといいなと思いました。
最初は個人契約のGPTと壁打ちをして、アプリのアーキテクチャを考えてその要件をClaude Codeに実装していただきました。
下記が簡単なアーキテクチャです。

気を付ける点

LLMが出力するコードや叩くAPIに意図していないコードが入らないか、公開APIのエンドポイントを過剰に叩かないか、果たしてアプリで使用していいのか。今回は商用利用しないが、商用利用OKなのかなど、人間の目で確認すべきところは確認しました。
上記含めて、技術者倫理に反する行動や成果物を作らないかは考えてLLMの生成物のFBを行いました。

GPTとの対話

DeepResearchでCVEの確認方法や対応方法など、深く調べていただきました。
そこから、こういったものをアプリにすると面白い？という会話を繰り広げて、私の守備範囲であるpythonを利用したWebアプリを作成しようとアーキテクチャを考えました。

Claude Codeとの対話

GPTとの対話で練った要件をClaudeに投げて、実装に入っていただきました。
今回もラフに要件と技術スタックを教えて、お昼ご飯を食べながら見守っていました。
結構時間がかかっていたので、食後も見守り数十分でモックアップのようなものが出来上がりました。

コードの確認・動作確認

生成されたコードを人間である私が確認しました、AIから人間へのコードレビューです。
とはいえ、一般公開はしない個人アプリなので、おかしなところはないか確認しました。
コードは問題なさそうだったので、Dockerを起動してアプリを立ち上げて簡単にトップページを試しました。

見た目のブラッシュアップ

最初に出てきたものは、2000年代に私が個人で作っていた簡素なブログのようなWebアプリだったので、見た目を整えてもらいました。
一瞬でモダンなかっこいいものになり、ここでテンションが上がったのを覚えています。

機能の追加

最初に提示されたアプリは一覧のみ見れるものだったので、ソート機能やリンク機能などをつけてもらいました。これだけあれば個人としては十分です。

LLMの機能を搭載

せっかくなので、ローカルLLMで脆弱性の大まかな対応方法を出力するようにしました。
ollamaを使用して問い合わせる形式にしました。

シーケンス図

最終的には下記になりました。

完成したアプリの画面

個人で使用する分には十分すぎる機能、UIです。学習を進めていきたいと思います。

まとめ

CVE情報を個人的に一元管理できると面白いなと思い、claude Codeに作成していただきました。
Next.js, Python, SQLiteの組み合わせを指定して作ってもらったところ、いい感じのWebアプリが完成しました。
私はコードを一切書かずに、対話で構築しました。
対応方法をローカルのLLMに問い合わせる機能も実装しました。
脳裏に浮かんだアプリケーションを作成できるので、今後もプライベート用に活用していきたいと思いました。