Vercel MCP: Next.js DevTools и свой MCP-сервер на Vercel

vercel/next-devtools-mcp· Проверено 12.11.2026· 836на GitHub

Серверы от Vercel для работы с Next.js: next-devtools-mcp отдаёт агенту ошибки, маршруты и логи запущенного dev-сервера, а шаблон mcp-for-next.js поднимает свой MCP-сервер на Next.js с деплоем на Vercel.

2 реализации:

Тонкий коннектор: находит запущенные dev-серверы Next.js 16 и проксирует их встроенный эндпоинт /_next/mcp; ещё подсказывает агенту, где документация вашей версии Next.js.

Как подключить

Что сделать до подключения

Node.js 20.19 или новее, npm или pnpm

Next.js 16 или новее с запущенным dev-сервером npm run dev для nextjs_index и nextjs_call

NEXT_TELEMETRY_DISABLED

необязательно: 1 — отключить анонимную телеметрию

Конфиг для вашего клиента

Команда в терминале, в папке проекта. Флаг --scope user подключит сервер для всех проектов. Подробно о Claude Code

claude mcp add --transport stdio vercel \
  -- npx -y next-devtools-mcp@latest

Проверка: claude mcp list показывает статус рядом с каждым сервером: ✔ Connected, ! Needs authentication или ✘ Failed to connect. Внутри сессии то же видно по команде /mcp.

Файл ~/.codex/config.toml или .codex/config.toml в доверенном проекте. Можно и командой codex mcp add. Подробно о Codex

[mcp_servers.vercel]
command = "npx"
args = ["-y", "next-devtools-mcp@latest"]

Проверка: В интерфейсе codex введите /mcp: появится список активных серверов. Из терминала то же покажет codex mcp list.

Файл ~/.cursor/mcp.json для всех проектов или .cursor/mcp.json в папке проекта. Подробно о Cursor

{
  "mcpServers": {
    "vercel": {
      "command": "npx",
      "args": ["-y", "next-devtools-mcp@latest"]
    }
  }
}

Проверка: Откройте Customize в боковой панели: там список серверов с переключателями. Ошибки подключения смотрите в панели Output (Cmd+Shift+U), пункт MCP Logs в выпадающем списке.

Файл .mcp.json в корне проекта или ~/.copilot/mcp-config.json для всех проектов. Подробно о VS Code

{
  "mcpServers": {
    "vercel": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "next-devtools-mcp@latest"]
    }
  }
}

Проверка: Попросите Copilot выполнить безобидную задачу через сервер и раскройте вызов инструмента в чате. Одна запись в конфиге подключение не подтверждает.

Файл ~/.qwen/settings.json или .qwen/settings.json в проекте. Подробно о Qwen Code

{
  "mcpServers": {
    "vercel": {
      "command": "npx",
      "args": ["-y", "next-devtools-mcp@latest"]
    }
  }
}

Проверка: Запустите qwen и введите /mcp: откроется окно управления серверами. Из терминала статус покажет qwen mcp list.

Файл ~/.gemini/settings.json или .gemini/settings.json в проекте. Подробно о Gemini CLI

{
  "mcpServers": {
    "vercel": {
      "command": "npx",
      "args": ["-y", "next-devtools-mcp@latest"]
    }
  }
}

Проверка: gemini mcp list показывает каждый сервер, его настройки и статус Connected или Disconnected. В сессии /mcp выводит CONNECTED, CONNECTING или DISCONNECTED и список инструментов.

Файл opencode.json в папке проекта или ~/.config/opencode/opencode.json. Подробно о OpenCode

{
  "$schema": "https://opencode.ai/config.json",
  "mcp": {
    "servers": {
      "vercel": {
        "type": "local",
        "command": ["npx", "-y", "next-devtools-mcp@latest"]
      }
    }
  }
}

Проверка: opencode mcp list показывает состояние каждого сервера, подключённый выглядит как ✓ context7 connected. Внутри OpenCode то же видно в /mcps.

Настройки → Разработчик → Изменить конфиг: файл claude_desktop_config.json. После правки перезапустите приложение. Подробно о Claude Desktop

{
  "mcpServers": {
    "vercel": {
      "command": "npx",
      "args": ["-y", "next-devtools-mcp@latest"]
    }
  }
}

