AIでフロントエンドとバックエンドのアプリケーションを再び構築——RD Curve AI

年初に大規模言語モデルを使ってフロントエンドとバックエンドのプロジェクトを完成させようと試みました。詳細は「AIを使ってフロントエンドとバックエンドのプロジェクト全体を完成させた記録」をご覧ください。
当時の見解は、たとえ他の言語で書かれた既存のコードを参考にしても再現は難しく、かなりの部分で人間がコードの記述に関与する必要がある（特にコンパイルの問題や実行時バグに対して）というものでした。

しかし今年に入り、エージェントの急速な進歩がVibe Codingの急速な発展を後押しし、さらに私自身がNext.jsフレームワークに徐々に慣れてきたことで、この作業はずっと簡単になったように思います。

圧縮分野の研究者として、新しいRD曲線図を描くたびに、過去の実験データから旧手法の実験結果を探し出し、matplotlibのコードを書いて描画しなければならないことにずっと悩まされてきました。ここ数日、ついに我慢できなくなり、関連する実験データを管理し可視化するアプリケーション——RD Curve AIを作り始めました。ぜひお試しいただき、改善のご提案をいただければ幸いです。

今回のVibe Codingは実際にはわずか1日で完了し、個人的には非常にスムーズだったと思います。大まかな流れは以下の通りです。

まず、使用する技術スタックやコンポーネントなどを詳細に記述したプロンプトを作成します。実は、特によく整理する必要はなく、項目が十分に多く、頭の中の要件をカバーできていれば大丈夫です。以下に私の例を示します。

私は動画像圧縮の研究者です。新しいデータが出るたびにPythonコードを書いてRD曲線を描くのは非常に面倒です。以下の機能を備えたWebページを作成してください。

better-authを使用してメールアドレス登録とログインを行います。
ログイン後、ユーザーは新しいデータセットを作成し、名前と説明を記述できます。
データセット内で、ユーザーは新しいメソッド（例：「JPEG」）を作成し、説明を記述できます。
ユーザーはそのメソッドまたはそのメソッドのすべてのRDデータポイントを編集（削除を含む）できます。
ユーザーは任意の形式のデータファイル（txt、csvなど）をアップロードするか、実験結果のテキストを直接貼り付けることができ、AIが解析して{"name": "JPEG", "description": "some description", "data":[{bpp: float, psnr: float, ms_ssim: float}, ...]}形式の標準JSONデータに変換して表示します。ユーザーがデータベースに挿入するかどうかを判断し、同じ名前が存在する場合はbppに従ってデータポイントをソートしてマージし、他の内容は更新しません。
nameまたはdescriptionが解析されなかった場合は、ユーザーに入力させます。nameは必須です。
各ポイントは横軸を表すbppを必ず持ちます。PSNR、MS-SSIMなどはオプションで縦軸を表します。また、ユーザーはLPIPSなどの他の縦軸をカスタマイズして追加でき、デフォルトの2つの縦軸はユーザーが削除できます。
各縦軸データにはマッピング関数があり、ユーザーが定義する必要があります。これはグラフ上の数値を表します。例えばMS-SSIMの範囲は0-1ですが、グラフ上に表示する際には-10*log10(1 - ms_ssim)とする必要があります。ユーザーはこのマッピング関数を記入できますが、危険な関数を記入しないように注意してください。
AIはOpenAI形式のAPIを使用してデータ解析を行い、エンドポイント、APIキー、モデルなどのパラメータは環境変数で指定できます。
ユーザーはデータセット画面で各メソッドのRD曲線図を直接表示でき、特定のメソッドの曲線やメソッド内の特定のポイントの表示をキャンセルすることもできます。これらの表示情報はブラウザのローカルに保存され、次回アクセス時に復元できます。
すべてのAPIレスポンスとページ内容は英語を使用してください。
製品名は「RD Curve AI」です。
フロントエンドはshadcn/uiコンポーネントライブラリとlucideアイコンライブラリを使用してください。
データベースはDrizzle ORMを使用してPostgreSQLに接続してください。
パッケージ管理ツールとしてpnpmを使用し、shadcn/uiコンポーネントライブラリはnpxコマンドでインストールと初期化を行います。
型はzodを使用して検証と変換を行い、lib/types.tsファイルに統一して保存します。
環境変数はlib/config.tsファイルで一元管理とエクスポートを行います。
必要に応じて、shadcn mcpを呼び出してコンポーネントライブラリを検索し、lucide-icons mcpを呼び出してアイコンライブラリを検索し、context7 mcpを呼び出して使用する技術スタックの最新資料やドキュメントを検索できます。
可能な限り、既存のlibフォルダ内のコードを再利用してください。
すべてのAPI情報とフロントエンドテキストは英語を使用してください。

