[mcp] expose logging (#84226)

Author: huozhi

packages/next/src/server/dev/hot-reloader-turbopack.ts

@@ -751,6 +751,7 @@ export async function createHotReloaderTurbopack(
       ? [
           getMcpMiddleware(
             projectPath,
+            distDir,
             (message) => hotReloader.send(message),
             () => clients.size
           ),

packages/next/src/server/dev/hot-reloader-webpack.ts

@@ -1647,6 +1647,7 @@ export default class HotReloaderWebpack implements NextJsHotReloaderInterface {
         ? [
             getMcpMiddleware(
               this.dir,
+              this.distDir,
               (message) => this.send(message),
               () => this.webpackHotMiddleware?.getClientCount() ?? 0
             ),

packages/next/src/server/mcp/get-mcp-middleware.ts

@@ -6,6 +6,7 @@ import type { HmrMessageSentToBrowser } from '../dev/hot-reloader-types'
 
 export function getMcpMiddleware(
   projectPath: string,
+  distDir: string,
   sendHmrMessage: (message: HmrMessageSentToBrowser) => void,
   getActiveConnectionCount: () => number
 ) {
@@ -20,6 +21,7 @@ export function getMcpMiddleware(
     }
     const mcpServer = getOrCreateMcpServer(
       projectPath,
+      distDir,
       sendHmrMessage,
       getActiveConnectionCount
     )

packages/next/src/server/mcp/get-or-create-mcp-server.ts

@@ -2,12 +2,14 @@ import { McpServer } from 'next/dist/compiled/@modelcontextprotocol/sdk/server/m
 import { registerGetProjectPathTool } from './tools/get-project-path'
 import { registerGetErrorsTool } from './tools/get-errors'
 import { registerGetPageMetadataTool } from './tools/get-page-metadata'
+import { registerGetLogsTool } from './tools/get-logs'
 import type { HmrMessageSentToBrowser } from '../dev/hot-reloader-types'
 
 let mcpServer: McpServer | undefined
 
 export const getOrCreateMcpServer = (
   projectPath: string,
+  distDir: string,
   sendHmrMessage: (message: HmrMessageSentToBrowser) => void,
   getActiveConnectionCount: () => number
 ) => {
@@ -27,6 +29,7 @@ export const getOrCreateMcpServer = (
     sendHmrMessage,
     getActiveConnectionCount
   )
+  registerGetLogsTool(mcpServer, distDir)
 
   return mcpServer
 }

packages/next/src/server/mcp/tools/get-logs.ts

@@ -0,0 +1,56 @@
+/**
+ * MCP tool for getting the path to the Next.js development log file.
+ *
+ * This tool returns the path to the {nextConfig.distDir}/logs/next-development.log file
+ * that contains browser console logs and other development information.
+ */
+import type { McpServer } from 'next/dist/compiled/@modelcontextprotocol/sdk/server/mcp'
+import { stat } from 'fs/promises'
+import { join } from 'path'
+
+export function registerGetLogsTool(server: McpServer, distDir: string) {
+  server.registerTool(
+    'get_logs',
+    {
+      description:
+        'Get the path to the Next.js development log file. Returns the file path so the agent can read the logs directly.',
+    },
+    async () => {
+      try {
+        const logFilePath = join(distDir, 'logs', 'next-development.log')
+
+        // Check if the log file exists
+        try {
+          await stat(logFilePath)
+        } catch (error) {
+          return {
+            content: [
+              {
+                type: 'text',
+                text: `Log file not found at ${logFilePath}.`,
+              },
+            ],
+          }
+        }
+
+        return {
+          content: [
+            {
+              type: 'text',
+              text: `Next.js log file path: ${logFilePath}`,
+            },
+          ],
+        }
+      } catch (error) {
+        return {
+          content: [
+            {
+              type: 'text',
+              text: `Error getting log file path: ${error instanceof Error ? error.message : String(error)}`,
+            },
+          ],
+        }
+      }
+    }
+  )
+}

test/development/mcp-server/fixtures/log-file-app/.gitignore

@@ -0,0 +1 @@
+!tsconfig.json

test/development/mcp-server/fixtures/log-file-app/app/client/page.tsx

@@ -0,0 +1,30 @@
+'use client'
+
+import { useEffect } from 'react'
+
+export default function ClientPage() {
+  useEffect(() => {
+    // Logging in client component useEffect
+    // Test complex partial circular object
+    const circularObj: any = {
+      name: 'test',
+      data: {
+        nested: {
+          value: 42,
+          items: [1, 2, 3],
+        },
+      },
+      metadata: {
+        name: 'safe stringify',
+        version: '1.0.0',
+      },
+    }
+    // Create partial circular reference
+    circularObj.data.parent = circularObj
+    console.log('Client: Complex circular object:', circularObj)
+    console.error('Client: This is an error message from client component')
+    console.warn('Client: This is a warning message from client component')
+  }, [])
+
+  return <p>client page with logging</p>
+}

test/development/mcp-server/fixtures/log-file-app/app/layout.tsx

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react'
+export default function Root({ children }: { children: ReactNode }) {
+  return (
+    <html>
+      <body>{children}</body>
+    </html>
+  )
+}

test/development/mcp-server/fixtures/log-file-app/app/server/page.tsx

@@ -0,0 +1,8 @@
+export default async function Page() {
+  // Logging in RSC render
+  console.log('RSC: This is a log message from server component')
+  console.error('RSC: This is an error message from server component')
+  console.warn('RSC: This is a warning message from server component')
+
+  return <p>hello world</p>
+}

test/development/mcp-server/fixtures/log-file-app/next.config.js

@@ -0,0 +1,10 @@
+/**
+ * @type {import('next').NextConfig}
+ */
+const nextConfig = {
+  experimental: {
+    mcpServer: true,
+  },
+}
+
+module.exports = nextConfig