DevServer MCP

DevServer MCP

一个用于管理 LLM 辅助工作流中开发服务的模型上下文协议（MCP）服务。它通过统一接口以编程方式控制多个开发服务，提供简洁的 TUI，并支持实验性的 Playwright 浏览器自动化功能。

你也可以通过点击 TUI 来启动和关闭服务。

项目状态

本软件目前处于 ALPHA 阶段，同时也是一次氛围编程的实践；此代码库的大部分内容都是借助大模型工具编写的。

测试验证了部分功能。如果你恰好需要这些功能，这个服务现在已经很实用，不过具体效果因人而异。

功能

• 🚀 进程管理：启动、停止和监控多个开发服务
• 📊 丰富的 TUI：交互式终端界面，支持实时日志流
• 🌐 浏览器自动化：实验性的 Playwright 集成，用于 Web 测试和自动化
• 🔧 LLM 集成：全面支持 MCP 协议，助力 AI 辅助开发工作流

安装

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，并添加名称为 "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

现在，你可以查看和控制开发服务并查看日志，同时让大模型全面访问这些服务及其日志。

可用的 MCP 工具

该服务向大模型开放以下工具：

服务管理

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）

浏览器自动化（实验性）

当配置中设置了 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. 在 CLI 模式下使用 MCP Inspector，例如：npx @modelcontextprotocol/inspector --cli http://localhost:3001 --method tools/call --tool-name start_server --tool-arg name=frontend

其他平台

• 在 Bluesky 上关注 unessa.net，或在 Twitter 上关注 @uninen
• 阅读我在 Today I Learned 网站 上持续更新的 Vite / Vue / TypeScript 和其他 Web 开发主题学习笔记

贡献

欢迎贡献！与他人互动时，请遵守行为准则。