CursorのAgent modeに、HonoXを使ったStripe Apps紹介サイトを一通り作らせてみた記録です。プロジェクトの立ち上げだけは手動で行い、そこから先はドキュメント参照・実装・開発サーバーの起動確認までAgentに任せています。

Honoxでプロジェクトを立ち上げる

ここはAgentにやらせてもいいのですが、ステップ数を減らしたり意図しないコマンドを使われないためにも手動でやります。

npm create hono@latest stripe-apps-site

? Which template do you want to use?
  nextjs
  nodejs
  vercel
❯ x-basic
  aws-lambda
  bun
  cloudflare-pages

create-hono version 0.15.3
✔ Using target directory … stripe-apps-site
? Which template do you want to use? x-basic
? Do you want to install project dependencies? yes
? Which package manager do you want to use? npm
✔ Cloning the template
⏷ Installing project dependencies

Honoxのdocument

CursorのAgent modeにHonoXの公式リポジトリをカスタムdocsとして登録しておきます。これでコード生成時に、CursorがHonoXの実装を直接参照してくれるようになります。

チャット欄で>addと打つとコマンド候補が出てきます。

Add New Custom Docsを選ぶとURLの入力欄が出るので、HonoXの公式リポジトリhttps://github.com/honojs/honoxを渡します。

登録が終わると、Docs管理画面にHonoXがインデックス済みとして並びます。

サイトを作らせる

ドキュメントの準備ができたので、実際にサイトを作らせます。チャットに投げたプロンプトは次の通りです。

HonoXを利用して、プロダクトを紹介するサイトを作りたい。Stripe App Marketplaceに掲載するStripe Appsアプリを紹介するサイトで、TOPページには公開したアプリの一覧を表示します。下層ページではアプリごとの紹介ページを、microCMS APIからデータを取得して動的に作ります。API呼び出し部分はダミーでよいです。

エージェントがnpm run devで開発サーバーを起動するところまで一気に進めてくれました。構築されたのは、公開中のStripe Apps一覧を出すトップページ、アプリごとの詳細ページ、一覧カード用のAppCard.tsx、microCMS APIのダミー実装であるapi.ts、という構成です。

実際にブラウザで開いたトップページです。ダミーデータの請求書リマインダーやサブスクリプション管理といったStripe Appsが、それらしく並んでいます。

カードをクリックした先の詳細ページです。料金プランやインストール方法まで、それっぽい体裁でダミーの本文が入っています。

生成されたapp/routes/index.tsxとapp/components/Layout.tsxはこの状態です。

まとめ

HonoXのプロジェクト立ち上げだけ手動で行い、そこから先はCursorのAgentにドキュメント参照・実装・開発サーバーの起動確認までを任せて、Stripe Apps紹介サイトを一通り作ることができました。生成されたコードは動作こそしましたが、children: anyのように型がゆるいままの箇所もあったため、PropsWithChildrenへの置き換えなど手直しが必要でした。