Skip to main content
Glama
Bizuayeu

Day 5 Remote MCP Server

by Bizuayeu
OverviewSchemaSourceRelated ServersDiscussionsAdmin
TypeScript
Remote

Day 5: APIs From Remote MCP

学習目標

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

Related MCP server: google-mcp

今日学ぶこと

  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 でのデプロイ

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等との直接統合

参考リンク

This server cannot be deployed

One endpoint for every MCP toolRayrun runs every MCP server behind one URL and holds the credentials. Each call is decided per client, tool, and argument, then recorded.ray.runAd

Maintenance

ActivityInactive
ResponsivenessNo issues

Resources

Related MCP Connectors

Related MCP Servers