Regeneration button is present on AI responses

When an AI response misses the mark and the user's only recourse is to delete the message and retype the full prompt, abandonment spikes. Regeneration is the single most-used control in production AI interfaces because models are stochastic by design — the same prompt yields different outputs on each call, and users expect to resample without paying the typing tax. Missing this control also skews feedback signals: users who would have rerolled instead churn, and you lose the data that shows response quality varies.

Wire a regenerate action onto the last assistant message that re-sends the prior user turn with the same context. In a Vercel AI SDK project the reload() helper from useChat does this in one line; otherwise trim the last assistant message from state and re-invoke your submit handler with the last user message. See src/components/chat/message-actions.tsx for the component.

const { reload } = useChat()
<button onClick={() => reload()} aria-label="Regenerate response">Regenerate</button>

• ID: ai-ux-patterns.core-interaction.regeneration-button

• Severity: critical

• What to look for: Count all AI response message components rendered in the conversation UI. For each, enumerate whether a "regenerate", "retry", "try again", or similar button/action is associated with the response. Look in message components, response card components, and any controls rendered below or alongside AI output. Check for click handlers that re-submit the last user message to the AI API, or that re-run the last generation. In React/Vue/Svelte, look for state transitions that reset the last assistant message and trigger a new completion request with the same prompt context. Before evaluating, extract and quote the handler function name or component prop that triggers regeneration.

• Pass criteria: A button, icon, or action element exists that allows the user to regenerate the most recent AI response without manually retyping their prompt. The handler re-sends the previous context to the AI. At least 1 regeneration control must be present. Report the count of response components with regeneration controls. A static label like "Try Again" with no click handler does not count as pass — do not pass based on placeholder UI alone.

• Fail criteria: No regeneration control found in message components or conversation UI. The user's only option when a response is unsatisfactory is to delete and retype their message.

• Skip (N/A) when: The project does not contain an AI chat or completion interface (no AI SDK calls, no streaming response handling, no message list component detected). Signal: no ai, openai, anthropic, @ai-sdk, langchain, or similar AI library in package.json, and no streaming response handler in API routes.

• Detail on fail: Describe what component the AI response is rendered in and that no regeneration action is present. For example: "AI responses rendered in MessageBubble component with no retry/regenerate button or handler".

• Remediation: The regeneration button is one of the most-used controls in AI interfaces. Without it, every unsatisfactory response creates user friction.

  Add a regeneration handler to your message component:

  // In your message list or response component
  const handleRegenerate = async () => {
    // Remove the last assistant message from state
    setMessages(prev => prev.filter((_, i) => i < prev.length - 1))
    // Re-submit the last user message
    const lastUserMessage = messages.findLast(m => m.role === 'user')
    if (lastUserMessage) {
      await submitMessage(lastUserMessage.content)
    }
  }
  
  // Render below the last assistant message
  {isLastAssistantMessage && (
    <button onClick={handleRegenerate} aria-label="Regenerate response">
      <RefreshCwIcon className="w-4 h-4" />
      Regenerate
    </button>
  )}
  

  With the Vercel AI SDK:

  const { reload } = useChat()
  // reload() re-sends the last message with the same model and settings
  <button onClick={() => reload()}>Regenerate</button>