⚙️
CodeGuideを使ってSupabaseとCursorでアプリを作る

2025/03/05に公開
この記事では、CodeGuideを使って、SupabaseとCursorを使用したアプリケーションの初版を作成する方法を解説します。

 CodeGuideとは？CodeGuideは、AIを活用したプロジェクト設計支援ツールです。このツールを利用することで、次のことが可能になります。

プロジェクト要件の草案作成：製品要件文書（PRD）や技術スタックを含む詳細なプロジェクト文書を簡単に作成できます。

技術スタックの定義：主要なAIコーディングツールをサポートし、40以上の既製テンプレートを提供しているため、迅速にプロジェクトを開始できます。
CodeGuideの料金プランは以下の通りです。

月額プラン：月額$29で、Codie（AIコーディングアシスタント）や5,000クレジット、5つ以上のスターターキットなどが利用可能です。

年額プラン：年間$199で、月額プランの全機能に加え、6,000クレジット、30分間の1対1コール、優先サポート、新機能への早期アクセスなどが含まれます。
CodeGuideはこちら →

 はじめに
 新しくプロジェクトを作る
CodeGuideのホームページにアクセスし、「New Project」ボタンをクリックします

使用する Starter Kits を選ぶ

今回は「React + Supabase」を選択します。

プロジェクトを定義するために、どのようなものを作りたいのか英語で入力する必要があります。ChatGPTで英語にしましょう

　

プロンプト：
これを英語圏の人が自然であると感じる言葉に変えて。

ユーザーが入力した技術のキーワードについてLLMが回答する。
次のような英語になるので、入力して「Refine」ボタンを押します。AIが入力を元に洗練された文章を生成します
The LLM provides responses based on technical keywords entered by the user.
生成された文章はこちら:
I'm building a web app that uses a Large Language Model (LLM) to generate responses based on technical keywords entered by the user. The goal is to create an interactive tool where users can input specific technical terms or phrases and get detailed, contextually relevant explanations or suggestions powered by AI. This tool is aimed at developers, tech enthusiasts, and students who are looking to explore or understand technical concepts more deeply.
Recommended Tech Stack:
（中略）
Additional Context:
Integration with GPT-4o, utilizing its capabilities for generating and refining technical content.
Scalability focus on handling high volumes of requests with low latency.
Potential future integration with additional AI models like Claude 3.5 Sonnet for enhanced performance or additional perspectives.
これは次の項目が追加されています
製品の対象ユーザーと利用目的の明確化（WhoとWhy）
使用する技術スタックや開発環境の選定（How）
提供する機能やユーザーが体験するインターフェースの定義（What）
バックエンド構成やデータ管理の方法（Infrastructure）
利用するAIモデルとその拡張性・スケーラビリティに関する要件（Performance & Scalability）

変更せずに Next Step をおします



 使用する開発ツールとLLMのモデルを選ぶ
開発ツールはCursorを選択します

LLMは Claude 3.7 Sonnet を選択します


 要件定義をしていく
最初に入力した内容を元に、エージェントがQ＆A形式の質問を10問ほど作成しますので、回答していきます。
回答は英語で入力する必要があるのでClaudeを使って対応しましょう
プロンプト：
ここにシステムの要件定義に関する質問一覧があります。
順番に私に日本語にして質問し、私の回答を補足しながら英語で出力してください。

（

ここに表示された英語の質問をCodeGuideからコピペします。
10問あるので大変ですが、頑張りましょう。あとで楽になります。

例：
1. Could you clarify the details of the user authentication process?
For example, will you support social logins or just standard 
email/password sign-ups, and what account recovery options are needed?

2. For the Settings Page, what specific customization 
options or user preferences would you like to offer
 (e.g., theme selection, notification settings, language preferences)?

）
Claudeのチャットで質問に答えていきます。これはClaudeの画面です。

最後まで答えたら、CodeGuideに戻って英文を入力し Next Step をおします。
入力した内容の確認画面がでるので Generate Outline をおします
次のページも何もせずに Create Docs をおします

 Cursorで使用するドキュメントを生成する
 生成するドキュメント一覧:
