Generative AI

VScode拡張機能「Cline」を利用してMCPのツール利用する方法

こんにちは、エクスチュアの石原です。

今回はVScodeの拡張機能であるclineとそれを使用してMCPサーバーのインストールとツールの実行を行ってみます。

Cline(クライン)とは

VScodeの拡張機能であるAIを用いたコーディングアシスタント機能で、Cline Bot Inc.社が開発したツールでオープンソースで公開されています。

MCPサーバーがCline内のMarketplaceに登録されており、非常に簡単にMCPサーバーの構築と運用が可能です。

MCPサーバーマーケットプレイス

通常MCPを使用する場合はgithubなどからMCPのライブラリを取得して、サーバーを構築する必要があるのですが、Clineのサーバーマーケットプレイスを使用するとVScodeのマーケットプレイスと同じような形でダウンロードとオンオフの切り替えなどが可能です。

下記のMCPサーバーをインストールしてみます。

ダウンロード方法

右上のアイコンからMCPサーバー(左から2番目)を選択します。

するとMCPサーバー画面に切り替わるのでマーケットプレイスより「Graph」と検索します。

検索結果から該当のサーバーのinstallを選択してください。

すると自動的にタスクが立ち上がり、インストールを開始します。

実行していると下記のようにコマンドの許可などを求められる場合があるので都度対応してください。(Auto-approveを有効にすると次々に実行していくようになります。:実行許可を与えすぎないように注意)

Windowsでの実施する際の注意点

WindowsでMCPサーバーを実行する場合には下記のようなエラーが表示されることがあります。

  • spawn npx ENOENT spawn npx ENOENT

これはMCPサーバーのコンフィグを記載する上での問題でこちらのスレッドでも挙げられています

コンフィグの内npxコマンドのところを絶対パスで指定すればよいと報告されているため、是非お試しください。

Knowledge Graph Memory

インストールが完了するとInstalledよりインストールしたMCPサーバーの一覧が確認できます。

クリックして開くとこのMCPサーバーで実行可能なツールが一覧で表示されます。

この画面でAuto-approveを設定することもできます。

これでMCPサーバーのインストールと実行が可能になりました。

試してみましょう。

ブラウザの実行も許可した状態で検索するように指示を加えています。

すると、実際にブラウザを操作しながら検索を実施してくれます。(画面は肖像権的に載せていませんが実際に検索してくれていてなかなか面白いです)

下記が検索結果のもとに作成したエンティティです。

エンティティとリレーションという2軸でメモリを作成するのがこのMCPサーバーの特徴になります。

下記がリレーションです。

これで記録されている状態で別のスレッドを立てて、メモリを使用するように指示をしてみると、記録されている内容を呼び出すことが確認できました。

これで再度検索させる必要もなく、情報の更新のたびにメモリ自体を更新してくれるようになります。

まとめ

Clineを使用してMCPサーバーの構築を非常に簡単に実施できました。

今後常駐させるエージェントとしてこのようなツールが増えていくのではないかと思いますが、エンジニアとって身近なVScodeでこのように便利な拡張機能が使えるのは非常に強力だと思います。特にClineは自動でインストールを行ってくれる点が優秀だと思うのでこれから自分も使っていきたいと思います。

Tableauで検証?Wiiisdomでよくね?前のページ

NotebookLMで効率の良くインプットをしよう次のページ

ピックアップ記事

  1. 最速で理解したい人のためのIT用語集

関連記事

  1. ChatGPT

    Open Interpreter+VScode+Dockerで生成AIによるコード開発環境構築(Wi…

    はじめにこんにちは、エクスチュアの石原です。皆さん、…

  2. boxMCP

    Claude

    boxMCPサーバーを使ってみた

    こんにちは、中村です。最近なにかと話題のMCPサーバーですが…

  3. ChatGPT

    ChatGPTとVSCodeの連携方法とその使用例:開発効率を飛躍的にアップさせる

    こんにちは、石原と申します。今回のブログが初投稿となります。…

  4. Generative AI

    ChainlitでのOAuth認証にスコープを追加する方法

    こんにちは!ChainlitというPythonでチャットアプ…

  5. ChatGPT

    生成AIって何?今までのAIと何が違う?

    はじめにAIの世界は年々目覚しい発展を遂げています。最近では…

カテゴリ
最近の記事
  1. Account Engagementで送るメールをマルチエー…
  2. 協力と裏切りの理論
  3. 【Snowflake Tips】Content-Typeには…
  4. データ連携を自動化!Fivetranの概要・料金とスプレッド…
  5. Adobe WebSDK クロスドメイン計測【第2部】FPI…
  1. セッションリプレイ

    セッション・リプレイのレコーディングをローカルに保存する
  2. Amazon Web Services

    Direct Connect vs Site to Site VPN
  3. IT用語集

    テーブル(Table)・カラム(Column)・ロー(Row)・フィールド(Fi…
  4. Google Analytics

    Google Analytics フィルタ②
  5. 海外カンファレンス

    Adobe Summit 2018 レポート(2):経験の創造者たち
PAGE TOP