🐢
Cline公式の.clinerulesを用いてMCPプラグインを作成する
Cline公式DocsにMCPサーバーをClineによって作成する方法が書かれているのを発見したのでその通りにやって本当に作成できるのか試してみる。
流れは簡単で、
- Cline公式特製
.clinerulesを自前の環境に配置 - 作成したいMCPサーバーのプロンプトを作成
- Cline実行
だけ。
肝は公式の提供するこの.clinerulesだ。.clinerulesのお手本としても参考になる。
# MCP Plugin Development Protocol
⚠️ CRITICAL: DO NOT USE attempt_completion BEFORE TESTING ⚠️
## Step 1: Planning (PLAN MODE)
- What problem does this tool solve?
- What API/service will it use?
- What are the authentication requirements?
□ Standard API key
□ OAuth (requires separate setup script)
□ Other credentials
## Step 2: Implementation (ACT MODE)
1. Bootstrap
- For web services, JavaScript integration, or Node.js environments:
```bash
npx @modelcontextprotocol/create-server my-server
cd my-server
npm install
```
- For data science, ML workflows, or Python environments:
```bash
pip install mcp
# Or with uv (recommended)
uv add "mcp[cli]"
```
2. Core Implementation
- Use MCP SDK
- Implement comprehensive logging
- TypeScript (for web/JS projects):
```typescript
console.error('[Setup] Initializing server...');
console.error('[API] Request to endpoint:', endpoint);
console.error('[Error] Failed with:', error);
```
- Python (for data science/ML projects):
```python
import logging
logging.error('[Setup] Initializing server...')
logging.error(f'[API] Request to endpoint: {endpoint}')
logging.error(f'[Error] Failed with: {str(error)}')
```
- Add type definitions
- Handle errors with context
- Implement rate limiting if needed
3. Configuration
- Get credentials from user if needed
- Add to MCP settings:
- For TypeScript projects:
```json
{
"mcpServers": {
"my-server": {
"command": "node",
"args": ["path/to/build/index.js"],
"env": {
"API_KEY": "key"
},
"disabled": false,
"autoApprove": []
}
}
}
```
- For Python projects:
```bash
# Directly with command line
mcp install server.py -v API_KEY=key
# Or in settings.json
{
"mcpServers": {
"my-server": {
"command": "python",
"args": ["server.py"],
"env": {
"API_KEY": "key"
},
"disabled": false,
"autoApprove": []
}
}
}
```
## Step 3: Testing (BLOCKER ⛔️)
<thinking>
BEFORE using attempt_completion, I MUST verify:
□ Have I tested EVERY tool?
□ Have I confirmed success from the user for each test?
□ Have I documented the test results?
If ANY answer is "no", I MUST NOT use attempt_completion.
</thinking>
1. Test Each Tool (REQUIRED)
□ Test each tool with valid inputs
□ Verify output format is correct
⚠️ DO NOT PROCEED UNTIL ALL TOOLS TESTED
## Step 4: Completion
❗ STOP AND VERIFY:
□ Every tool has been tested with valid inputs
□ Output format is correct for each tool
Only after ALL tools have been tested can attempt_completion be used.
## Key Requirements
- ✓ Must use MCP SDK
- ✓ Must have comprehensive logging
- ✓ Must test each tool individually
- ✓ Must handle errors gracefully
- ⛔️ NEVER skip testing before completion
まずはこの.clinerulesを作業ディレクトリに作成する。
そして何を作りたいか？目的は何か？といったことをプロンプトとして2,3行で書くだけ。今回はscrapboxの公開ページの内容を取得してくれるMCPサーバーを作ってもらう。
私はScrapboxの任意のページのURLを指定すると、そのページの内容を取得するMCPプラグインを作りたいです。
Scraxpboxのページのリンクは下記のような形式です。
https://scrapbox.io/razokulover-tech-memo/%E3%82%B3%E3%83%AB%E3%83%96%E3%81%AE%E7%B5%8C%E9%A8%93%E5%AD%A6%E7%BF%92%E3%83%A2%E3%83%87%E3%83%AB
あとはplan実行->act実行と進めば作成完了となる。
planモードで計画してくれた仕様はこんな感じ。
# Scrapbox MCP プラグイン
## 概要
このMCPプラグインは、Scrapboxの任意のページのURLを指定すると、そのページの内容を取得する機能を提供します。Model Context Protocol (MCP)を使用して、AIアシスタントがScrapboxのコンテンツを直接参照できるようにします。
## 機能
- Scrapbox URLからページコンテンツを取得
- ページのタイトル、本文、リンク等の情報を構造化されたデータとして提供
- エラーハンドリングとログ記録
## 使用するAPI
- Scrapbox公開API
- エンドポイント: `https://scrapbox.io/api/pages/{projectName}/{pageTitle}`
- 認証: 公開ページの場合は不要
## 技術スタック
- TypeScript/Node.js
- MCP SDK
- axios (HTTPリクエスト用)
## 実装計画
### ツール
1. `get_page_content`: Scrapboxページの内容を取得するツール
- 入力: Scrapbox URL
- 出力: ページの内容（タイトル、本文、リンク等）
### 実装ステップ
1. プロジェクトのブートストラップ
2. Scrapbox APIとの通信機能の実装
- URLからプロジェクト名とページ名を抽出する関数
- APIリクエストを行う関数
3. MCPツールの実装
4. エラーハンドリングとログ記録の追加
5. 設定ファイルの作成
### エラーハンドリング
- 無効なURL形式
- 存在しないページ
- APIレスポンスエラー
- ネットワークエラー
## 使用方法
### インストール
# MCPプラグインのインストール
npm install
npm run build
### 設定
MCP設定ファイルに以下を追加:
{
"mcpServers": {
"scrapbox": {
"command": "node",
"args": ["path/to/build/index.js"],
"disabled": false,
"autoApprove": []
}
}
}
### 使用例
ユーザー: Scrapboxの「コルブの経験学習モデル」ページの内容を教えて
アシスタント: [MCPツールを使用してScrapboxページの内容を取得]
コルブの経験学習モデルについての情報:
...
## テスト計画
1. 有効なScrapbox URLでのテスト
2. 無効なURLでのテスト
3. 存在しないページでのテスト
4. 大きなページでのテスト（パフォーマンス）
## ライセンス
MIT
あとはClaude.appなどからMCPサーバーを利用してくれるかどうかテストするだけ。うまくいくとこんな感じでMCPサーバー経由でコンテンツを取得してくれるはず。
最終的にできたコードはこれ。
ちなみに少しハマった点。
ClineがClaude.appへのMCP設定もしてくれるのだけど、MCP設定ファイルのjsonに"command": "node",という感じでnodeを指定するとコマンドが見つからなくてspawn node ENOENTみたいなエラーが出る。これはClaude.appのディレクトリからnodeにアクセスできないという感じのエラーなので、nodeではなく絶対パスとして/Users/hoge/.shims/nodeとかとにかくnodeの絶対パスとして指定しておくとこの手のエラーは消えるはず。
{
"mcpServers": {
"scrapbox-mcp": {
"command": "/Users/hoge/.nodenv/shims/node",
"args": [
"/Users/hoge/dev/scrapbox-mcp/build/index.js"
]
}
}
}
参考
Discussion