CodeGuideは以下のドキュメントを生成します。それぞれがプロジェクト開発の指針となります。

Project Requirement Document（プロジェクト要件文書）

App Flow Document（アプリの流れ）

Tech Stack Document（技術スタック文書）

Frontend Guidelines Document（フロントエンドガイドライン）

Backend Structure Document（バックエンド構造）

Implementation Plan（実装計画）

Project Rules（プロジェクトルール）
一番上の Project Requirements Document をクリックし Generate をおします


 Project Requirements Document（プロジェクト要件文書）
この文書は、プロジェクトを円滑に進めるために重要な情報を整理し、開発チームが共通の理解を持つためのガイドラインとなっています。
次ような文章が生成されます:

 Project Requirements Document
 1. Project OverviewThis web app is designed to serve developers, tech enthusiasts, and students who want to explore technical concepts in more depth. The core idea is to allow users to input specific technical keywords or phrases and receive immediate, contextually relevant explanations or suggestions generated by an advanced large language model. The app combines a simple, modern design with powerful AI capabilities so that users can easily enhance their understanding of technical topics.

 2. In-Scope vs. Out-of-ScopeIn-Scope:
（中略）
A dynamic home page with an input field for entering technical keywords or phrases.

Future Scalability Challenges:

Although scalability is in focus, future integration of additional AI models or export options could introduce complexity. Keeping the code modular and well-documented is essential for managing future growth or changes in functionality.
This document should serve as a clear, comprehensive guide for developing the web app with all major aspects, features, and considerations defined.
要約すると次のようになります
Project Overview（プロジェクト概要）

目的: プロジェクトの基本的な目的や、作成するアプリがどんな課題を解決するのかを明確にするための情報。
In-Scope vs. Out-of-Scope（範囲内・範囲外）

目的: 実装すべき機能（In-Scope）と、対象外の機能（Out-of-Scope）を明確に区別し、開発範囲を限定してプロジェクトを管理しやすくするための情報。
User Flow（ユーザーの利用手順）

目的: ユーザーが実際にどのような流れでアプリを操作するのかを具体的に示し、ユーザー体験を理解しやすくするための情報。
Core Features（主な機能）

目的: 実装が必須となる中心的な機能を具体的にリストアップし、開発チームが開発方針や優先順位を理解するための情報。
Tech Stack & Tools（使用する技術とツール）

目的: 採用する技術や開発ツールを明示し、チームが統一した環境で効率よく作業できるようにするための情報。
Non-Functional Requirements（非機能要件）

目的: 性能やセキュリティ、操作性など、機能以外の面でアプリが満たすべき基準を明確にし、品質やユーザー満足度を維持するための情報。
Constraints & Assumptions（制約と前提）

目的: プロジェクトにかかる制約条件や前提となる事項を示し、開発中の不確定要素を減らしてチームが正しく判断できるようにするための情報。
Known Issues & Potential Pitfalls（既知の課題とリスク）

目的: 開発や運用段階で起こり得るリスクや注意点を事前に共有し、あらかじめ対策を考えておくための情報。
続けて他の文章も生成していきましょう

 App Flow Document（アプリの流れ）
この文書は、アプリの利用開始から終了までのユーザー体験を詳細に整理し、開発チームがユーザーにとって使いやすく直感的なアプリを設計・実装できるようサポートすることを目的としています。
Introduction（イントロダクション）

目的:

アプリがどのようなユーザーを対象としていて、どのような機能を提供するかを説明し、アプリの目的やデザインの基本的な方向性を伝えるための情報。
Onboarding and Sign-In/Sign-Up（初回利用とログイン）

目的:

新規ユーザーや既存ユーザーが最初にアプリを利用する際の流れや、Google認証によるログイン・登録手順を説明し、ユーザーが簡単にアプリを使い始められるようにするための情報。
Main Dashboard or Home Page（ホーム画面）

目的:

ログイン後にユーザーが利用するメイン画面の構造やレイアウトを明確に示し、ユーザーがアプリ内で迷わずに目的の機能を使えるようにするための情報。
Detailed Feature Flows and Page Transitions（各機能の詳細な流れとページ間の移動）

目的:

