# Plume MCP Server - プロジェクトセットアップガイド
このプロジェクトは、Plume CMSをModel Context Protocol (MCP)サーバー化し、ChatGPTやClaudeなどのAIアシスタントが直接ブログ記事を管理できるようにします。
## 📚 関連ドキュメント
### 必須参照ドキュメント
1. **API仕様書**: `/Users/fukudatomohiro/DevCode/Plume/api/MCP_API_SPEC.md`
- Plume CMS APIの完全な仕様
- 認証方法、エンドポイント、型定義、エラーハンドリング
2. **親Issue**: https://github.com/tomohirof/plume-cms/issues/65
- プロジェクトの全体像と要件
- MCPツールの仕様
- 実装の優先順位
3. **依存Issue**: https://github.com/tomohirof/plume-cms/issues/68
- `GET /api/users/me` エンドポイント（実装済み）
## 🎯 プロジェクト概要
### リポジトリ情報
- **名前**: `plume-mcp-server`
- **場所**: `/Users/fukudatomohiro/DevCode/plume-mcp-server`
- **公開先**: npm（`@plume-cms/mcp-server`）
- **ライセンス**: MIT
### 技術スタック
- **ランタイム**: Node.js >= 18.0.0
- **言語**: TypeScript 5.3+
- **MCP SDK**: `@modelcontextprotocol/sdk` ^1.0.0
- **バリデーション**: Zod ^3.22.4
- **テスト**: Vitest ^1.0.0
- **ビルド**: TypeScript Compiler (tsc)
## 📁 ディレクトリ構造
```
plume-mcp-server/
├── package.json
├── tsconfig.json
├── .env.example
├── README.md
├── LICENSE
├── src/
│ ├── index.ts # メインエントリーポイント
│ ├── server.ts # MCPサーバー設定
│ ├── config.ts # 環境変数管理
│ ├── tools/ # ツール実装
│ │ ├── auth.ts # 認証ツール
│ │ ├── articles.ts # 記事管理ツール
│ │ └── index.ts # ツール登録
│ ├── client/ # Plume API クライアント
│ │ ├── api.ts # APIクライアント
│ │ └── types.ts # 型定義
│ └── utils/ # ユーティリティ
│ ├── errors.ts # エラーハンドリング
│ └── validation.ts # バリデーション
├── dist/ # ビルド出力
└── tests/ # テスト
├── tools/
└── client/
```
## 🔧 実装するMCPツール（MVP版）
### 認証関連（2個）
1. **`plume_login`**
- 説明: Plume CMSにログインし、認証トークンを取得
- API: `POST /api/auth/login`
- 入力: `{ email: string, password: string }`
- 出力: `{ token: string, user: {...} }`
2. **`plume_get_current_user`**
- 説明: 現在ログイン中のユーザー情報を取得
- API: `GET /api/users/me`
- 入力: なし（トークンから自動取得）
- 出力: `{ id, email, name, role }`
### 記事管理（6個）
3. **`plume_list_articles`**
- 説明: 記事一覧を取得（検索・フィルタリング可能）
- API: `GET /api/blogs/:blogId/articles`
- 入力: `{ blog_id, search?, status?, category_ids?, tag_ids? }`
- 出力: `{ articles: [...] }`
4. **`plume_get_article`**
- 説明: 記事の詳細情報を取得
- API: `GET /api/blogs/:blogId/articles/:id`
- 入力: `{ article_id, include_metadata? }`
- 出力: `{ id, title, content, ... }`
5. **`plume_create_article`**
- 説明: 新規記事を作成
- API: `POST /api/blogs/:blogId/articles`
- 入力: `{ blog_id, title, content, slug, status?, ... }`
- 出力: 作成された記事
6. **`plume_update_article`**
- 説明: 既存記事を更新
- API: `PUT /api/blogs/:blogId/articles/:id`
- 入力: `{ article_id, title?, content?, ... }`
- 出力: 更新された記事
7. **`plume_publish_article`**
- 説明: 下書き記事を公開状態に変更
- API: `PUT /api/blogs/:blogId/articles/:id` (statusを'published'に)
- 入力: `{ article_id }`
- 出力: 更新された記事
8. **`plume_delete_article`**
- 説明: 記事を削除
- API: `DELETE /api/blogs/:blogId/articles/:id`
- 入力: `{ article_id }`
- 出力: `{ success: boolean, message: string }`
## 🚀 実装フェーズ
### フェーズ1: プロジェクトセットアップ ✅（このセッション）
- [x] リポジトリ作成
- [ ] package.json設定
- [ ] TypeScript設定
- [ ] ディレクトリ構造作成
- [ ] .env.example作成
### フェーズ2: APIクライアント実装
- [ ] `src/client/types.ts` - 型定義（API仕様書から）
- [ ] `src/client/api.ts` - APIクライアント
- [ ] 認証メソッド（login, getCurrentUser）
- [ ] 記事管理メソッド（list, get, create, update, delete）
### フェーズ3: MCPサーバー実装
- [ ] `src/server.ts` - MCPサーバー設定
- [ ] `src/config.ts` - 環境変数管理
- [ ] `src/index.ts` - エントリーポイント
### フェーズ4: MCPツール実装
- [ ] `plume_login`
- [ ] `plume_get_current_user`
- [ ] `plume_list_articles`
- [ ] `plume_get_article`
- [ ] `plume_create_article`
- [ ] `plume_update_article`
- [ ] `plume_publish_article`
- [ ] `plume_delete_article`
### フェーズ5: テスト・ドキュメント
- [ ] ユニットテスト
- [ ] 統合テスト
- [ ] README.md作成
- [ ] 使用例ドキュメント
### フェーズ6: 公開
- [ ] NPM公開準備
- [ ] `@plume-cms/mcp-server` として公開
- [ ] GitHub Releasesタグ作成
## 🔑 環境変数
### 開発環境（.env）
```bash
PLUME_API_URL=http://localhost:8004
PLUME_EMAIL=your-email@example.com
PLUME_PASSWORD=your-password
```
### 本番環境
```bash
PLUME_API_URL=https://plume-api-production.tomohirof.workers.dev
PLUME_EMAIL=your-email@example.com
PLUME_PASSWORD=your-password
```
## 📦 package.json の基本構成
```json
{
"name": "@plume-cms/mcp-server",
"version": "1.0.0",
"description": "Model Context Protocol server for Plume CMS - AI-powered blog management",
"main": "dist/index.js",
"bin": {
"plume-mcp-server": "dist/index.js"
},
"scripts": {
"build": "tsc",
"dev": "tsx src/index.ts",
"test": "vitest",
"lint": "eslint src",
"inspector": "npx @modelcontextprotocol/inspector node dist/index.js"
},
"keywords": [
"mcp",
"model-context-protocol",
"plume-cms",
"ai",
"claude",
"chatgpt",
"blog",
"cms"
],
"engines": {
"node": ">=18.0.0"
},
"dependencies": {
"@modelcontextprotocol/sdk": "^1.0.0",
"zod": "^3.22.4",
"dotenv": "^16.3.1"
},
"devDependencies": {
"@types/node": "^20.0.0",
"typescript": "^5.3.0",
"tsx": "^4.7.0",
"vitest": "^1.0.0",
"eslint": "^8.55.0"
}
}
```
## 🧪 テスト方法
### MCP Inspector（デバッグツール）
```bash
npm run inspector
```
### Claude Desktopでのテスト
1. 設定ファイルに追加（macOS: `~/Library/Application Support/Claude/claude_desktop_config.json`）
```json
{
"mcpServers": {
"plume-cms": {
"command": "npx",
"args": ["-y", "@plume-cms/mcp-server"],
"env": {
"PLUME_API_URL": "https://plume-api-production.tomohirof.workers.dev",
"PLUME_EMAIL": "your-email@example.com",
"PLUME_PASSWORD": "your-password"
}
}
}
}
```
2. Claude Desktopを再起動
3. 以下のような会話でテスト:
```
User: Plume CMSにログインして、記事一覧を取得してください
Claude: [plume_login を呼び出し] → [plume_list_articles を呼び出し]
```
## 📚 参考資料
- [MCP公式ドキュメント](https://modelcontextprotocol.io/)
- [TypeScript SDK](https://github.com/modelcontextprotocol/typescript-sdk)
- [Plume CMS API仕様](file:///Users/fukudatomohiro/DevCode/Plume/api/MCP_API_SPEC.md)
- [Plume CMS リポジトリ](https://github.com/tomohirof/plume-cms)
## 🎬 次のステップ
1. **このディレクトリで新しいClaude Codeセッションを開始**
```bash
cd /Users/fukudatomohiro/DevCode/plume-mcp-server
claude
```
2. **最初のプロンプト**:
```
PROJECT_SETUP_GUIDE.mdとAPI仕様書（/Users/fukudatomohiro/DevCode/Plume/api/MCP_API_SPEC.md）を読んで、
Plume MCP Serverプロジェクトのセットアップを始めてください。
まずはpackage.jsonとTypeScript設定から始めましょう。
```
3. **開発方針**:
- TDD（テスト駆動開発）で実装
- API仕様書の型定義を活用
- MCP SDKのベストプラクティスに従う
