DevServer MCP

DevServer MCP

LLM 支援ワークフロー向けに開発サーバーを管理する Model Context Protocol（MCP）サーバーです。シンプルな TUI を備えた統一インターフェースを通じて、複数の開発サーバーをプログラムから制御できます。また、Playwright による実験的なブラウザー自動化機能も利用できます。

TUI 上でクリックして、サーバーを起動したり停止したりすることもできます。

プロジェクトの状況

このソフトウェアはアルファ版であり、バイブコーディングの実践でもあります。このコードベースの大部分は、LLM ツールの支援を受けて作成されています。

テストでは一部の機能を検証しています。必要な機能が含まれていれば、すでに役立つサーバーですが、利用結果は環境によって異なります。

機能

• 🚀 プロセス管理：複数の開発サーバーを起動、停止、監視できます
• 📊 高機能な TUI：ログをリアルタイムでストリーミング表示する、対話型のターミナルインターフェース
• 🌐 ブラウザー自動化：ウェブテストと自動化のための、実験的な Playwright 統合
• 🔧 LLM 統合：AI 支援開発ワークフロー向けの MCP プロトコルを完全にサポート

インストール

uv add --dev git+https://github.com/Uninen/devserver-mcp.git --tag v0.6.0

Playwright（任意）

実験的な Playwright ブラウザー自動化機能を使う場合は、Playwright を手動でインストールする必要があります。

# Install Playwright
uv add playwright

# Install browser drivers
playwright install

クイックスタート

プロジェクトのルートに devservers.yml ファイルを作成します。

servers:
  backend:
    command: 'python manage.py runserver'
    working_dir: '.'
    port: 8000

  frontend:
    command: 'npm run dev'
    working_dir: './frontend'
    port: 3000
    autostart: true

  worker:
    command: 'celery -A myproject worker -l info'
    working_dir: '.'
    port: 5555
    prefix_logs: false

# Optional: Enable experimental Playwright browser automation
experimental:
  playwright: true

設定

VS Code

.vscode/mcp.json に追加します。

{
  "servers": {
    "devserver": {
      "url": "http://localhost:3001/mcp/",
      "type": "http"
    }
  }
}

その後、別のターミナルで TUI を実行します：devservers

Claude Code

サーバーをローカルにインストールします。

claude mcp add --transport http devservers http://localhost:3001/mcp/

または、プロジェクト用にインストールします（プロジェクト内の .mcp.json に保存されます）。

claude mcp add -s project --transport http devservers http://localhost:3001/mcp/

その後、別のターミナルで TUI を実行します：devservers

Gemini CLI

settings.json にサーバー設定を追加します（グローバル設定は ~/.gemini/settings.json、プロジェクトごとの設定は .gemini/settings.json に追加します。ドキュメントを参照）。

...
  "mcpServers": {
    "devservers": {
      "httpUrl": "http://localhost:3001/mcp",
      "timeout": 5000,
      "trust": true
    }
  },
...

その後、別のターミナルで TUI を実行します：devservers

Zed

Zed はまだリモート MCP サーバーをネイティブでサポートしていないため、mcp-proxy のようなプロキシを使用する必要があります。

Assistant Setting -> Context Server -> Add Custom Server の UI を使い、名前に「Devservers」、コマンドに uvx mcp-proxy --transport streamablehttp http://localhost:3001/mcp/ を指定する方法があります。または、次の設定を Zed の設定ファイルに手動で追加することもできます。

  "context_servers": {
    "devservers": {
      "command": {
        "path": "uvx",
        "args": ["mcp-proxy", "--transport", "streamablehttp", "http://localhost:3001/mcp/"]
      }
    }
  },

その後、別のターミナルで TUI を実行します：devservers

使い方

MCP サーバー TUI の実行

ターミナルで TUI を起動します。

devservers

開発サーバーを監視・制御し、ログを確認できるようになります。また、LLM がサーバーとそのログに完全にアクセスできるようになります。

利用可能な MCP ツール

サーバーは、LLM とのやり取りに次のツールを公開します。

サーバー管理

1. start_server(name) - 設定済みのサーバーを起動します
2. stop_server(name) - サーバー（管理対象または外部）を停止します
3. get_devserver_statuses() - すべてのサーバーの状態を取得します
4. get_devserver_logs(name, offset, limit, reverse) - ページネーションに対応したログを取得します
   • offset：開始位置（デフォルト：0、負の値は末尾から数えます）
   • limit：返すログの最大数（デフォルト：100）
   • reverse：新しいログを先に表示する場合は True、古いログを先に表示する場合は False（デフォルト：True）

ブラウザー自動化（実験的）

config で experimental.playwright が設定されている場合：

1. browser_navigate(url, wait_until) - 待機条件を指定して、ブラウザーで URL に移動します
2. browser_snapshot() - 現在のページのアクセシビリティスナップショットを取得します
3. browser_console_messages(clear, offset, limit, reverse) - ページネーションを使用してコンソールメッセージを取得します
   • clear：取得後にメッセージを消去します（デフォルト：False）
   • offset：開始位置（デフォルト：0、負の値は末尾から数えます）
   • limit：返すメッセージの最大数（デフォルト：100）
   • reverse：新しい順の場合は True、古い順の場合は False（デフォルト：True）
4. browser_click(ref) - CSS セレクターまたは要素参照を使ってページ上の要素をクリックします
5. browser_type(ref, text, submit, slowly) - 要素にテキストを入力します。任意で送信（Enter キー）や低速入力モードを指定できます
6. browser_resize(width, height) - ブラウザーのビューポートを指定したサイズに変更します
7. browser_screenshot(full_page, name) - 現在のページのスクリーンショットを撮影します
   • full_page：ビューポートではなくページ全体をキャプチャします（デフォルト：False）
   • name：スクリーンショットの任意のファイル名（デフォルト：タイムスタンプ付きの名前）

開発

MCP Inspector の使用

1. サーバーを起動します：devservers
2. MCP Inspector を起動します：npx @modelcontextprotocol/inspector http://localhost:3001

MCP Inspector のスクリプト実行

1. サーバーを起動します：devservers
2. MCP Inspector を CLI モードで使用します。例：npx @modelcontextprotocol/inspector --cli http://localhost:3001 --method tools/call --tool-name start_server --tool-arg name=frontend

その他

• Bluesky で unessa.net をフォロー、または Twitter で @uninen をフォロー
• Vite / Vue / TypeScript やその他の Web 開発トピックについて、継続的に更新している学びをToday I Learned サイトでご覧ください

コントリビューション

コントリビューションを歓迎します。他の人とやり取りする際は、行動規範に従ってください。