Clineを使えるようにするまでの備忘録

# 対象読者
* AIエージェントに興味がある
* 無料でClineを動かしたい人
* Clineのセットアップでつまづいてしまった人
基本的には初心者向けの内容になっています。

# 1.はじめに
VSCodeなどのIDEで使用できる**自律型AIエージェント「Cline」** について、導入から実行までの手順を記します。
# 2.Clineとは
ClineはVSCodeなどのIDEで動作するオープンソースの自律型AIエージェントです。
* ファイル編集・作成からブラウザ操作まで、幅広い開発タスクを自律的に処理
* 使用する AI の API Provider は選択可能（OpenAI/Anthropic/Google Gemini など）
* 差分ビューやスナップショット管理機能により、誤操作のリスクを最小限に

従来の「コード補完ツール」に比べ、広範なタスクをカバーできるため、プロジェクト全体を大幅に効率化できます。

GitHubリポジトリはこちら
https://github.com/cline/cline

# 3.Clineの導入方法
## 3.1. インストール
VSCodeの拡張機能マーケットプレイス( Ctrl + Shift + X )から「Cline」を検索し、インストールします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3777186/0efe1040-dc20-a3e6-974c-8eb541a9d155.png)

インストール完了後、VSCodeを再起動するとサイドバーにClineのアイコンが表示されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3777186/fb7ddff1-5692-c259-daf9-dd06a5838755.png)


画像左下のClineのアイコンを選択して出てきた右上の歯車から設定を行います。

## 3.2. APIの選択
インストール後、サイドバー左下にあるClineのアイコンを選択し、右上の歯車から設定を行います。

1. Settingを開き、API Provider から Google Gemini を選択します。
2. 取得済みのGemini API Keyを入力します。
3. 設定に誤りがないか確認し、右上のDoneで設定を終えます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3777186/06bc516d-1a41-e01f-d3d4-626db09350f4.png)

青枠の説明にあるとおり、Gemini であれば1分間あたり15リクエストまで無料で利用できるため、お試しで遊ぶ分には十分ですね。


また、Custom Instructionsでカスタム指示をClineに適用することができます。Clineは基本的に英語で出力してくるため、とりあえずは日本語で出力するように指示しておきましょう。
そのほかに必要な指示があれば適宜設定してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3777186/972db5e7-747b-012a-ddea-81b66c5a9da5.png)



## 3.3. 権限の許可
タスク入力欄のすぐ上にある「Auto-approve」をクリックすると、複数のチェックボックスがある画面が表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3777186/65093940-45b5-1b8d-25bc-3ee1a38e2776.png)

与える権限を選択することで、承認作業をスキップして勝手にタスクを進めさせることも可能になります。

:::note warn
Clineがなんらかのエラー処理にハマってしまい、延々と同じ処理を繰り返すような場合があります。お遊び以外ではMax Requestsを厳しめに設定するか、人力での承認を行うようにしましょう。
:::

今回はGeminiを使用しており、無限ループに陥ったとしてもRequest上限に引っかかるだけですので、殆どすべての権限を渡した状態で、Max Requestを50に変更して実行してみます。

## 4. 実行
誰でも実行できるように、シンプルなPythonスクリプトをClineに作らせてみます。プロンプトは以下の通りです。

``` 
example.py というファイルを作成.
requestsライブラリを使ってGitHubのpublic APIからリポジトリ情報を取得.
リポジトリ名とスター数を整形して表示してください.
```

実際にexample.pyというファイルが作成され、以下のようなコードが書かれました。
```py
import requests

def get_repo_info(repo_owner, repo_name):
    url = f"https://api.github.com/repos/{repo_owner}/{repo_name}"
    try:
        response = requests.get(url)
        response.raise_for_status()  # エラーレスポンスをチェック
        repo_data = response.json()
        repo_name = repo_data['full_name']
        stars = repo_data['stargazers_count']
        print(f"リポジトリ名: {repo_name}")
        print(f"スター数: {stars}")
    except requests.exceptions.RequestException as e:
        print(f"エラーが発生しました: {e}")

if __name__ == "__main__":
    repo_owner = "octocat"  # 例として octocat/Spoon-Knife を使用
    repo_name = "Spoon-Knife"
    get_repo_info(repo_owner, repo_name)

```

その後、すべての権限を与えているため以下のコマンドでスクリプトを実行して結果まで見せてくれました。
```
python example.py
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3777186/02f8786a-478d-dbdd-791f-9e9558861857.png)

簡単なタスクだったので数回の試行で完了してしまいましたが、自律的に動いてくれることは確認できました。

# まとめ
今回はClineのセットアップ手順を中心に紹介しました。煩雑さを避けるため、MCP Serversや他のAPI利用時のコスト・パフォーマンスについては触れていません。Gmeminiは無料で始められるメリットがある一方、Cline上ではパフォーマンスが低めという声もあるようです。まずは本記事の手順に沿って実際に試し、必要に応じて別のAPIも検討してみてください。