Добавить сервер
vercel/next-devtools-mcp
  1. Каталог MCP
  2. vercel/next-devtools-mcp

vercel/next-devtools-mcp

от vercel
Ошибки, маршруты и логи из запущенного Next.js dev server. Читает доки нужной версии, управляет браузером через agent-browser. От Vercel.
GithubNPMСайт сервера

Next.js DevTools MCP

npm next-devtools-mcp package

next-devtools-mcp is a Model Context Protocol (MCP) server that connects coding agents like Claude and Cursor to your running Next.js dev server.

It is a thin connector. It discovers running Next.js 16+ dev servers and proxies their built-in MCP endpoint (/_next/mcp) so agents get live runtime errors, routes, and logs. It also ships two gateways that point agents at tools they run directly: version-accurate docs and the agent-browser CLI.

Заметка

Docs and migration workflows no longer live in this server. Next.js bundles its own docs at node_modules/next/dist/docs/, and upgrade / Cache Components workflows are distributed as agent skills. See Migrating from 0.3.x.

Requirements

  • Node.js v20.19 or a newer LTS version
  • npm or pnpm
  • Next.js 16+ with a running dev server (for nextjs_index / nextjs_call)

Install

Install for all your coding agents with add-mcp:

npx add-mcp next-devtools-mcp@latest

Add -y to skip the prompt and install to all detected agents. Add -g to install globally across all projects.

Часто задаваемые вопросы

Инструменты были проиндексированы:
browser_eval

