MCP Server Tester 🔌

MCP サーバーテスター 🔌

技術的なアプローチ 🛠️

1. ミニマルなアーキテクチャ

• レイヤー化された検証を行う単一のエンドポイント（/test-mcp）
• クライアントとサーバーを分離（public/ と server.js）
• ステートレスな動作（データベースなし）

2. 検証パイプライン

フロントエンド → 入力をサニタイズ → URL を検証 → 接続をテスト → 診断結果を返す

• バックスラッシュと空白を削除
• URL の構造を確認
• 5 秒のタイムアウトで実際の接続をテスト

3. 主な機能

• 即時の視覚的フィードバック（成功／エラー状態）
• ハードウェアアクセラレーション対応の CSS アニメーション
• レスポンシブなグラスモーフィズムデザイン
• 詳細な HTTP ステータスの報告

クイックスタート 🚀

git clone https://github.com/harshaagrawal20/MCP-server-tester.git cd MCP-server-tester npm install express cors body-parser axios node server.js

アクセス先：http://localhost:5000

動画デモ

デモを見る

ライブデモ 🌐

デプロイ済みバージョンを見る

API の使用方法

POST /test-mcp {"serverConfig": {"url": "https://example.com"}}

レスポンス： {"success": true|false, "message": "Status details"}

技術スタック 💻

コンポーネント	技術
フロントエンド	HTML5, CSS3, ES6
バックエンド	Node.js, Express
HTTP クライアント	Axios
UI フレームワーク	グラスモーフィズム CSS

設定

const PORT = 5000; // ポートを変更

const TIMEOUT = 5000; // タイムアウトを調整

スクリーンショット