年初に大規模言語モデルを使って前後端プロジェクトを実行しようとしたが、詳細は「一度のAIによる前後端プロジェクトの完遂記録」を参照。その頃の考えでは、既存の他の言語のコード例があっても、再現が非常に困難で、特にコンパイル問題や実行時バグに関しては依然として人間の参加が必要だった。
しかし今年、エージェントの急速な進化によりVibe Codingも飛躍的に発展し、自分自身もNext.jsフレームワークに徐々に慣れ始めたことで、この作業がより簡単になったように思える。
圧縮分野の研究者として、毎回新しいRD曲線図を描くたびに過去の実験データから旧手法の結果を探し出し、matplotlibコードを書くのは本当に面倒だった。ここ数日、我慢できず、関連する実験データを管理し可視化するアプリケーションを作りたいと思い立った——RD Curve AI。ぜひ試していただき、改善点についてご意見をいただければ幸いだ。




今回のVibe Codingは実際、1日で完了した。個人的には非常にスムーズだったと感じている。主な流れは以下の通りである。
# 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.
最後に述べたいのは、Vibe Codingは初心者が複雑なシステムタスクを完遂するのを助けてくれるわけではないということだ。人間はAIが書いたコードを完全に理解する必要はないが、「システムフレームワーク」に対するある程度の包括的な理解は必要である。ここで引用する暴論:"AI(ほぼ)はあなたができないタスクを補ってくれない"。私自身がNext.jsフレームワークに精通したのは、一年間の独学と、AIの助けを借りながら小さなプロジェクトをいくつか実行したり、オープンソースプロジェクトをいくつか改善したりした経験の積み重ねによるものである。こうした経験が蓄積された後、ようやくAIが生産性を高める優れたツールとなるのである。
私は動画・画像圧縮の研究者です。新しいデータがあるたびにPythonコードでRD曲線を描くのは本当に面倒です。これを解決するウェブアプリを手伝ってください。
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を使用してデータ解析を行います。環境変数でendpoint、api key、モデルなどを指定できます。
データセット画面では、ユーザーは各方法の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情報とフロントエンドのテキストは英語でお願いします。