はじめに
cursor開発で、レシピのヒントを考えてくれるアプリを作ったのでまとめ。
アプリの概要
レシピのヒントを考えてくれるアプリ。 具体的には、以下のような感じ。
- 入力欄に提案して欲しいリクエストを入力
- リクエストに基づいてLLMがメニューの一覧を数個 ~ 10数程度提案
- 良さそうだったら、最大7つまでメニューをクリックして検索
- メニューに良さそうなレシピを検索してURLを表示
デプロイしてないので、ローカルでの使用感を動画にした。
作った理由
以下のようなモチベーションで作った。
- 毎日献立を考えるのが面倒
- 考える形式だとメニューが偏りがち
思い付かないようなメニューを考えてもらえると、考える手間も省けて偏りもなくなっていいなと思って作った。
さらっと調べた限りでは、思ってるような感じのツールやアプリがなかったので。
最初はデプロイするつもりだったけど、
- LLMのコストが意外と高い
- duckduckgoのAPIがすぐratelimitに引っかかる
というのがあって、細かく制御するほどの気力はなかったので、デプロイするのはいったん保留。
使ってる技術周り
フロントエンド
- Next.js
- TailwindCSS
- Shadcn UI
- TypeScript
バックエンド
- Python
- FastAPI
- LangGraph
- Gemini
- DuckDuckGo API
ほとんどcursor composerのagentモードで作ってもらった。使ってるモデルはClaude 3.5 Sonnet。
UIは、v0を使って叩き台を作って、コードと画像を参考にcursorで作成。
公開する予定とかも特にないので、動作確認メインでレビューはほとんどせず。
ざっくりとした開発の流れ
最近ずっと使ってるagent定義ファイルを用いたコマンド・ワークフロー駆動で開発。
大まかな流れは以下。
やりたいことを整理して小さく分割
- 今回はfrontとbackに分割
- それぞれでさらにいくつかの機能拡張のステップに分割
分割したステップの順でコマンド駆動で以下を実行
- 要件定義書作成してもらう
- 設計書作成してもらう
- 要件定義書と設計書を元にタスクを作成してもらう
- タスクを順に実行して実装・テストしてもらう
- ステップが終わったら、次のステップでまた機能拡張という体でまた開発フローを回す
こんな感じで開発。はまったところとかがあれば別のLLMに聞いたり、いったんステップを最初からやり直してもらったりした。
まとめ
開発フロー、特にドキュメント周りをあらかじめしっかり定義して作ると、ある程度さくさく作ってくれるのでいい。適切な粒度に分割してから作業すると、混乱も減って進めやすい。
あと、コマンド駆動で開発するとタイプ量が減って、かつフローが安定するので、今のところcursor（というかLLMを使ったagent開発）に自分的にいい感じ。
windsurfとclineも使いつつ、うまく住み分けて使っていきたい。
- コマンド駆動を使った並列開発
- LangGraphを使ったエージェント開発
この辺りをもっとやっていきたい。
おわり