Tool Error

AI chats 6

About

A recoverable connection failure with a clear explanation and compact recovery actions.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Tool Error to your project and fits it to your theme.

Code

How Tool Error is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { useState } from 'react'
import ToolError from '@/components/ui/tool-error'

export default function Demo() {
  const [action, setAction] = useState('')
  return (
    <div className="w-full max-w-xl space-y-3">
      <ToolError
        message="Your session expired. Reconnect to continue from where you left off."
        tool="Workspace"
        onFix={() => setAction('Connection settings opened.')}
        onRetry={() => setAction('Retry requested.')}
      />
      {action && (
        <output className="block text-xs leading-5 text-muted-foreground">{action}</output>
      )}
    </div>
  )
}