NextJS DevTools MCP

Next.js DevTools MCP Extension for Zed

A Zed extension that integrates the Next.js DevTools MCP server for AI-powered development assistance.

Features

Access Next.js 16+ documentation and best practices
Automated Next.js upgrade tools
Cache Components setup and configuration
Browser testing integration with Playwright
Real-time Next.js runtime diagnostics (requires Next.js 16+)

Installation

From Zed Extensions

Open Zed
Press Cmd+Shift+P (Mac) or Ctrl+Shift+P (Linux/Windows)
Type "extensions" and select "Extensions: Install Extensions"
Search for "Next.js DevTools MCP"
Click Install

As Dev Extension (for development)

Clone this repository
Open Zed
Press Cmd+Shift+P and select "Extensions: Install Dev Extension"
Select the zed-extension directory

Requirements

Node.js v20.19 or newer
npm or pnpm
Next.js project (optional, but recommended for full features)

Usage

Once installed, the MCP server will be available in Zed's Agent Panel.

Example Prompts

Help me upgrade my Next.js app to version 16

What's the structure of my Next.js routes?

Enable Cache Components in my project

MCP Server Features

This extension provides access to:

Documentation Search: Query Next.js docs and knowledge base
Upgrade Tools: Automated Next.js 16 upgrade with codemods
Cache Components Setup: Complete setup with error detection
Browser Testing: Playwright integration for automated testing
Runtime Diagnostics: Real-time Next.js dev server insights (Next.js 16+)

Development

# Install dependencies
cargo build --release --target wasm32-wasip1

# Test in Zed
# Install as dev extension and check logs with Cmd+Shift+P -> "Zed: Open Log"

License

MIT

Contributing

Contributions are welcome! Please open an issue or submit a pull request.