Настраивает и использует автоматизацию браузера для этого проекта через CLI agent-browser. Этот инструмент НЕ управляет браузером сам. Он указывает вам на agent-browser - быстрый нативный CLI для автоматизации браузера, созданный для агентов (https://github.com/vercel-labs/agent-browser) - и рассказывает, как его установить (если нужно) и с чего начать. Затем вы запускаете его команды напрямую (у вас есть доступ к shell): это быстрее и даёт больше возможностей, чем проксировать автоматизацию через MCP. Вызывайте его, когда нужно открыть страницы, кликнуть, ввести текст, сделать скриншот или собрать ошибки консоли в реальном браузере.

Параметры
  • taskstring
nextjs_call

Вызывает определённый MCP-инструмент на запущенном сервере разработки Next.js. ТРЕБОВАНИЯ: - Номер порта целевого сервера разработки Next.js - Имя инструмента для выполнения - Необязательный объект с аргументами (если инструмент требует параметры) Сначала используй 'nextjs_index', чтобы узнать доступные серверы, инструменты и их входные схемы. Если автообнаружение 'nextjs_index' не сработало, спроси у пользователя номер порта и вызови 'nextjs_index' ещё раз с параметром 'port'. ВАЖНО: При вызове инструментов: - Параметр 'args' ОБЯЗАТЕЛЬНО должен быть объектом (например, {key: "value"}), а НЕ строкой - Если инструмент не требует аргументов, ОПУСТИ параметр 'args' целиком — НЕ передавай {} или "{}" - Проверь inputSchema инструмента из 'nextjs_index', чтобы понять, какие аргументы требуются Распространённые MCP-инструменты Next.js: - Диагностика ошибок (получает ошибки компиляции/выполнения) - Информация о маршрутах (список всех маршрутов) - Статус сборки (проверяет состояние компиляции) - Управление кешем (очищает кеши) - И другие (зависят от версии Next.js) Пример использования: 1. Вызови 'nextjs_index', чтобы увидеть серверы и инструменты 2. Вызови 'nextjs_call' с port=3000, toolName="get_errors", чтобы получить ошибки с сервера на порту 3000

Параметры
  • argsstring
  • portstring

    Номер порта dev-сервера Next.js (обязательно).

  • toolNamestring

    Название инструмента MCP Next.js для вызова (обязательно). Сначала используйте 'nextjs_index', чтобы обнаружить доступные имена инструментов.

nextjs_docs

Находит документацию Next.js, точно соответствующую версии ЭТОГО проекта. Этот инструмент НЕ загружает документацию. Next.js 16+ поставляет свою полную документацию внутри установленного пакета по пути node_modules/next/dist/docs/ (Markdown), синхронизированную с точной версией, которая установлена у вас. Этот инструмент показывает, где находятся эти документы и как их читать, поэтому вы читаете документацию, соответствующую этому проекту, а не универсальную или устаревшую копию. Вызывайте этот инструмент перед ответами на вопросы о Next.js или написанием кода Next.js. Затем прочитайте соответствующее руководство по пути, который он вернет. Если проект использует более старую версию Next.js, инструмент подскажет, как обновиться.

Параметры
  • project_pathstring
  • topicstring
nextjs_index

Обнаруживает все запущенные dev-серверы Next.js и перечисляет их доступные MCP-инструменты. КОГДА ИСПОЛЬЗОВАТЬ ЭТОТ ИНСТРУМЕНТ - Используй его проактивно в следующих сценариях: 1. Перед внесением ЛЮБЫХ изменений в приложение: когда просят что-то добавить, изменить или исправить в приложении: - «Добавить состояние загрузки» → сначала проверь текущую структуру компонентов и маршруты - «Исправить навигацию» → изучи существующие маршруты и компоненты - «Обновить API-эндпоинт» → запроси текущие маршруты и потоки данных - «Добавить обработку ошибок» → проверь ошибки рантайма и иерархию компонентов - «Отрефакторить логику авторизации» → изучи текущую реализацию авторизации и маршруты - «Оптимизировать производительность» → проверь диагностику рантайма и дерево компонентов Используй это, чтобы понять, куда вносить изменения и что уже есть. 2. Для диагностики и разбора проблем: - «Что происходит?» / «Что случилось?» / «Почему это не работает?» - «Проверь ошибки» / «Посмотри, что не так» - «Какие маршруты доступны?» / «Покажи маршруты» - «Очисти кэш» / «Сбрось всё» - Вопросы о статусе сборки, ошибках компиляции или диагностике рантайма 3. Для агентного поиска по кодовой базе: используй это в ПЕРВУЮ ОЧЕРЕДЬ при поиске по запущенному приложению. Если ничего не нашлось, переходи к инструментам статического поиска по кодовой базе. КЛЮЧЕВОЙ ПРИНЦИП: если запрос касается запущенного приложения Next.js (нужно ИЛИ изучить, ИЛИ изменить его), запроси рантайм СНАЧАЛА, чтобы понять текущее состояние, и только потом действуй. ТРЕБОВАНИЯ: - Next.js 16 или новее (поддержка MCP появилась в v16) - Если у тебя Next.js 15 или раньше, сначала обнови версию: выполни 'npx @next/codemod@latest upgrade latest' Next.js 16+ автоматически открывает MCP-эндпоинт (Model Context Protocol) по адресу /_next/mcp при запуске dev-сервера. Никакой настройки не требуется - MCP включён по умолчанию в Next.js 16 и новее. Этот инструмент обнаруживает все запущенные серверы Next.js и возвращает: - порт сервера, PID и URL - полный список доступных MCP-инструментов для каждого сервера - Инструмент…

Параметры
  • portstring
0.4.0основная
0.3.10
0.3.9
0.3.8
0.3.7
0.3.6
0.3.5
0.3.4
0.3.3
0.3.2
0.3.1
0.3.0
0.2.6
0.2.5
0.2.4
0.2.3
0.2.2
0.2.1
0.2.0
0.1.3
0.1.2
0.1.1
0.1.0
0.0.12
0.0.11
0.0.10
0.0.9
0.0.8
0.0.7
0.0.6
0.0.5
0.0.4
0.0.3
0.0.2
0.0.1

Выберите клиент, чтобы установить vercel/next-devtools-mcp:

Любой клиент

Конфиг добавления MCP сервера стандартный, обычно он не меняется вообще, поэтому подходит практически к любому ИИ клиенту, поддерживающему MCP.

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

Перейдите по ссылке и сервер автоматически будет добавлен в Cursor. Либо откройте/создайте файл ~/.cursor/mcp.json(%USERPROFILE%\.cursor\mcp.json на Windows) и добавьте конфиг сервера:

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

Создайте .vscode/mcp.json в проекте (ключ верхнего уровня — servers):

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

Либо добавьте сервер через терминал:

code --add-mcp "{\"name\":\"vercel-next-devtools-mcp-x080kg3cl6\",\"type\":\"stdio\",\"command\":\"npx\",\"args\":[\"-y\",\"next-devtools-mcp@latest\"]}"
ClaudeClaude Desktop

Откройте Settings → Developer → Edit Config — это откроет файл claude_desktop_config.json:

  • macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
  • Windows: %APPDATA%\Claude\claude_desktop_config.json

Впишите сервер и полностью перезапустите Claude Desktop:

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

Добавьте сервер одной командой в терминале:

claude mcp add vercel-next-devtools-mcp-x080kg3cl6 -- npx -y next-devtools-mcp@latest

Либо через JSON-конфиг:

claude mcp add-json vercel-next-devtools-mcp-x080kg3cl6 "{\"command\":\"npx\",\"args\":[\"-y\",\"next-devtools-mcp@latest\"]}"
CodexCodex

Добавьте сервер командой в терминале:

codex mcp add vercel-next-devtools-mcp-x080kg3cl6 -- npx -y next-devtools-mcp@latest

Либо вручную в ~/.codex/config.toml(%USERPROFILE%\.codex\config.toml на Windows):

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

MCP доступен подписчикам Perplexity Pro / Max / Enterprise. Локальные серверы — только в приложении для macOS.

  1. Откройте Настройки аккаунта → Connectors.
  2. Установите вспомогательное приложение PerplexityXPC (один раз).
  3. Нажмите Add Connector → вкладка Simple.
  4. В поле Server Name укажите vercel/next-devtools-mcp, а в поле команды запуска — строку ниже:
npx -y next-devtools-mcp@latest

Нажмите Save и дождитесь статуса Running.

WindsurfWindsurf

Откройте Windsurf Settings → Cascade → MCP Servers или отредактируйте файл ~/.codeium/windsurf/mcp_config.json:

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

В панели Cline нажмите иконку MCP Servers → Configure → Configure MCP Servers (или отредактируйте ~/.cline/mcp.json) и добавьте сервер:

{
  "mcpServers": {
    "vercel-next-devtools-mcp-x080kg3cl6": {
      "command": "npx",
      "args": [
        "-y",
        "next-devtools-mcp@latest"
      ],
      "disabled": false,
      "autoApprove": []
    }
  }
}
Continue

Создайте файл в .continue/mcpServers/ (например vercel-next-devtools-mcp-x080kg3cl6.yaml) или добавьте блок в config.yaml. MCP работает только в режиме agent:

mcpServers:
  - name: vercel-next-devtools-mcp-x080kg3cl6
    command: npx
    args:
      - "-y"
      - "next-devtools-mcp@latest"
Zed

Выполните agent: add context server или откройте настройки (zed: open settings file) и добавьте сервер в объект context_servers:

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

Похожие MCP-сервера

perceptdot/percept

perceptdot/percept

от perceptdot

Perceptdot - MCP сервер для автоматического обнаружения и установки других MCP инструментов. Сканирует проект и рекомендует серверы для GA4, Vercel, GitHub и Sentry. Агент сам находит нужное, человек платит. Полезен разработчикам для интеграции AI-агентов.

HTML⭐ 1
fabio-rovai/open-ontologies

fabio-rovai/open-ontologies

от fabio-rovai

Валидирует и классифицирует онтологии RDF/OWL, управляет версиями и сравнивает схемы. 70+ инструментов, работает локально без API-ключей.

Rust⭐ 1132
aktsmm/skill-ninja-mcp-server

aktsmm/skill-ninja-mcp-server

от aktsmm

Skill Ninja — MCP-сервер для поиска и установки AI Agent Skills в редакторы кода. Загружает навыки из GitHub, управляет ими в доверенных проектах, поддерживает локализацию и рекомендации. Полезен р...

TypeScript⭐ 12
wyattjoh/jsr-mcp

wyattjoh/jsr-mcp

от wyattjoh

MCP-сервер для работы с реестром JavaScript (JSR): поиск и управление пакетами, версиями, скоупами, участниками и авторизацией. Предоставляет 40 инструментов для LLM, включая публикацию. Полезен ра...

TypeScript⭐ 4
arvindand/maven-tools-mcp

arvindand/maven-tools-mcp

от arvindand

Maven Tools MCP даёт AI-агентам и разработчикам доступ к актуальным данным Maven Central: стабильность версий, CVE, лицензии, анализ pom.xml и готовые рекомендации по обновлению зависимостей JVM. В...

Java⭐ 34
OrygnsCode/opa-mcp-server

OrygnsCode/opa-mcp-server

от orygnscode

MCP сервер для Open Policy Agent: агенты могут писать и выполнять Rego-политики, управлять политиками на сервере, линтить и собирать бандлы. Полезен DevOps и инженерам безопасности для автоматизации политик доступа и IaC.

TypeScript⭐ 8
© Каталог MCP, 2026. Все права защищены.
Проект не аффилирован с Anthropic и любыми упомянутыми продуктами.
Все названия и торговые марки принадлежат их владельцам.
Контакты для связи: hi@mcp-katalog.ru

Лука Никитин