各機能が実際にどのような流れで動作するかを具体的に示し、ユーザーがスムーズに操作できるように機能間のつながりを理解するための情報。
Settings and Account Management（設定とアカウント管理）

目的:

設定ページにおいて提供される機能（特にアカウント削除）の具体的な流れを明確にし、ユーザーが安全かつ簡単にアカウントを管理できるようにするための情報。
Error States and Alternate Paths（エラー状態と代替経路）

目的:

操作中に発生し得るエラーや特殊な状況（通信エラーや未認証アクセス）を整理し、ユーザーが混乱せず適切な行動をとれるようにするための情報。
Conclusion and Overall App Journey（結論とアプリ全体の流れ）

目的:

アプリ全体のユーザー体験の流れを総括し、開発者やチームがユーザー視点でアプリの全体像を掴みやすくするための情報。

 Tech Stack Document（技術スタック文書）
この文書は、プロジェクトで使用される技術やツールを明確に整理し、チームが開発や運用を円滑に進めるための共通基準を提供することを目的としています。
Introduction（イントロダクション）

目的:

プロジェクトの基本的な概要や目的を説明し、使用する技術スタックの選定背景を明らかにするための情報。
Frontend Technologies（フロントエンド技術）

目的:

画面側で使用される技術やツール（React、Vite、TypeScript、Tailwind CSS、shadcn UIなど）を明確にし、開発チームが一貫したUI/UXを効率よく作成するための情報。
Backend Technologies（バックエンド技術）

目的:

裏側の機能（認証、データベース、保存機能）を実現するために採用した技術（Supabase）を示し、データの安全かつ効率的な管理方法を明らかにするための情報。
Infrastructure and Deployment（インフラとデプロイ）

目的:

開発から本番環境への展開に至るまでの方法（Gitでのバージョン管理、CI/CDパイプラインなど）を整理し、安定的かつ迅速なリリースを可能にするための情報。
Third-Party Integrations（外部サービス連携）

目的:

利用する外部AIモデル（GPT-4o、将来的にClaude 3.7 Sonnet）や認証サービス（Google）を明確にし、アプリが提供するコア機能を円滑に動作させるための情報。
Security and Performance Considerations（セキュリティとパフォーマンス）

目的:

セキュリティ面での対策（Google認証、データ暗号化、Supabaseの安全性）と、リアルタイムなAIレスポンスを支える性能面の工夫（Viteによる高速ビルド）を明記し、ユーザーが安全かつ快適にアプリを利用できるようにするための情報。
Conclusion and Overall Tech Stack Summary（まとめと技術スタック概要）

目的:

全体で採用された技術やツールを簡潔にまとめ、プロジェクトの目的との適合性や技術選定の妥当性をチーム内で再確認するための情報。

 Frontend Guidelines Document（フロントエンドのガイドライン文書）
この文書は、フロントエンド開発における技術選定や実装方法、デザイン原則、性能最適化などをチーム全体で共有し、開発を円滑で効率的に進めることを目的としています。
Introduction（イントロダクション）

目的:

フロントエンドの目的や対象ユーザー、技術構成（Next.js 14、TypeScript、Tailwind CSS、shadcn UI）を紹介し、文書の背景や意図を明らかにするための情報。
Frontend Architecture（フロントエンドの構造）

目的:

フロントエンドで採用した技術構成（Next.js 14、app router、TypeScript）の具体的な構造を示し、スケーラブルで管理しやすい開発環境を提供するための情報。
Design Principles（デザイン原則）

目的:

UIデザインの基本理念（シンプルさ、直感的操作、ダークモード、レスポンシブ）を示し、誰でも分かりやすく魅力的なユーザー体験を提供するための情報。
Styling and Theming（スタイルとテーマ）

目的:

UIスタイルの詳細（Tailwind CSSによるダークモード、shadcnコンポーネント、モダンなフォント）を整理し、一貫性のある美しいインターフェースを実現し、ブランド変更にも柔軟に対応できるようにするための情報。
Component Structure（コンポーネント構造）

目的:

UIを構成する個々のパーツ（入力欄、AI応答表示、ナビゲーション、コピー機能など）をコンポーネント単位で管理し、再利用性を高めてメンテナンス効率を向上するための情報。
State Management（状態管理）

