SpatialGrid MCP Chat Interface

SpatialGrid MCP チャットインターフェース

このプロジェクトは、SpatialGrid MCP（Model Context Protocol）サーバーとやり取りするためのモダンなチャットインターフェースを提供します。

概要

このプロジェクトは、主に次の2つの部分で構成されています。

1. MCP サーバー：空間グリッドアプリケーション向けにさまざまなツールとリソースを提供する、Model Context Protocol を実行する Node.js サーバーです。
2. チャットインターフェース：MCP サーバーとやり取りするための、ユーザーフレンドリーなインターフェースを提供する React ベースのフロントエンドです。

機能

• 💬 リアルタイムのチャットインターフェース
• 🚀 React と Tailwind CSS で構築
• 🔌 MCP サーバーとの WebSocket 通信
• 📱 すべての画面サイズに対応したレスポンシブデザイン
• ✨ 応答の Markdown レンダリング

クイックスタート

最も簡単な方法は、セットアップスクリプトを実行することです。

# Make the script executable if it isn't already
chmod +x setup.sh

# Run the setup script
./setup.sh

これにより、次の処理が行われます。

1. すべての依存関係をインストールします
2. フロントエンドをビルドします
3. サーバーを起動します

起動後、http://localhost:3001 でチャットインターフェースにアクセスできます。

手動セットアップ

プロジェクトを手動でセットアップする場合は、次の手順に従ってください。

フロントエンド

# Navigate to the frontend directory
cd frontend

# Install dependencies
npm install

# Start development mode (separate React and proxy servers)
npm run dev

# OR build for production and start the server
npm run build
npm run server

プロジェクト構成

• index.js - メインの MCP サーバー
• frontend/ - React フロントエンドアプリケーション
  • src/ - React のソースコード
  • public/ - 静的アセット
  • server.js - WebSocket プロキシサーバー

MCP ツール

MCP サーバーは、チャットインターフェースから利用できるさまざまなツールを提供します。次のようなものがあります。

• 基本的な計算
• MongoDB コレクションの管理
• アセット管理
• プロジェクトの作成と管理
• エクスペリエンスの公開

ライセンス

MIT