vercel/next-devtools-mcp

해결하는 문제

코드 에이전트(Claude 및 Cursor 등)는 실행 중인 애플리케이션의 상태를 실시간으로 파악하지 못하는 경우가 많습니다. next-devtools-mcp는 이러한 에이전트와 Next.js 개발 서버 사이의 다리를 제공하여, AI 에이전트가 채팅 인터페이스 내에서 실시간 실행 오류, 로그, 라우트 구조를 직접 확인할 수 있도록 합니다.

작동 방식

Model Context Protocol (MCP)를 사용하는 가벼운 연결기로 작동합니다. 자동으로 실행 중인 Next.js 16+ 개발 서버를 탐지하고, 서버 내장 MCP 엔드포인트(/_next/mcp)로 요청을 프록시합니다. 또한 프로젝트의 node_modules에 포함된 버전에 정확한 문서로 연결하거나, 브라우저 자동화를 위한 agent-browser CLI로 연결하는 '게이트웨이'도 제공합니다.

대상 사용자

Next.js 16+를 사용하고 있으며, Claude Code, Cursor, Gemini, VS Code Copilot과 같은 AI 기반 코드 에이전트를 사용하여 애플리케이션의 실행 시 컨텍스트를 제공받고 싶은 개발자.

주요 기능

• 실시간 런타임 접근: 현재 빌드, 런타임, 타입 오류 및 개발 서버 로그에 접근 가능.
• 자동 탐지: 일반적인 포트를 스캔하여 실행 중인 Next.js 개발 서버를 자동으로 검색하고 연결.
• 버전 정확한 문서: node_modules에 설치된 Next.js 버전과 정확히 일치하는 문서로 연결.
• 브라우저 자동화 게이트웨이: agent-browser CLI를 사용한 자동 브라우저 테스트 통합 지원.
• 광범위한 에이전트 호환성: Claude, Cursor, Codex, Gemini, Warp 등 다양한 MCP 클라이언트를 지원.