next-devtools-mcp
vercel · vercel/next-devtools-mcp
Một MCP server kết nối các AI coding agent như Claude và Cursor với một Next.js dev server đang chạy, cung cấp lỗi runtime, tuyến đường và nhật ký trực tiếp.
Phát triển Next.js cho Coding Agent.
Xem trước
Bạn có thể làm gì với nó
- Cho phép AI agent của bạn giám sát lỗi runtime trực tiếp từ ứng dụng Next.js trong quá trình phát triển.
- Cho phép các agent kiểm tra các tuyến đường (routes) và nhật ký (logs) của Next.js để gỡ lỗi hoặc hiểu luồng ứng dụng.
- Nhận phản hồi thời gian thực về Next.js development server của bạn trực tiếp trong môi trường AI coding.
Đã chạy thử thật · 4 tool
Chúng tôi đã khởi động MCP server này trong máy ảo cách ly, và nó cung cấp các tool sau:
browser_evalSet up and use browser automation for this project via the agent-browser CLI. This tool does NOT drive the browser itself. It points you at `agent-browser` — a fast, native browser-automation CLI bui
nextjs_docsFind the version-accurate Next.js documentation for THIS project. This tool does NOT fetch documentation. Next.js 16+ ships its full docs inside the installed package at `node_modules/next/dist/docs/
nextjs_indexDiscover all running Next.js development servers and list their available MCP tools. WHEN TO USE THIS TOOL - Use proactively in these scenarios: 1. **Before implementing ANY changes to the app**: Wh
nextjs_callCall a specific MCP tool on a running Next.js development server. REQUIREMENTS: - Port number of the target Next.js dev server - Tool name to execute - Optional arguments object (if the tool requires
npx -y next-devtools-mcp · 8/10/2026
Kiểm tra an toàn
Dùng được, nhưng nên đọc ghi chú trước.
- ●Không có giấy phép rõ ràng: hỏi tác giả trước khi dùng cho sản phẩm thương mại.
Quét tự động các file trong repo. Luôn xem lại code trước khi chạy.
Trích từ README
Next.js DevTools MCP
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.
[!NOTE] 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.
Or add the config to your MCP client manually:
{
"mcpServers": {
"next-devtools": {
"command": "npx",
"args": ["-y", "next-devtools-mcp@latest"]
}
}
}
[!NOTE]
next-devtools-mcp@latestkeeps your client on the latest version.
Client-specific setup
Amp
amp mcp add next-devtools -- npx next-devtools-mcp@latest
Or follow Amp's MCP docs with the config above.
Claude Code
claude mcp add next-devtools npx next-devtools-mcp@latest
Or edit your MCP settings file with the config above.
Codex
codex mcp add next-devtools -- npx next-devtools-mcp@latest
Windows 11: add environment variables and a longer startup timeout to .codex/config.toml:
env = { SystemRoot="C:\\Windows", PROGRAMFILES="C:\\Program Files" }
startup_timeout_ms = 20_000
Cursor
Or go to Cursor Settings → MCP → New MCP Server and use the config above.
Gemini
# Project
gemini mcp add next-devtools npx next-devtools-mcp@latest
# Global
gemini mcp add -s user next-devtools npx next-devtools-mcp@latest
Google Antigravity
Add to .gemini/antigravity/mcp_config.json:
{
"mcpServers": {
"next-devtools": {
"command": "npx",
"args": ["-y", "next-devtools-mcp@latest"]
}
}
}
See the Antigravity MCP docs.
VS Code / Copilot
code --add-mcp '{"name":"next-devtools","command":"npx","args":["-y","next-devtools-mcp@latest"]}'
Or follow the official VS Code MCP setup guide.
Warp
Settings | AI | Manage MCP Servers → + Add:
- Name:
next-devtools - Command:
npx - Arguments:
-y, next-devtools-mcp@latest
Quick Start
Start your Next.js dev server:
npm run dev
Next.js 16+ enables its MCP endpoint by default at http://localhost:3000/_next/mcp. next-devtools-mcp discovers and connects to it automatically — no config needed.
Then ask your agent about the running app:
Next Devtools, what errors are in my Next.js application?
Next Devtools, show me the structure of my routes
Next Devtools, what's in the development server logs?
The agent calls nextjs_index to discover servers, then nextjs_call to query their real state.
Tools
| Tool | What it does |
|---|---|
nextjs_index | Discover running Next.js dev servers and list each one's runtime MCP tools. |
nextjs_call | Call a runtime tool on a discovered server (errors, routes, logs, Server Actions). |
nextjs_docs | Gateway. Point the agent at version-accurate docs in node_modules/next/dist/docs/. |
browser_eval | Gateway. Point the agent at the agent-browser CLI for browser automation. |
The gateways do not do the work themselves — they tell the agent where the docs are or how to install/run the CLI, and the agent runs it directly (faster than proxying through MCP).
nextjs_index — discover servers
Scans common ports for running Next.js 16+ dev servers and lists each server's built-in runtime tools at /_next/mcp. No parameters.
Runtime tools exposed by Next.js (varies by version):
get_errors— current build, runtime, and type errorsget_logs— path to the dev log file (browser console + server output)get_page_metadata— routes, pages, component metadataget_project_metadata— project structure, config, dev server URLget_server_action_by_id— resolve a Server Action ID to its source file
Output: JSON listing discovered servers (port, PID, URL) and their tools.
nextjs_call — run a runtime tool
Calls one runtime tool on a discovered server. Run nextjs_index first to find the port and tool name.
Input:
port(required) — dev server porttoolName(required) — runtime tool to invokeargs(optional) — arguments object, only if the tool requires them
{ "port": 3000, "toolName": "get_errors" }
Output: JSON with the tool's result. Upstream requests, including response-body reads, have a 60-second deadline. Cancelling an MCP request aborts its upstream network work; discovery also releases response bodies used only to detect the protocol.
nextjs_docs — find version-accurate docs
Does **not