Skip to main content
Glama
vercel

Next.js DevTools MCP

Official
by vercel
OverviewSchemaRelated ServersScoreDiscussions
TypeScript
Hybrid

enable_cache_components

Migrates Next.js applications to Cache Components mode. Automatically configures settings, starts dev server, detects errors via browser automation, adds Suspense boundaries and 'use cache' directives, and verifies zero errors.

Instructions

Migrate Next.js applications to Cache Components mode and complete setup for Next.js 16.

Use this tool when you need to:

  • Migrate to Cache Components mode

  • Migrate to cache components

  • Enable Cache Components

  • Set up Cache Components

  • Convert to Cache Components

This tool handles ALL steps for migrating and enabling Cache Components:

  • Configuration: Updates cacheComponents flag (experimental in 16.0.0, stable in canary > 16), removes incompatible flags

  • Dev Server: Starts dev server (MCP is enabled by default in Next.js 16+)

  • Error Detection: Loads all routes via browser automation, collects errors using Next.js MCP

  • Automated Fixing: Adds Suspense boundaries, "use cache" directives, generateStaticParams, cacheLife profiles, cache tags

  • Verification: Validates all routes work with zero errors

Key Features:

  • One-time dev server start (no restarts needed)

  • Automated error detection using Next.js MCP tools

  • Browser-based testing with browser automation

  • Fast Refresh applies fixes instantly

  • Comprehensive fix strategies for all error types

  • Support for "use cache", "use cache: private", Suspense boundaries

  • Cache invalidation with cacheTag() and cacheLife() configuration

Requires:

  • Next.js 16.0.0+ (stable or canary only - beta versions are NOT supported)

  • Clean working directory preferred

  • Browser automation installed (auto-installed if needed)

This tool embeds complete knowledge base for:

  • Cache Components mechanics

  • Error patterns and solutions

  • Caching strategies (static vs dynamic)

  • Advanced patterns (cacheLife, cacheTag, draft mode)

  • Build behavior and prefetching

  • Test-driven patterns from 125+ fixtures

Input Schema

TableJSON Schema
NameRequiredDescriptionDefault
project_pathNo

Tool Definition Quality

A3.9/5.0
Behavior4/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

No annotations provided, so description carries full burden. It details steps (configuration updates, dev server start, browser automation, automated fixing, verification). Mentions no restarts needed and that it handles all steps. However, it does not explicitly disclose file modifications or potential risks, but overall transparent.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness3/5

Is the description appropriately sized, front-loaded, and free of redundancy?

Description is long with bullet points and sections. Front-loads purpose but has redundancy (e.g., 'Migrate to Cache Components mode' and 'Migrate to cache components'). Could be more concise without sacrificing completeness.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness4/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Given complexity of migration tool (multiple steps, requirements, features), the description covers configuration, dev server, error detection, fixing, and verification. No output schema, but mentions validation. Fairly complete for task.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters2/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Only one parameter 'project_path' with 0% schema coverage. The description does not explain the parameter beyond its name. It implies via 'Requires: - Next.js 16.0.0+ ... Clean working directory preferred' that project_path is the project directory, but this is not explicit. Low value added over schema.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states the tool migrates Next.js apps to Cache Components mode and completes setup for Next.js 16. It lists specific actions (configuration, dev server, error detection, fixing, verification), distinguishing it from sibling tools like upgrade_nextjs_16 or nextjs_call.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines4/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

Explicitly says 'Use this tool when you need to:' followed by list of scenarios. Includes requirements (Next.js 16.0.0+, clean working directory). Does not explicitly state when not to use, but sibling context implies it is for comprehensive migration. Could mention alternatives for partial tasks.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

Install Server

Other Tools

Latest Blog Posts

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/vercel/next-devtools-mcp'

If you have feedback or need assistance with the MCP directory API, please join our Discord server