MCP Web Client

MCP Web クライアント

MCP（Multimodal Conversational Protocol）サーバーとツールを管理するためのウェブクライアントです。このアプリケーションでは、単一のインターフェースから複数の MCP サーバーと関連するツールを設定、監視、管理できます。

機能

• 🌐 複数の MCP サーバーを一元管理
• 🛠️ MCP ツール（GitHub、Playwright など）を設定、整理
• 🔄 必要に応じてツールを有効化／無効化
• 💾 設定を永続的に保存
• 📱 デスクトップとモバイルの両方で使えるレスポンシブデザイン

はじめに

前提条件

• Node.js（バージョン 14 以降）
• npm または yarn

インストール

1. リポジトリをクローンします。

git clone https://github.com/AVGenAI/mcp-web-client.git
cd mcp-web-client

2. 依存関係をインストールします。

npm install
# or
yarn

3. 開発サーバーを起動します。

npm run dev
# or
yarn dev

4. ブラウザーで http://localhost:3000 を開くと、アプリケーションが表示されます。

使い方

サーバーの追加

1. 「Servers」ページに移動します
2. 「Add New Server」をクリックします
3. サーバーの詳細を入力します。
   • Name：サーバーのわかりやすい名前
   • URL：サーバーのエンドポイント URL
   • Description：（任意）サーバーに関する追加情報
4. 「Add Server」をクリックします

サーバーへのツールの追加

1. サーバーの詳細ページに移動します
2. 「Add Tool」をクリックします
3. ツールの詳細を入力します。
   • Name：ツールの名前
   • Type：ツールの種類（GitHub、Playwright など）
   • Configuration：ツール固有の設定
4. 「Add Tool」をクリックします

ツールの管理

• 有効化／無効化ボタンでツールをオン／オフにします
• 不要になったツールを削除します
• ツールの設定詳細を確認します

プロジェクト構成

src/
├── app/                    # Next.js App Router
│   ├── page.tsx           # Dashboard/home page (client component)
│   ├── layout.tsx         # Root layout (server component)
│   └── servers/           # Server management pages
│       ├── page.tsx       # Server list page (client component)
│       ├── add/           # Add server page (client component)
│       └── [id]/          # Server detail page (client component)
├── components/            # Reusable components
│   ├── Sidebar.tsx        # Navigation sidebar (client component)
│   └── ClientLayout.tsx   # Layout wrapper for client components
├── store/                 # State management
│   └── mcpStore.ts        # Zustand store for MCP data
└── types/                 # TypeScript type definitions
    └── mcp.ts             # MCP type definitions

クライアントコンポーネントとサーバーコンポーネント

このプロジェクトでは、Next.js App Router のパターンに従っています。

• サーバーコンポーネント：静的な部分やメタデータに使用します（App Router のデフォルト）
• クライアントコンポーネント：インタラクティブな要素や状態管理に使用します（"use client" ディレクティブで指定）

フック、イベントハンドラー、またはブラウザー API を使用するコンポーネントは、クライアントコンポーネントにする必要があります。このアプリは次のように構成されています。

• メタデータを含むサーバーコンポーネントのルートレイアウト
• インタラクティブな要素を含むクライアントコンポーネントのラッパー（ClientLayout）
• 状態にアクセスする必要があるすべてのページのクライアントコンポーネント

使用技術

• Next.js - App Router を備えた React フレームワーク
• React - UI ライブラリ
• TypeScript - 型チェック
• Zustand - 状態管理
• CSS Modules - コンポーネント単位のスタイリング

コントリビューション

コントリビューションを歓迎します。Pull Request をお気軽にお送りください。

ライセンス

このプロジェクトは MIT License のもとでライセンスされています。詳細については LICENSE ファイルをご覧ください。