React Bug Recorder

A React component for capturing, annotating screenshots and sending them to an AI server.

Installation

npm install react-bug-recorder

Usage

import React from 'react';
import BugRecorder from 'react-bug-recorder';

function App() {
  return (
    <div>
      <BugRecorder />
    </div>
  );
}

export default App;

Features

• Capture screenshots of any part of the screen
• Annotate screenshots with drawings and text
• Download annotated screenshots
• Send screenshots to an AI server for analysis
• Modern and responsive UI

Props

The component accepts the following props:

• apiEndpoint (optional): Custom API endpoint for sending screenshots (default: "http://127.0.0.1:8000/bug_ticket_creator/generate_email/")
• onBugDescription (optional): Callback function that receives the bug description from the AI server

Example with Custom Props

import React from 'react';
import BugRecorder from 'react-bug-recorder';

function App() {
  const handleBugDescription = (description) => {
    console.log('Bug Description:', description);
  };

  return (
    <div>
      <BugRecorder 
        apiEndpoint="https://your-custom-api.com/analyze"
        onBugDescription={handleBugDescription}
      />
    </div>
  );
}

export default App;

Styling

The component comes with default styles, but you can override them using CSS. The component uses the following CSS classes:

• .bug-recorder-container
• .capture-btn
• .screenshot-overlay
• .selection-box
• .annotation-container
• .annotation-tools
• .stage-container
• .button-container
• .bug-description-popup

License

MIT