🚀

Clineに「アプリ作って」と頼んだら3分で完成した【Cursor + OpenRouter】

に公開
AI
Node.js
Playwright
Cursor
Cline
tech

3分で動くものができた

Cline（VSCode拡張のAIアシスタント）に「画像をアップロードしたらキャプションを生成するアプリ作って」と頼んだら、本当に3分で動くものができた

https://www.youtube.com/watch?v=NfiANCh-dfE

フロントエンド、バックエンド、E2Eテストまで全部AIが書いてくれる。最初は「すごい」と思ったけど、使ってみて気づいたこともあった

完成したアプリの動作確認
https://www.youtube.com/watch?v=id3OaKEfIr8

使ったツール

今回使ったのはこのあたり：

  • Cursor: AI統合開発環境
  • Cline: VSCode拡張のAIアシスタント
  • OpenRouter: 複数のAIモデルを統一API経由で利用できるサービス
  • Playwright: E2Eテストフレームワーク
  • Google AI Studio: Gemini APIキーの取得に使用

CursorはAI対応のエディタ、ClineはAIがコードを書いてくれるVSCode拡張、OpenRouterは複数のAIモデルをまとめて使えるサービス。ざっくりそんな認識でOK

事前準備

先に済ませておくこと。

AIプロバイダーのキーを取得

例：Anthropic / OpenAI / Google Gemini / AWS Bedrock

私は OpenRouter + Gemini 2.5 Pro プレビュー を選んだ。OpenRouterはGoogle・Anthropic・OpenAIなど複数プロバイダーのモデルをまとめて使えて、無料枠もあるので試しやすい

Cursorのインストール

公式サイトからダウンロードしてインストール。

Clineのインストール

公式ドキュメントに従ってCursor拡張機能としてインストール。

Google AI StudioでGemini APIキーを取得

APIキー取得ページからAPIキーを取得。サンプルコードで使う。

アプリ作成

画像をアップロードするとプレビューを表示し、AIが自動でキャプションを生成するアプリ。PlaywrightでE2Eテストまでやる。

1. プロジェクトディレクトリの作成

プロジェクト用のディレクトリを作成し、Cursorで開きます。
私の場合は ai-caption-app という名前にしました。

mkdir ai-caption-app
cd ai-caption-app
mkdir tests

E2Eテスト用の画像 tests/sample.jpg も配置しておきます。
この画像はPlaywrightのテストで使用されます。

2. Clineを開く

Cmd/Ctrl + Shift + P を押してコマンドパレットを開き、Cline: Open In New Tab と入力して、エディタ内にClineをタブで開きます。

Clineを開く手順

3. Clineの設定

3-1. AIモデルの設定

OpenRouter + Gemini 2.5 Pro プレビュー を選びました

AIモデルの設定画面

3-2. モードについて

Clineには Planモード と Actモード があります。
今回はシンプルなアプリなので、初めからActモードで実装を進めます。
通常はPlan → Actの流れが一般的ですが、お好みで調整してください。

モード設定画面

詳しくはこちら：PlanとActについて

  • Actモード：指示に対し即座にコードを実装／修正します
  • Planモード：まず計画を立ててから実装を行います

3-3. Auto-approveの設定

Auto-approveは、AIの提案を自動的に承認して進行させる機能です。以下の2つだけを有効にします：

  • Read project files: 現在のワークスペース内のファイル読み取りを許可
  • Edit project files: ワークスペース内のファイル編集を許可

※ワークスペース外のファイルにはアクセスさせません。

Auto-approve設定画面

設定可能なオプションはこちら：Auto-approveオプション

4. ./.clinerules を作成

このプロジェクトのガイドラインを ./.clinerules に記載します。
Clineに技術スタックや設計方針を伝えるためのファイル。

# プロジェクト概要

## 技術スタック
- フロントエンド: Vanilla JavaScript, HTML, CSS（外部ライブラリなし）
- バックエンド: Node.js, Express
- 画像アップロード: multer
- AI連携: @google/generative-ai
- モデル: gemini-2.5-flash（画像入力対応）
- 環境変数: dotenv
- E2Eテスト: Playwright

## プロジェクト構造
- /public: フロントエンド静的ファイル
- /: server.jsなどのバックエンド
- /tests: Playwrightのテストファイル

## コーディングガイドライン

### 一般
- コードはクリーンで読みやすく
- fetch APIでフロントとバックエンドを通信
- async/await＋適切なエラーハンドリング
- APIキーは `.env` に格納（ハードコーディングしない）

### 命名規則
- 変数・関数: camelCase
- 定数: UPPER_SNAKE_CASE
- ファイル名: 意味のある命名（例：imageHandler.js）

## 編集禁止ファイル
- "!.env"
- "!node_modules/"

5. AIに開発を依頼する

Clineのチャット欄に以下のように入力する。

画像をアップロードするとプレビューを表示し、AIが自動でキャプションを生成するアプリを作成してください。

送信すると、AIがプロジェクト構造の提案からpackage.json作成、バックエンド・フロントエンドの実装、環境変数の設定まで一気に進めてくれる。.clinerulesで指定した技術スタックに従いながら、各ステップでファイルを自動生成していく

指示を入力してから完成までの流れはこちら

https://www.youtube.com/watch?v=NfiANCh-dfE

6. アプリ完成

package.json、server.js、public/配下のフロントエンド一式、.env——全部AIが生成してくれた

完成したアプリの動作確認はこちら

https://www.youtube.com/watch?v=id3OaKEfIr8

7. PlaywrightでE2Eテスト実施

Clineのチャット欄に以下の指示を入れる。

PlaywrightでE2Eテストを作成し、tests/sample.jpgをアップロードしてキャプション生成を確認してください。結果のスクリーンショットは、内容がわかるファイル名で保存してください。

テスト実行の様子はこちら
https://www.youtube.com/watch?v=PtknyFIgSes

テスト実行後の結果はこんな感じ。

ターミナル出力例

Running 1 test using 1 worker

  ✓  1 tests\e2e.spec.js:4:1 › E2E test for AI caption generation (9.1s)

  1 passed (10.5s)

スクリーンショット

Playwrightがスクリーンショット tests/caption-result.png を自動生成してくれる。画像アップロード→プレビュー表示→キャプション生成まで、一連の動作が通っていることが確認できる

E2Eテスト結果

3分で作れた、その先

Cursor + Cline + OpenRouterで、E2Eテストまで含めて3分。ツールの組み合わせ自体は簡単で、誰でも再現できると思う

ただ、3分で作れた達成感のあとに「で、これどうなってるんだっけ」が来る。AIに丸投げしたコードを キャッチアップしないまま使うと、修正が必要になったとき認知コストが跳ね上がる

処理の流れや設計方針を自分の頭で先に描いてからAIに指示する。そうすると出力されるコードの質も上がるし、レビューもスムーズになる。結局、「自分でも書ける」状態であることが、良いプロンプトを書くための前提条件 だった

Discussion