Проверка: Нажмите «Add files, connectors, and more /» в левом нижнем углу поля ввода, наведите на Connectors и откройте Manage connectors. Выберите сервер, чтобы увидеть его инструменты.

Вкладка Program → Install → Edit mcp.json. Подробно о LM Studio

{
  "mcpServers": {
    "vercel": {
      "command": "npx",
      "args": ["-y", "next-devtools-mcp@latest"]
    }
  }
}

Проверка: Попросите модель в чате выполнить задачу через инструмент сервера. Через API сервер из mcp.json вызывают по id в integrations, например mcp/playwright.

Инструменты сервера

nextjs_indexнаходит dev-серверы и их инструменты

nextjs_callвызывает инструмент dev-сервера

nextjs_docsуказывает на документацию вашей версии

browser_evalподсказывает, как запустить agent-browser

Шаблон своего сервера на mcp-handler 2: инструменты, промпты и ресурсы пишутся в app/mcp/route.ts, сервер работает без состояния и разворачивается на Vercel.

Как подключить

Что сделать до подключения

Node.js 20 или новее

Склонировать шаблон или развернуть его на Vercel, описать свои инструменты в app/mcp/route.ts и запустить приложение

На Vercel включить Fluid compute

Конфиг для вашего клиента

Команда в терминале, в папке проекта. Флаг --scope user подключит сервер для всех проектов. Подробно о Claude Code

claude mcp add --transport http mcp-for-next.js http://localhost:3000/mcp

Файл ~/.codex/config.toml или .codex/config.toml в доверенном проекте. Можно и командой codex mcp add. Подробно о Codex

[mcp_servers.mcp-for-next.js]
url = "http://localhost:3000/mcp"

Файл ~/.cursor/mcp.json для всех проектов или .cursor/mcp.json в папке проекта. Подробно о Cursor

{
  "mcpServers": {
    "mcp-for-next.js": {
      "url": "http://localhost:3000/mcp"
    }
  }
}

Файл .mcp.json в корне проекта или ~/.copilot/mcp-config.json для всех проектов. Подробно о VS Code

{
  "mcpServers": {
    "mcp-for-next.js": {
      "type": "http",
      "url": "http://localhost:3000/mcp"
    }
  }
}

Файл ~/.qwen/settings.json или .qwen/settings.json в проекте. Подробно о Qwen Code

{
  "mcpServers": {
    "mcp-for-next.js": {
      "httpUrl": "http://localhost:3000/mcp"
    }
  }
}

Файл ~/.gemini/settings.json или .gemini/settings.json в проекте. Подробно о Gemini CLI

{
  "mcpServers": {
    "mcp-for-next.js": {
      "httpUrl": "http://localhost:3000/mcp"
    }
  }
}

Файл opencode.json в папке проекта или ~/.config/opencode/opencode.json. Подробно о OpenCode

{
  "$schema": "https://opencode.ai/config.json",
  "mcp": {
    "servers": {
      "mcp-for-next.js": {
        "type": "remote",
        "url": "http://localhost:3000/mcp"
      }
    }
  }
}

Customize → Connectors → добавить свой коннектор.
Адрес сервера: http://localhost:3000/mcp

Вкладка Program → Install → Edit mcp.json. Подробно о LM Studio

{
  "mcpServers": {
    "mcp-for-next.js": {
      "url": "http://localhost:3000/mcp"
    }
  }
}

Инструменты сервера

echoпример инструмента из шаблона

Что попросить агента

«Next Devtools, какие ошибки сейчас в моём приложении Next.js?»Агент вызовет nextjs_index, затем nextjs_call с инструментом get_errors

«Next Devtools, покажи структуру моих маршрутов»Агент вызовет nextjs_call с get_page_metadata

«Next Devtools, что в логах dev-сервера?»Агент через nextjs_call получит get_logs — путь к логу с консолью браузера и выводом сервера

«Найди, в каком файле лежит Server Action с ID <ID>»Агент вызовет nextjs_call с get_server_action_by_id

«Найди в документации моей версии Next.js, как настроить <тема>»Агент вызовет nextjs_docs и прочитает документацию из node_modules/next/dist/docs/

Для каких задач

