AU
Browse registry
OpenCode ready
1 variant

Next.js MCP

Install Next.js DevTools MCP so OpenCode can query your dev server.

Since Next.js 16, both browser and server logs will be captured and made accessible via MCP, allowing you to query and view logs from both ends directly in the agent

Show more
11Reply
Open in X@huozhihuozhi

Installation

Install

CLI install

Uses the same host and base path as this registry. Includes the post-install step.

npx shadcn@latest add https://brennanmceachran.github.io/agent-utils/nextjs-mcp-opencode.json && node .opencode/bin/merge-mcp.mjs

Quick start

What this gives you

  • Hooks OpenCode into the Next.js dev server MCP endpoint (/_next/mcp).
  • Lets you read errors, logs, and routes without leaving the terminal.
  • Adds next-devtools-mcp to opencode.json / opencode.jsonc.

Quickstart

  1. Install using the single command in the Install section above.

Manual install: add the contents of .opencode/mcp/next-devtools.json under mcp in opencode.json or opencode.jsonc.

  1. Start your dev server (the MCP endpoint only exists while it is running):
npm run dev
  1. Restart OpenCode so it reloads MCP config.
  2. Ask your agent:
  • "Show me current Next.js errors"
  • "List my routes"
  • "Open the app and take a screenshot of /"

Usage

How to use it well

1) Set expectations in your agent instructions

Add a short note to your agent instructions (for example AGENTS.md or your OpenCode agent file) so it always uses MCP and docs:

When working on a Next.js project:
- call init at the start of the session
- call nextjs_index before making changes
- use nextjs_docs for Next.js questions
- verify UI changes with browser tools

2) Start with runtime reality

  • Ask for get_errors and get_routes before touching code.
  • Use get_page_metadata when you are unsure what a route renders.

3) Use the browser for anything visual

  • Ask for a screenshot and console errors after UI changes.
  • When bugs only show in the browser, use Playwright to reproduce.
  • Example: "Open /, take a screenshot, and suggest UI improvements."

4) Keep docs and upgrades close

  • When you hit a Next.js API question, ask the agent to query official docs.
  • Use the upgrade and cache component helpers when you are migrating.

5) Keep the loop tight

After each fix, re-check errors and verify the page again.

Examples

Shared runs

ThreadPlatformWhat it showsLink

Notes

Notes

Requires Next.js 16+ and a running dev server; restart OpenCode after installing so MCP tools load.