Day 5: APIs From Remote MCP
学習目標
Day4のLocal MCPサーバーをRemote MCPサーバーとしてデプロイし、Claude WebからもGoogle Docs操作を可能にする
今日学ぶこと
- Local MCP vs Remote MCP の違い
- HTTP/WebSocketベースのMCPサーバー実装
- Claude Web Custom Connectors との統合
- スケーラブルなAPI統合アーキテクチャ
- 本格的なEpisodicRAGシステムの基盤構築
プロジェクト構造
Day5_APIsFromRemoteMCP/
├── README.md # このファイル
├── package.json # Node.js プロジェクト設定
├── tsconfig.json # TypeScript設定
├── .env.example # 環境変数のサンプル
├── .gitignore # Git除外ファイル
├── vercel.json # Vercel デプロイ設定（オプション）
├── src/
│ ├── server.ts # Remote MCPサーバー本体
│ ├── routes/
│ │ ├── mcp.ts # MCP protocol endpoints
│ │ └── health.ts # ヘルスチェック
│ ├── services/
│ │ └── google-docs-remote.ts # Remote用Google Docsサービス
│ ├── middleware/
│ │ ├── auth.ts # 認証ミドルウェア
│ │ ├── cors.ts # CORS設定
│ │ └── error.ts # エラーハンドリング
│ └── utils/
│ ├── mcp-protocol.ts # MCPプロトコル実装
│ └── websocket.ts # WebSocket管理
├── deployment/
│ ├── vercel/ # Vercel用設定
│ ├── railway/ # Railway用設定
│ └── docker/ # Docker用設定
└── dist/ # コンパイル後のJavaScript
Day1-4からのステップアップ
これまでの学習 → Day5での発展
- Day1: Python関数 → スケーラブルなAPI関数
- Day2: Local MCP → Remote MCP Server
- Day3: 認証学習 → サーバーサイド認証管理
- Day4: Claude Desktop統合 → Claude Web + Custom Connectors
Local MCP vs Remote MCP
Local MCP (Day4)
Claude Desktop ←→ Node.js Process ←→ Google APIs
(stdio) (localhost) (OAuth2)
特徴:
- Claude Desktop専用
- Stdio通信（標準入出力）
- ローカルプロセス
- OAuth2認証（ユーザー権限）
Remote MCP (Day5)
Claude Web ←→ HTTP Server ←→ Google APIs
(HTTPS) (Remote Host) (Service Account)
特徴:
- Claude Web + Desktop 両対応
- HTTP/WebSocket通信
- リモートサーバー
- サービスアカウント認証（サーバー権限）
アーキテクチャ設計
Core Components
1. Remote MCP Server
// HTTP endpoint for MCP protocol
app.post('/mcp', handleMCPRequest);
// WebSocket for real-time updates
app.ws('/ws', handleWebSocket);
2. Authentication Strategy
// Day3で学んだサービスアカウント認証を活用
const auth = new GoogleServiceAccount({
keyFile: process.env.GOOGLE_SERVICE_ACCOUNT_KEY,
scopes: ['docs', 'drive']
});
3. Claude Web Integration
// Custom Connector 設定
{
"name": "EpisodicRAG Remote",
"url": "https://your-server.vercel.app/mcp",
"description": "Remote Google Docs operations"
}
技術スタック
Backend
- Express.js: HTTP サーバー
- ws: WebSocket サポート
- Google APIs: Day3・4の知識活用
- Zod: スキーマ検証（Day4と同じ）
Deployment Options
- Vercel: サーバーレス関数（推奨）
- Railway: フルスタックホスティング
- Docker: コンテナデプロイ
Security
- API Key認証: カスタムコネクタ用
- Rate Limiting: DDoS防止
- CORS: クロスオリジン制御
- Input Validation: Zod による検証
Day5の革新的なポイント
1. Universal Access
Claude Desktop (Day4) → Local MCP
Claude Web (Day5) → Remote MCP
Mobile Apps (Future) → Same Remote MCP
2. Scalable Architecture
Single Remote Server → Multiple Client Types
→ Multiple Google Accounts
→ Multiple API Integrations
3. EpisodicRAG Foundation
- Centralized Knowledge: すべてのクライアントから同じEpisodicRAGフォルダーにアクセス
- Unified API: 一貫したGoogle Docs操作
- Multi-User Support: 将来的な複数ユーザー対応
MCP Protocol Implementation
HTTP Endpoint Design
// MCP tools/list
GET /mcp/tools
// MCP tools/call
POST /mcp/tools/call
{
"name": "create_document",
"arguments": {
"title": "Remote Test Document"
}
}
WebSocket Real-time Updates
// Document creation notifications
ws.send({
"type": "document_created",
"data": {
"id": "doc_id",
"url": "https://docs.google.com/..."
}
});
セキュリティ考慮事項
1. API Key Management
- Environment Variables で秘密鍵管理
- Rotation 可能な API キー設計
- Per-client access control
2. Rate Limiting
// Per IP, Per API Key limits
const rateLimiter = rateLimit({
windowMs: 15 * 60 * 1000, // 15 minutes
max: 100 // requests per window
});
3. Input Sanitization
// Zod schema validation
const CreateDocSchema = z.object({
title: z.string().max(200).min(1),
content: z.string().max(10000).optional()
});
Deployment Strategy
Phase 1: Basic Remote MCP
- Express サーバー実装
- Day4 tools の HTTP 版変換
- Vercel デプロイ
- Claude Web テスト
Phase 2: Advanced Features
- WebSocket リアルタイム更新
- Multi-user support
- Advanced error handling
- Monitoring & Logging
Phase 3: EpisodicRAG Integration
- Knowledge graph connections
- Advanced document relationships
- AI-powered content suggestions
- Automated knowledge curation
🎉 デプロイ成功！
Railway.app でのデプロイ
- Public URL: https://testday5-production.up.railway.app
- Health Check: https://testday5-production.up.railway.app/health
- MCP Endpoint: https://testday5-production.up.railway.app/mcp
Claude Web Custom Connector設定
Name: Railway MCP Server
URL: https://testday5-production.up.railway.app/mcp
Description: Simple MCP server hosted on Railway
利用可能なツール
get_time- 現在時刻を取得echo- メッセージをエコーcalculate- 簡単な数式計算
成功基準
- Remote MCPサーバーがHTTPで動作する ✅
- Claude WebでCustom Connectorが設定できる ✅
- Railway.appでのデプロイ成功 ✅
- Day4と同等のGoogle Docs操作がリモートで可能
- スケーラブルなアーキテクチャの基盤完成 ✅
Day4との互換性
Shared Tools
create_document→ HTTP POST /mcp/tools/callwrite_to_document→ 同上list_loop_documents→ 同上create_learning_log→ 同上
Migration Path
Day4 Local MCP → Day5 Remote MCP → Hybrid Usage
Claude Desktop Claude Web Both Platforms
次のステップ（Day6以降展望）
- Advanced EpisodicRAG: AIベースのナレッジキュレーション
- Multi-API Integration: Slack, Notion, GitHub等との統合
- Real-time Collaboration: リアルタイム共同編集
- AI Assistant Integration: GPT-4, Claude等との直接統合