Собрать текущие ошибки сборки, рантайма и типов из запущенного приложения Next.js

Показать структуру маршрутов и страниц проекта

Найти лог dev-сервера с консолью браузера и выводом сервера

Найти исходный файл Server Action по его ID

Направить агента к документации, которая совпадает с установленной версией Next.js

Поднять свой MCP-сервер на Next.js и развернуть его на Vercel

Ограничения

Инструменты обоих серверов не работают с аккаунтом Vercel: проекты, деплои и домены через них недоступны

nextjs_index и nextjs_call видят только запущенный dev-сервер Next.js 16 и новее; nextjs_docs и browser_eval сами ничего не делают, только подсказывают агенту

next-devtools-mcp собирает анонимную телеметрию об инструментах и ошибках; отключается переменной NEXT_TELEMETRY_DISABLED=1

mcp-for-next.js — заготовка с примером echo, свои инструменты нужно написать; старый транспорт HTTP+SSE не поддерживается

Если не работает

ERR_MODULE_NOT_FOUND со ссылкой на next-devtools-mcp/dist

Очистите кэш npx и перезапустите клиент: сервер установится заново.

[error] No server info found

Запустите dev-сервер командой npm run dev, убедитесь, что Next.js версии 16 или новее и что он стартовал без ошибок.

Codex на Windows 11 не запускает next-devtools-mcp

Добавьте в .codex/config.toml env = { SystemRoot="C:\\Windows", PROGRAMFILES="C:\\Program Files" } и startup_timeout_ms = 20_000.

Какую реализацию выбрать

Реализация	Кто делает	Звёзды	Запуск	Ключ	Инструменты	Обновлён
Next.js DevTools MCPразработчик сервиса	Vercel	836	локально	не нужен	4	15 сентября 2026
Example Next.js MCP Serverразработчик сервиса	Vercel Labs	374	HTTP	не нужен	1	23 октября 2026

Частые вопросы

Какие MCP-серверы делает Vercel?

Для Next.js — next-devtools-mcp, он связывает агента с запущенным приложением. Для своих серверов — библиотека mcp-handler и шаблон mcp-for-next.js на ней, сервер из шаблона подключается по адресу /mcp.

Что такое mcp-handler?

HTTP-адаптер, который превращает описание MCP-сервера в обработчик запросов для Next.js, Nuxt, SvelteKit и Hono. Ставится командой npm install mcp-handler@^2 @modelcontextprotocol/server@^2 zod@^4, нужен Node.js 20 или новее.

Нужно ли что-то включать в Next.js?

Нет, Next.js 16 и новее сам открывает эндпоинт http://localhost:3000/_next/mcp, а next-devtools-mcp находит его автоматически.

Как подключить сервер на mcp-handler к клиенту только со stdio?

Через mcp-remote: command npx, args -y mcp-remote http://localhost:3000/api/mcp. Клиенты со Streamable HTTP подключаются к адресу напрямую.

Работает ли next-devtools-mcp со старым Next.js?

Инструменты рантайма требуют Next.js 16: эндпоинт /_next/mcp есть только там. nextjs_docs и browser_eval работают без dev-сервера; если в установленной версии нет встроенной документации, nextjs_docs советует обновиться.

Как подключить next-devtools-mcp к Claude Code?

Выполните claude mcp add next-devtools npx next-devtools-mcp@latest. Для всех агентов сразу подойдёт npx add-mcp next-devtools-mcp@latest.

Как подключить next-devtools-mcp к Codex?

Выполните codex mcp add next-devtools -- npx next-devtools-mcp@latest. На Windows 11 добавьте переменные окружения и startup_timeout_ms = 20_000 в .codex/config.toml.

Работает ли сервер из России?

next-devtools-mcp работает на вашем компьютере рядом с dev-сервером; сервер из шаблона можно запустить локально, для деплоя нужен аккаунт Vercel.

Vercel MCP: Next.js DevTools и свой MCP-сервер на Vercel

Как подключить

Что сделать до подключения

Конфиг для вашего клиента

Инструменты сервера

Как подключить

Что сделать до подключения

Конфиг для вашего клиента

Инструменты сервера

Что попросить агента

Для каких задач

Ограничения

Если не работает

Какую реализацию выбрать

Частые вопросы

Похожие серверы