Cline チュートリアル入門：インストール、最初のタスク、Plan/Act、Rules、MCP
検証済みスクリーンショット 15 枚でたどる Cline チュートリアル。VS Code 拡張をインストールし、無料モデルで実際にアプリを作り、Plan/Act モード・Rules・MCP サーバーまで一歩ずつ解説します。
要点まとめ
- Cline は VS Code で動く無料オープンソースの AI コーディングエージェントです。拡張マーケットプレイスからインストールし、Google か GitHub でサインインすれば API キーなしで始められます。
- Absolutely Free プランは DeepSeek V4 Flash（100 万コンテキスト）や GLM-5.3-Flash などのホスト型モデルで動きます。このチュートリアルは 15 ステップで動く BMI 計算アプリを完成させます。
- Plan モードは推論モデルで戦略を立て、Act モードは高速モデルでコードを書きます。デモの Plan 分析全体でかかったのはわずか 0.0145 ドルです。
- 自分の Gemini キー、グローバルとワークスペースの Rules、GitHub や Context7 などの MCP サーバー——理想的な Cline 環境の三本柱です。
I Found 2 Ways to Use Cline for FREE (Best Free AI Coding Agent)
ウォークスルー動画：HMA WebCode5:26
Ideal Setup for Cline
事実ソース：Cline3:47
ウォークスルーの画像は HMA WebCode の無料セットアップデモから、Plan/Act 設定・Rules・MCP マーケットプレイスの画像は Cline 公式チャンネルのショート動画から取っています。モードの挙動・Rules の適用範囲・三本柱の構成についても公式動画を事実ソースとしています。
スクリーンショットの著作権は各チャンネルに帰属し、クレジットとタイムスタンプ深リンク付きで引用しています。手順の文章はすべて当サイトのオリジナルです。
Cline 15 ステップウォークスルー
Cline をインストールして無料枠を解放する
- 1
VS Code に Cline 拡張をインストール
VS Code の拡張ビューを開き、Cline で検索して、Cline Bot が公開する自律コーディングエージェントの項目で Install を押します。完了するとアクティビティバーに Cline のロボットアイコンが現れ、クリックするとエディターの横にエージェントパネルが開きます。
VS Code の拡張マーケットプレイスにある Cline の項目。Install で入れます。0:24 から視聴 - 2
Cline の使い方を選ぶ
初回起動時、Cline は使い方を尋ねて 4 つの選択肢を示します。Absolutely Free（ホスト型無料モデル）、ClinePlans（オープンウェイトモデルの有料サブスク）、Frontier Model（Cline 経由の従量課金）、Bring my own API key（自分のキー）。初心者はまず Absolutely Free を。API キーもクレジットカードも不要です。
Cline 初回起動画面の 4 つのセットアップ選択肢。0:34 から視聴 - 3
サインインして無料枠へ
Absolutely Free を選んで Log in to Cline を押し、Google か GitHub アカウントでサインインします。所要 10 秒ほどで支払い方法の入力はありません。サインイン後は Cline Usage-Billing が選ばれたプロバイダー画面に着地します。無料モデルはここから供給されます。
サインイン後の Usage-Billing プロバイダー画面とモデルタブ。1:46 から視聴 - 4
無料モデルと Reasoning Effort を選ぶ
モデルセレクターを開いて Free タブへ。DeepSeek V4 Flash（100 万トークンコンテキスト）、GLM-5.3-Flash、LongCat 2.0、Laguna S 2.1 すべてに FREE の表示があります。複数ファイルを速く処理したいなら DeepSeek V4 Flash を選び、Reasoning Effort は Medium のままで。Low は速く、High は深く考えますがトークンを食います。
deepseek/deepseek-v4-flash を選択し、Reasoning Effort は Medium。2:12 から視聴
最初のタスクを端から端まで流す
- 5
空のタスクボックスを開く
VS Code でプロジェクトフォルダーを開くか新規作成し、Cline アイコンを押します。パネルはシンプルな問いかけで始まり、この入力欄がすべてのタスクの入り口です。Auto-approve の行と Plan/Act の切替はパネル下部にあります。
最初のプロンプトを待つ Cline のタスクパネル。右下に Plan/Act。2:36 から視聴 - 6
最初のタスクを送る
タスクボックスに具体的な目標を入力します。例：HTML・CSS・JavaScript でモダンな BMI 計算 Web アプリを作る。身長はセンチ、体重はキロで入力し、BMI 値と判定ラベルを表示する。入力・出力・デザインの要件を具体的に書くと、一行の曖昧な指示よりはるかに良い結果が出ます。
Cline のタスクボックスに入力した BMI 計算アプリのプロンプト。2:58 から視聴 - 7
各アクションを承認する（または自動化）
Cline は一歩ずつ進みます。コマンド実行、ファイル作成、別ファイルの編集のたびに変更前の diff を見せます。単発で承認してもいいし、Auto-approve の Read / Edit / Commands をオンにしてチェックリストを自動で消化させても構いません。どちらにせよチェックポイントで各ステップを取り消せます。
index.html の作成承認を求める Cline。CSS の diff も表示されます。3:06 から視聴 - 8
完成したアプリを開く
数分でタスクが完了し、サマリーと BMI Calculation Checkpoint の記録が表示されます。生成された index.html を Live Server など任意の静的サーバーで開いて試しましょう。175 センチ・70 キロで BMI 22.9 — Normal。一行も書かずに動くアプリが完成です。
ブラウザーで動く完成した BMI 計算アプリと、VS Code 内の Cline サマリー。3:17 から視聴
トークンを無駄にしない Plan / Act モード
- 9
Plan モードと Act モードを知る
パネル下部のトグルで Plan と Act を切り替えます。Plan モードの Cline は調査だけを行い、ファイルを読み、質問し、実装計画を提示します。設定ダイアログには同名のタブがあり、モードごとに別のモデルを割り当てられます。Plan には強い推論モデル、Act には高速なコーディングモデルを。
Plan Mode / Act Mode タブでモード別にモデルを割り当てる Cline 設定。0:48 から視聴 - 10
Plan モードに先に考えさせる
タスクの分解はタイピングではなく分析なので、推論モデルは Plan モードでこそ輝きます。まだ何も書いていない段階では徹底調査も安く、デモの DRY 違反分析は 0.0145 ドルでした。計画中の質問には丁寧に答えましょう。ここでの修正ひとつが、後の手戻りを減らします。
Plan モードのタスクカード。分析結果・トークン数・API コスト 0.0145 ドル。1:10 から視聴 - 11
Act モードに切り替えてコードを書かせる
計画が気に入ったら Act へ切り替えます。計画は確定し、Cline がファイルを編集し始めます。この段階はコーディングモデルのほうが安く速く、だからこそモード分割がトークンを節約します。タスク再開画面にはショートカットの表示も。Win+Shift+A でモードを切り替えられます。
Act Mode タブを選び、実行用のコーディングモデルを割り当てた設定。1:28 から視聴
自分のキー・Rules・MCP マーケットプレイス
- 12
あるいは自分の無料キーを使う
共有の無料プールより自分のクォータがいいなら、Bring my own API key を選び、プロバイダーに Google Gemini を指定して、Google AI Studio の Get API key でキーを発行します。無料枠に必要なのは Google アカウントだけ。キーを Cline の API キー欄に貼り、Gemini モデルを選んで保存すれば、自分のクォータで動きます。
Google AI Studio の Create API key ダイアログで無料の Gemini キーを発行。3:54 から視聴 - 13
Rules で Cline に自分の規約を教える
Rules は Cline が全タスクで読み込む永続的な指示です。パネル設定の Rules タブを開くと、Global Rules はマシン上の全プロジェクトに適用され、Workspace Rules は現在のリポジトリに .clinerules ファイルとして置かれ、コミットして共有できます。コーディング原則・セキュリティ・ドキュメント方針・スタイルに向いています。
Cline 設定の Rules タブ。Global Rules と Workspace Rules のセクション。1:06 から視聴 - 14
モデルが実際に守れる Rules を書く
曖昧なルールは逆効果です。「可能な範囲でコードを最適化」では Cline に無視する余地を与えます。計測可能な引き金を書きましょう。ユニットテストが 100 ミリ秒を超えたら最適化する、クラスを書くときは SOLID 原則に従う、コードが仮定を置いたらインラインコメントを添える。Rules は生きたドキュメントとして保守し、矛盾を潰します。
具体的で計測可能な 3 つのルールを含むルールファイル。1:45 から視聴 - 15
MCP サーバーで Cline を拡張する
パネルの MCP Marketplace アイコンから、ワンクリックで能力を追加するサーバーを入れられます。リポジトリ操作の GitHub、最新ライブラリドキュメントの Context7、調査と計画の Perplexity や Sequential Thinking など。サーバーをインストールしてツールを承認すれば、タスクの途中でも Cline が呼び出せます。理想の環境の三本柱の三つ目です。
Cline の MCP Servers マーケットプレイス。GitHub サーバーカードと Install ボタン。2:44 から視聴