Day 5: APIs From Remote MCP

学習目標

Day4のLocal MCPサーバーをRemote MCPサーバーとしてデプロイし、Claude WebからもGoogle Docs操作を可能にする

今日学ぶこと

1. Local MCP vs Remote MCP の違い
2. HTTP/WebSocketベースのMCPサーバー実装
3. Claude Web Custom Connectors との統合
4. スケーラブルなAPI統合アーキテクチャ
5. 本格的な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

1. Vercel: サーバーレス関数（推奨）
2. Railway: フルスタックホスティング
3. 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

1. Express サーバー実装
2. Day4 tools の HTTP 版変換
3. Vercel デプロイ
4. Claude Web テスト

Phase 2: Advanced Features

1. WebSocket リアルタイム更新
2. Multi-user support
3. Advanced error handling
4. Monitoring & Logging

Phase 3: EpisodicRAG Integration

1. Knowledge graph connections
2. Advanced document relationships
3. AI-powered content suggestions
4. 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 - 簡単な数式計算

成功基準

• [x] Remote MCPサーバーがHTTPで動作する ✅
• [x] Claude WebでCustom Connectorが設定できる ✅
• [x] Railway.appでのデプロイ成功 ✅
• [ ] Day4と同等のGoogle Docs操作がリモートで可能
• [x] スケーラブルなアーキテクチャの基盤完成 ✅

Day4との互換性

Shared Tools

• create_document → HTTP POST /mcp/tools/call
• write_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等との直接統合

参考リンク

• MCP Custom Connectors
• Vercel Serverless Functions
• Google Service Account Authentication
• WebSocket Protocol