このプロンプトに加えて、以前に作成したパスワード暗号化やbetter-authの設定なども与えました。以前の経験から、この部分はAIが何度も反復しないと期待通りのコードを出力できないからです。
プロジェクト全体のプロンプトを作成します。これはAIに任せることもできますが、内容を微調整する必要があります。以下に私が微調整したバージョンも示します。

# RD Curve AI - Copilot Instructions

You are assisting with "RD Curve AI", a Next.js 16 application for video/image compression researchers to manage datasets and plot Rate-Distortion (RD) curves.

## Tech Stack & Key Libraries
- **Framework:** Next.js 16 (App Router), React 19
- **Database:** PostgreSQL, Drizzle ORM (`lib/schema.ts`, `lib/db.ts`)
- **Auth:** Better-Auth (`lib/auth.ts`, `lib/auth-client.ts`)
- **UI:** Tailwind CSS, shadcn/ui, Recharts (`components/rd-chart.tsx`)
- **Validation:** Zod (`lib/types.ts`)
- **AI:** OpenAI (for data parsing)

## Architecture Overview

### Data Model (`lib/schema.ts`)
The core hierarchy is **Dataset -> Method -> DataPoint**.
- **Dataset:** A collection of methods (e.g., "Kodak Dataset").
- **Method:** A specific algorithm (e.g., "JPEG", "HEVC").
- **DataPoint:** A single result with `bpp` (x-axis) and dynamic `metrics` (y-axis) stored in a `jsonb` column.
- **Metric:** Custom definitions for y-axis values (e.g., "PSNR", "MS-SSIM") with a `mapping_function` string for display transformation.

### Authentication Pattern
- **Server-side:** Use `auth.api.getSession({ headers: await headers() })` in API routes/Server Components.
- **Client-side:** Use `authClient` hooks (e.g., `useSession`).
- **Protection:** Always check `if (!session)` in API routes before sensitive operations.

### API Route Pattern (`app/api/**`)
Follow this pattern for Route Handlers:
1. **Auth Check:** Verify session immediately.
2. **Validation:** Parse request body with Zod schemas from `lib/types.ts`.
3. **DB Operation:** Use Drizzle to query/mutate.
4. **Response:** Return `NextResponse.json`.

## Critical Conventions

### Database & Drizzle
- **Schema:** Define all tables in `lib/schema.ts`.
- **IDs:** Use `uuid` with `.defaultRandom()`.
- **Relations:** Use `drizzle-orm` relations for cleaner queries.
- **JSONB:** Use the `metrics` jsonb column in `data_point` for flexible metric storage.

### Frontend Components
- **UI:** Use `components/ui` (shadcn) for primitives, install new ones with `npx shadcn@latest add <component>`.
- **Charts:** Use `Recharts` in `components/rd-chart.tsx`. Handle the `mapping_function` logic (likely via `lib/safe-eval.ts`) when rendering axes.
- **Icons:** Use `lucide-react`.
- **MCP:** Use `context7` mcp for documentation if needed. Use `shadcn` mcp for UI components. Use `lucide-icons` mcp for searching icons.

### Configuration
- **Env Vars:** Access via `lib/config.ts` (e.g., `CONFIG.OPENAI_API_KEY`), NOT `process.env` directly.
- **Types:** Keep shared Zod schemas and TS interfaces in `lib/types.ts`.

### Language
- All API responses and frontend text must be in English.

## Developer Workflows
- **Migrations:** Run `pnpm db:generate` and `pnpm db:migrate` when changing schema.
- **AI Parsing:** The parsing logic (converting text to JSON) should handle unstructured input and map it to the `data_point` structure.

しばらくするとAIがフレームワーク全体を構築してくれます。この時点で、エディタが表示するエラー指示に従って、一つずつAIに解決させます。
プロジェクトが正常に動作するようになったら、機能やフロントエンドページの調整を段階的に行います。この部分が最も時間がかかります。例えば、途中でBD-Rate計算機能を追加しようと思いつきました。ここで繰り返し反復することで、最終的に望むプロジェクトが得られるでしょう。

最後に述べておきたいのは、Vibe Codingは依然として初心者が比較的複雑なシステムタスクを完了するのを助けることはできないということです。人間はAIが書いたコードを完全に理解する必要は必ずしもありませんが、システムフレームワークについては比較的全体的な把握が必要です。ここで一つの過激な意見を引用します：「AIは（ほとんど）あなたができないタスクを手助けできない」。私のNext.jsフレームワークへの習熟は、この1年間独学し、AIの助けを借りて小さなプロジェクトを完成させたり、いくつかのオープンソースプロジェクトを改善したりする中で徐々に培われてきました。こうした経験の蓄積があって初めて、AIは効率を向上させる優れたツールとなるのです。