copy prompt

Author: huozhi

packages/next/src/next-devtools/dev-overlay/components/copy-button/index.tsx

@@ -133,20 +133,35 @@ function useCopyModern(content: string) {
 const useCopy =
   typeof React.useActionState === 'function' ? useCopyModern : useCopyLegacy
 
-export function CopyButton({
-  actionLabel,
-  successLabel,
-  content,
-  icon,
-  disabled,
-  ...props
-}: React.HTMLProps<HTMLButtonElement> & {
+type CopyButtonProps = React.HTMLProps<HTMLButtonElement> & {
   actionLabel: string
   successLabel: string
-  content: string
   icon?: React.ReactNode
-}) {
-  const [copyState, copy, reset, isPending] = useCopy(content)
+}
+
+export function CopyButton(
+  props: CopyButtonProps & { content?: string; getContent?: () => string }
+) {
+  const {
+    content,
+    getContent,
+    actionLabel,
+    successLabel,
+    icon,
+    disabled,
+    ...rest
+  } = props
+  const getContentString = (): string => {
+    if (content) {
+      return content
+    }
+    if (getContent) {
+      return getContent()
+    }
+    return ''
+  }
+  const contentString = getContentString()
+  const [copyState, copy, reset, isPending] = useCopy(contentString)
 
   const error = copyState.state === 'error' ? copyState.error : null
   React.useEffect(() => {
@@ -186,7 +201,7 @@ export function CopyButton({
 
   return (
     <button
-      {...props}
+      {...rest}
       type="button"
       title={label}
       aria-label={label}

packages/next/src/next-devtools/dev-overlay/components/errors/error-overlay-layout/error-overlay-layout.test.tsx

@@ -29,6 +29,7 @@ const renderTestComponent = () => {
         installed: '15.0.0',
         staleness: 'fresh',
       }}
+      generateAIPrompt={() => ''}
     >
       Module not found: Cannot find module './missing-module'
     </ErrorOverlayLayout>

packages/next/src/next-devtools/dev-overlay/components/errors/error-overlay-layout/error-overlay-layout.tsx

@@ -52,6 +52,7 @@ export interface ErrorOverlayLayoutProps extends ErrorBaseProps {
   activeIdx?: number
   setActiveIndex?: (index: number) => void
   dialogResizerRef?: React.RefObject<HTMLDivElement | null>
+  generateAIPrompt: () => string
 }
 
 export function ErrorOverlayLayout({
@@ -70,6 +71,7 @@ export function ErrorOverlayLayout({
   setActiveIndex,
   isTurbopack,
   dialogResizerRef,
+  generateAIPrompt,
   // This prop is used to animate the dialog, it comes from a parent component (<ErrorOverlay>)
   // If it's not being passed, we should just render the component as it is being
   // used without the context of a parent component that controls its state (e.g. Storybook).
@@ -151,7 +153,11 @@ export function ErrorOverlayLayout({
                       />
                     )}
                   </span>
-                  <ErrorOverlayToolbar error={error} debugInfo={debugInfo} />
+                  <ErrorOverlayToolbar
+                    error={error}
+                    debugInfo={debugInfo}
+                    generateAIPrompt={generateAIPrompt}
+                  />
                 </div>
                 <ErrorMessage errorMessage={errorMessage} />
               </ErrorOverlayDialogHeader>

packages/next/src/next-devtools/dev-overlay/components/errors/error-overlay-toolbar/copy-stack-trace-button.tsx

@@ -1,14 +1,20 @@
 import { CopyButton } from '../../copy-button'
 
-export function CopyStackTraceButton({ error }: { error: Error }) {
+export function CopyStackTraceButton({
+  error,
+  generateAIPrompt,
+}: {
+  error: Error
+  generateAIPrompt: () => string
+}) {
   return (
     <CopyButton
       data-nextjs-data-runtime-error-copy-stack
       className="copy-stack-trace-button"
-      actionLabel="Copy Stack Trace"
-      successLabel="Stack Trace Copied"
-      content={error.stack || ''}
-      disabled={!error.stack}
+      actionLabel="Copy AI Debug Prompt"
+      successLabel="AI Debug Prompt Copied"
+      getContent={generateAIPrompt}
+      disabled={!error}
     />
   )
 }

packages/next/src/next-devtools/dev-overlay/components/errors/error-overlay-toolbar/error-overlay-toolbar.tsx

@@ -7,18 +7,20 @@ type ErrorOverlayToolbarProps = {
   error: Error
   debugInfo: DebugInfo | undefined
   feedbackButton?: React.ReactNode
+  generateAIPrompt: () => string
 }
 
 export function ErrorOverlayToolbar({
   error,
   debugInfo,
   feedbackButton,
+  generateAIPrompt,
 }: ErrorOverlayToolbarProps) {
   return (
     <span className="error-overlay-toolbar">
       {/* TODO: Move the button inside and remove the feedback on the footer of the error overlay.  */}
       {feedbackButton}
-      <CopyStackTraceButton error={error} />
+      <CopyStackTraceButton error={error} generateAIPrompt={generateAIPrompt} />
       <DocsLinkButton errorMessage={error.message} />
       <NodejsInspectorButton
         devtoolsFrontendUrl={debugInfo?.devtoolsFrontendUrl}

packages/next/src/next-devtools/dev-overlay/container/build-error.tsx

@@ -37,12 +37,42 @@ export const BuildError: React.FC<BuildErrorProps> = function BuildError({
     [message]
   )
 
+  const generateAIPrompt = useCallback(() => {
+    const parts: string[] = []
+
+    // 1. Error Type
+    parts.push(`## Error Type\nBuild Error`)
+
+    // 2. Error Message
+    if (formattedMessage) {
+      parts.push(`## Error Message\n${formattedMessage}`)
+    }
+
+    // 3. Build Output (decoded stderr)
+    if (message) {
+      const decodedOutput = stripAnsi(message)
+      parts.push(`## Build Output\n${decodedOutput}`)
+    }
+
+    // Format as AI prompt
+    const prompt = `Fix this error in Next.js app:
+
+${parts.join('\n\n')}
+
+Next.js version: ${props.versionInfo.installed} (${process.env.__NEXT_BUNDLER})
+
+Explain what's wrong and fix it.`
+
+    return prompt
+  }, [message, formattedMessage, props.versionInfo])
+
   return (
     <ErrorOverlayLayout
       errorType="Build Error"
       errorMessage={formattedMessage}
       onClose={noop}
       error={error}
+      generateAIPrompt={generateAIPrompt}
       {...props}
     >
       <Terminal content={message} />

packages/next/src/next-devtools/dev-overlay/container/errors.tsx

@@ -1,4 +1,4 @@
-import { useMemo, useRef, Suspense } from 'react'
+import { useMemo, useRef, Suspense, useCallback } from 'react'
 import type { DebugInfo } from '../../shared/types'
 import { Overlay, OverlayBackdrop } from '../components/overlay'
 import { RuntimeError } from './runtime-error'
@@ -15,9 +15,12 @@ import {
   NEXTJS_HYDRATION_ERROR_LINK,
 } from '../../shared/react-19-hydration-error'
 import type { ReadyRuntimeError } from '../utils/get-error-by-type'
+import { useFrames } from '../utils/get-error-by-type'
 import type { ErrorBaseProps } from '../components/errors/error-overlay/error-overlay'
 import type { HydrationErrorState } from '../../shared/hydration-error'
 import { useActiveRuntimeError } from '../hooks/use-active-runtime-error'
+import { formatCodeFrame } from '../components/code-frame/parse-code-frame'
+import stripAnsi from 'next/dist/compiled/strip-ansi'
 
 export interface ErrorsProps extends ErrorBaseProps {
   getSquashedHydrationErrorDetails: (error: Error) => HydrationErrorState | null
@@ -132,6 +135,88 @@ export function Errors({
     setActiveIndex,
   } = useActiveRuntimeError({ runtimeErrors, getSquashedHydrationErrorDetails })
 
+  // Get parsed frames data
+  const frames = useFrames(activeError)
+
+  const firstFrame = useMemo(() => {
+    const firstFirstPartyFrameIndex = frames.findIndex(
+      (entry) =>
+        !entry.ignored &&
+        Boolean(entry.originalCodeFrame) &&
+        Boolean(entry.originalStackFrame)
+    )
+
+    return frames[firstFirstPartyFrameIndex] ?? null
+  }, [frames])
+
+  const generateAIPrompt = useCallback(() => {
+    if (!activeError) return ''
+
+    const parts: string[] = []
+
+    // 1. Error Type
+    if (errorType) {
+      parts.push(`## Error Type\n${errorType}`)
+    }
+
+    // 2. Error Message
+    const error = activeError.error
+    let message = error.message
+    if ('environmentName' in error && error.environmentName) {
+      const envPrefix = `[ ${error.environmentName} ] `
+      if (message.startsWith(envPrefix)) {
+        message = message.slice(envPrefix.length)
+      }
+    }
+    if (message) {
+      parts.push(`## Error Message\n${message}`)
+    }
+
+    // 3. Code Frame (decoded)
+    if (firstFrame?.originalCodeFrame) {
+      const decodedCodeFrame = stripAnsi(
+        formatCodeFrame(firstFrame.originalCodeFrame)
+      )
+      parts.push(`## Code Frame\n${decodedCodeFrame}`)
+    }
+
+    // 4. Call Stack (using parsed frames)
+    if (frames.length > 0) {
+      const visibleFrames = frames.filter((frame) => !frame.ignored)
+      if (visibleFrames.length > 0) {
+        const stackLines = visibleFrames
+          .map((frame) => {
+            if (frame.originalStackFrame) {
+              const { methodName, file, lineNumber, column } =
+                frame.originalStackFrame
+              return `    at ${methodName} (${file}:${lineNumber}:${column})`
+            } else if (frame.sourceStackFrame) {
+              const { methodName, file, lineNumber, column } =
+                frame.sourceStackFrame
+              return `    at ${methodName} (${file}:${lineNumber}:${column})`
+            }
+            return ''
+          })
+          .filter(Boolean)
+
+        if (stackLines.length > 0) {
+          parts.push(`## Call Stack\n${stackLines.join('\n')}`)
+        }
+      }
+    }
+
+    // Format as AI prompt
+    const prompt = `Fix this error in Next.js app:
+
+${parts.join('\n\n')}
+
+Next.js version: ${props.versionInfo.installed} (${process.env.__NEXT_BUNDLER})
+
+Explain what's wrong and fix it.`
+
+    return prompt
+  }, [activeError, errorType, firstFrame, frames, props.versionInfo])
+
   if (isLoading) {
     // TODO: better loading state
     return (
@@ -168,6 +253,7 @@ export function Errors({
       activeIdx={activeIdx}
       setActiveIndex={setActiveIndex}
       dialogResizerRef={dialogResizerRef}
+      generateAIPrompt={generateAIPrompt}
       {...props}
     >
       <div className="error-overlay-notes-container">

packages/next/src/next-devtools/dev-overlay/utils/get-error-by-type.ts

@@ -14,7 +14,11 @@ export type ReadyRuntimeError = {
   type: 'runtime' | 'console' | 'recoverable'
 }
 
-export const useFrames = (error: ReadyRuntimeError): OriginalStackFrame[] => {
+export const useFrames = (
+  error: ReadyRuntimeError | null
+): OriginalStackFrame[] => {
+  if (!error) return []
+
   if ('use' in React) {
     const frames = error.frames