🤖

ClineとMCPを使ってdemoのecサイトを作る

2025/02/02に公開

Clineとは

https://github.com/cline/cline

Clineとは Githubのreadmeにもある通りCLIとエディターを使用できるAIアシスタントです。
コマンド実行やファイルの自動作成、コードの自動生成を自動で行ってくれるため、一度指示を出すだけで必要なライブラリのインストールからディレクトリ、ファイルの作成まで全てを行ってくれます。*1

またMCP(Model Context Protocol)との連携もできるようになっており、外部サービスと連携した開発もできるようになっています。
https://github.com/modelcontextprotocol

今回実施する内容

今回はClineとMCPの連携を見るために下記の縛りで行います。

  1. Jiraから開発タスクを取得して、その通りに開発を進める。
  2. タスクが完了したらgithubにpushして、PRを作成する。
  3. Confluenceに完了したタスクの仕様と設計書を記載する。
  4. Supabaseでのdatabae作成と接続
  5. Vercelへのデプロイ

使用するmodel

今回は anthropicのclaude-3.5-sonnetを使用しました。

modelによってClineのブラウザでの実行機能が使用できなかったりするので、Clineの性能を最大限引き出したい場合は対応しているmodelを使用することをお勧めします。

また、anthropicから直接使用するとlimitに達する可能性があったので、OpenRouter経由での使用をしています。
Clineから使用する場合はこの使用方法がメジャーなようです。
freeのmodelもあるので少し試したい時はおすすめです。
https://openrouter.ai/

使用するMCP

JiraとConfluence
https://github.com/sooperset/mcp-atlassian

github

MCPの設定

Clineに上記のMCPライブラリのリンクを貼って、構築してと頼めば自動で構築してくれます。
アクセストークンなどを要求されたタイミングで渡すだけでOKでした。

Jiraからのタスク取得

MCPの設定ができれば後は指示してくだけでClineが勝手にやってくれます。
Jiraからのタスク取得も少しチューニングが必要でしたが可能でした。

タスク終了時のgithubへのpush、Confluenceへの仕様書作成

こちらも正常に動作できました。

Confluenceに自動作成された仕様書はこんな感じ

SupabaseやVercelへの接続

Supabaseへのデータベース作成や接続、Vercelへの接続も必要なタイミングでAPIキーなどの情報を求めてきて渡すだけで接続ができました。

タスク完了時の振り返り

下記の記事を参考にさせていただいて、タスク完了時にClineに振り返りをしてもらうようにしました。
そこで出た内容を .clinerules に載せて、プロンプトを自動で改良していくということも可能になります。

https://zenn.dev/berry_blog/articles/c72564d4d89926#2.-実践しながらルールを育てる

デメリット

一部、環境構築中などにClineだけでは直せないエラーが発生したりしましたが、Cursor側にTermialで発生しているエラーを投げたら解決してくれたので、Clineで大まかな実装をして、細かいエラーなどの修正をCursor側に任せるといい感じに開発を進められると感じました。

また、modelのクレジットがそこそこかかるので注意です。

総評

MCPを使用してサービスを作ることで、コーダーとしての業務をClineに任せることが出来るのは素晴らしいと思います。
ただ、まだセキュリティ面など最終的に人が確認しなければならないことが多いとも感じるので完全にAIにコード生成を任せるのはまだ早いかなといった所感です。

何より頭使わなくなるので、考える力がなくなりそうで怖い。

*1 コマンドなどは承認制にもできるので、全てを勝手に行わせないこともできます

Discussion