Skip to main content
Glama

Day 5 Remote MCP Server

by Bizuayeu

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 MCPRemote 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 - 簡単な数式計算

成功基準

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

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 directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/Bizuayeu/day5-api-remote-mcp'

If you have feedback or need assistance with the MCP directory API, please join our Discord server