目的:

データの流れを整理する仕組み（ReactのContext APIやHooksを利用したリアルタイムなデータ管理）を示し、ユーザー入力やAIレスポンスをスムーズに処理・管理するための情報。
Routing and Navigation（ルーティングとナビゲーション）

目的:

アプリ内でのページ間移動の仕組み（Next.jsのapp router）を明確に示し、ユーザーがアプリ内で迷わず直感的に操作できるようにするための情報。
Performance Optimization（パフォーマンス最適化）

目的:

高速でスムーズな体験を実現するための手法（遅延読み込み、コード分割など）を示し、AIによるリアルタイムな回答表示をストレスなく行えるようにするための情報。
Testing and Quality Assurance（テストと品質管理）

目的:

採用するテスト方法（単体テスト、統合テスト、E2Eテスト）やツール（Jest、React Testing Library）を説明し、品質を一定以上に保ち、問題を早期に検出・修正するための情報。
Conclusion and Overall Frontend Summary（まとめとフロントエンド概要）

目的:

フロントエンド技術とその構成を簡潔にまとめ、プロジェクトの目的との整合性や開発の指針を再確認するための情報。

 Backend Structure Document（バックエンド構造文書）
この文書は、バックエンドに関する技術構成や管理方法、セキュリティやパフォーマンス対策までを網羅的にまとめ、開発と運用を円滑かつ安全に進めることを目的としています。
Introduction（イントロダクション）

目的:

バックエンドの基本的な役割（AI応答生成、認証、データ保存など）を示し、技術背景がない人でも分かりやすく全体像を掴めるようにするための情報。
Backend Architecture（バックエンドの構造）

目的:

サーバーレス（Supabase）を中心としたバックエンドの構造や、AIサービス（GPT-4o）との連携方法を明らかにし、スケーラブルでメンテナンスが容易なシステムを提供するための情報。
Database Management（データベース管理）

目的:

データ管理に用いるデータベース（SupabaseのPostgreSQL）の仕組みや設計方針を説明し、ユーザーの質問と回答の履歴を安全かつ効率よく保存・管理するための情報。
API Design and Endpoints（API設計とエンドポイント）

目的:

フロントエンドとバックエンド間の通信方法（RESTful API）や具体的なAPIエンドポイントを明確化し、各機能の処理を簡潔で分かりやすく実装・管理できるようにするための情報。
Hosting Solutions（ホスティング環境）

目的:

バックエンドサービスやデータベースのホスティング環境（Supabase、クラウドサービス）を整理し、安定的でスケーラブルなサービスを継続的に提供するための情報。
Infrastructure Components（インフラコンポーネント）

目的:

負荷分散（ロードバランサー）やキャッシュなど、サービスのパフォーマンス向上のために使用するインフラ技術を明確にし、ユーザーが快適にサービスを使えるようにするための情報。
Security Measures（セキュリティ対策）

目的:

認証方式（Googleサインイン）やデータ暗号化、APIアクセス制御など、セキュリティの仕組みを整理して示し、ユーザーデータを安全に保護するための情報。
Monitoring and Maintenance（監視と保守）

目的:

システムの正常稼働を監視する仕組み（リアルタイム監視、ログ記録、メンテナンス）を説明し、障害発生時も迅速に対応してユーザー体験を損なわないようにするための情報。
Conclusion and Overall Backend Summary（まとめとバックエンド概要）

目的:

バックエンド技術・構造を簡潔にまとめ、プロジェクトの目的とバックエンド実装方針の整合性を再確認し、チーム全体で共通の認識を持つための情報。

 Implementation Plan（実装計画）
この実装計画書は、開発プロジェクトを段階的に整理し、チームが一貫した方法で効率的に実装作業を進められるようにすることを目的としています。
Environment Setup（開発環境の準備）

目的:

プロジェクトを開発するために必要な環境（リポジトリのクローン、依存関係のインストールなど）を整備し、開発者がすぐにコードを書き始められるようにするための情報。
Frontend Development（フロントエンド開発）

目的:

ユーザーが直接触れる画面側の開発作業（ホームページ、プロフィール画面、認証UI、ダークモード設定、入力フォームなど）を具体的に整理し、快適で直感的なユーザー体験を提供するための情報。
Backend Development（バックエンドの開発）

目的:

裏側の処理（データベース構築、Google認証、AIモデル連携、クエリとレスポンスの保存機能など）を明確化し、リアルタイムで安全かつ正確なデータ処理を行うための情報。
System Integration（システム統合）

目的:

フロントエンドとバックエンド、認証機能、データベース保存、AI応答生成など、各部品を組み合わせて最終的に一体として動作させるための情報。
Final Deployment（本番環境への展開）

目的:

完成したアプリケーションを本番環境へ展開するための具体的な手順（環境変数の設定、CI/CDの設定、モニタリング・アラート設定など）を整理し、安定的でスムーズなリリースと運用を実現するための情報。

 Project Rules(previously .cursorrules)（プロジェクトルール（以前は .cursorrules））
この文書は、プロジェクトで守るべきルールを整理し、開発チームが迷うことなくプロジェクト要件を遵守しながら円滑に作業できることを目的としています。
Project Overview（プロジェクト概要）

目的:

プロジェクトの基本内容、ターゲットユーザー、利用する技術（LLM、Next.js、Google認証など）を簡潔に説明し、開発の共通認識を持つための情報。
Project Structure（プロジェクトの構造）

目的:

開発時のフォルダ・ファイル構成ルールを明確化し、Next.js 14の推奨構造（appディレクトリを中心としたApp Router）を統一して採用することで開発効率とメンテナンス性を向上するための情報。
Tech Stack Rules（技術スタックのルール）

目的:

使用する技術（Next.js、TypeScript、Tailwind CSS、shadcn UIなど）のバージョンや設定を明確化し、チームが技術面で一貫した品質を保つための情報。
PRD Compliance（要件文書への準拠事項）

目的:

プロジェクト要件文書で定められた必須事項（日本語限定、Google認証のみ、完全な履歴保存）を再確認し、プロジェクトの基本条件を必ず満たすための情報。
App Flow Integration（アプリの流れの統合方法）

目的:

フロントエンドとバックエンドの具体的な統合方法（Google認証やAI応答表示の実装場所など）を明示し、プロジェクト要件に基づくアプリの一体的な動作を実現するための情報。
Best Practices（ベストプラクティス）

目的:

採用する技術ごとの推奨される使い方や注意点（Vite、Tailwind CSS、TypeScript、Supabase、shadcn UI）を示し、品質・性能・安全性の基準を明確化して、安定したコードを維持するための情報。
Rules（開発ルール）

目的:

プロジェクト内で一貫して守るべき規則（ディレクトリ構造の統一、Next.jsのバージョン混在禁止など）を明文化し、開発上の混乱やミスを最小限に抑え、開発効率を最大化するための情報。

 ここまでのまとめ
このように、CodeGuideを使えば、SupabaseとCursorを活用したアプリ開発の初版をスムーズかつ迅速に進められます。
CodeGuideがAIの力で詳細なプロジェクト要件や技術スタックを自動生成するため、開発における曖昧さを減らし、具体的な設計・実装計画を効率的に作成できます。
また、要件定義やドキュメント作成が苦手な人でも、AIとのやりとりを通じて簡単にプロジェクトを整理し、明確な指針を持つことが可能になります。
これにより開発初期段階の手戻りを大幅に減らし、スムーズで迅速な開発を実現できるでしょう。

 Cursorで使う
 プロンプトを入手してCursorのAgentを動かす
CodeGuideで生成された資料は、Cursor の設定やコード生成に活用できます。

画面右下にある Copy Prompt をおして Cursor を選択します


クリップボードに次のようなプロンプトがはいります

Check if the URL "https://app.codeguide.dev/api/urls/e902883b-a9ba-4e50-ba5a-9d4ee3d7d604?download=true" returns a JSON or a blob.
If the URL returns a JSON with a message indicating that the URL is expired:

a. Stop the process.

b. Inform the user to follow the instructions written in the JSON.
If the URL returns a blob:

a. Download the project documents from the URL.

b. Unzip the downloaded files into a "documentation" folder at the root of the project.

c. Review the documents carefully.
Refer to the downloaded documentation for creating the project.
Check if cursor_project_rules.md file exists, if it does, create a Cursor project rules in .cursor/rules/project-rules.mdc with the content of cursor_project_rules.md
Check if an "implementation_plan.md" file exists in the documentation folder:

a. If it exists, follow the instructions in "implementation_plan.md" for implementing the project.

b. If it does not exist, proceed with the project implementation based on the other documents.

要約すると次のような内容です
URL Content Validation（URLコンテンツの確認）

目的:

提供されたダウンロードURLが有効か、また取得するデータがJSON形式かファイル形式（blob）なのかを明確にし、正しい方法でデータを取得するための情報。
File Handling and Documentation Setup（ファイルの設置とドキュメント確認）

目的:

ダウンロードしたファイル（文書類）をプロジェクトの指定ディレクトリ（/documentationなど）に展開・配置し、開発に必要な情報をチームが適切に参照できるようにするための情報。
Document Review（文書のレビュー）

目的:

ダウンロードした文書を注意深くレビューし、プロジェクトの要件や設計を正確に把握し、開発のミスや手戻りを防ぐための情報。
Project Creation based on Documentation（文書に基づいたプロジェクト作成）

目的:

提供された文書を参考にプロジェクトの環境構築や機能開発を開始し、文書との整合性を保ちながら開発を進めるための情報。
Cursor Project Rules Integration（Cursorプロジェクトルールの設定）

目的:

特別なルール文書（cursor_project_rules.md）が存在する場合、それをCursor IDEのプロジェクトルールとして取り込み、開発チーム内のルール遵守を徹底するための情報。

次にこのプロンプトをCursorのAgentモードの入力欄にいれてAgentを実行します

モデルは Claude 3.7 Sonnet を選択しましょう。

Agentが先ほど生成したドキュメントをcurlでダウンロードして、コードの生成を始めます

無事に生成が終わると次のような出力が出てアプリの初版の完成です。
起動してみます
npm run dev
http://localhost:3000 にアクセスすると初版が表示されました
ここから先はCursorのAgentを使ってレイアウトの修正や機能の実装をしていきましょう

 まとめこの記事では、CodeGuideを活用し、SupabaseとCursorを使ったアプリケーションの初版を効率よく作成する方法を紹介しました。
CodeGuideはAIを駆使してプロジェクト要件の文書化や技術選定をサポートし、開発の初期段階をスムーズに進めるのに役立ちます。
具体的には次の流れで進めました。

プロジェクトの作成と要件の明確化：CodeGuideで「React + Supabase」スターターキットを選択し、プロジェクトの目的や対象ユーザーを明確にしました。

使用ツール・LLMモデルの選定：開発ツールにはCursor、AIモデルにはClaude 3.7 Sonnetを指定し、開発環境を整えました。

要件定義：Q＆A形式での詳細な要件定義をAI（Claude）と協力して作成。

プロジェクト文書の生成：CodeGuideがプロジェクト要件文書、アプリの流れ、技術スタック文書などを生成。

Cursorとの連携：生成されたドキュメントをCursorに取り込み、効率的に初版を完成。
この手順を踏むことで、AIのサポートにより複雑な要件定義や技術選定が簡単になり、開発チームの共通認識も向上します。結果として、開発初期の手戻りが大幅に減り、迅速かつ効果的にプロジェクトを進めることが可能となります。
また、私のようなTypeScriptやSupabase初心者でも、実際に動作するアプリを簡単に手に入れることができるため、学習効率の向上にも役立ちます。
ぜひ、CodeGuideを活用して開発効率を高めてみてください！Enjoy!!

 （おまけ）CodeGuideのAIエージェント

CodeGuideの画面右側にある ➡️ をおすと、AIエージェントと音声会話ができます。

また、この音声会話は、自分のPCの画面共有をしながら、エージェントにアドバイスをもらうことができます。つまずいたときなどに活用できます。
利用にはGoogleのAPIキーが必要になります。
このエージェントは日本語での会話も可能ですが、英語での指示の方が精度が高いです。