ai-bug-reporter

React Native SDK for capturing bug reports with screenshots, voice transcription (OpenAI Whisper), and AI-generated descriptions from screenshot analysis.

Features

• Screenshot capture — attaches a screenshot via react-native-view-shot
• Voice recording — record a voice note via react-native-nitro-sound
• Speech to text — transcribes voice with OpenAI Whisper
• Screenshot analysis — uses GPT-4o mini vision to write a developer-ready bug description
• Bug reporter UI — draggable floating button + modal workflow

Installation

npm install ai-bug-reporter react-native-view-shot react-native-nitro-sound react-native-nitro-modules

iOS

Add to Info.plist:

<key>NSMicrophoneUsageDescription</key>
<string>This app records voice notes for bug reports.</string>

Then:

cd ios && pod install && cd ..

Android

Add to AndroidManifest.xml:

<uses-permission android:name="android.permission.RECORD_AUDIO" />

Peer dependencies

| Package | Required | |---------|----------| | react | yes | | react-native | yes | | react-native-view-shot | yes | | react-native-nitro-sound | yes | | react-native-nitro-modules | yes |

Usage

import { BugReporter, MobileQA } from 'ai-bug-reporter';

MobileQA.init({
  apiKey: 'your-sdk-key',
  openaiApiKey: 'sk-...', // required for Whisper + AI descriptions
  enableScreenshot: true,
  enableVoice: true,
  enableAI: true,
});

export default function App() {
  return (
    <BugReporter onReportSubmitted={(report) => console.log(report)}>
      <YourApp />
    </BugReporter>
  );
}

Reporter workflow

1. User taps the floating Report button
2. SDK captures a screenshot
3. User records a voice note (optional but recommended)
4. User taps Generate AI description
5. SDK calls Whisper → transcribes audio
6. SDK calls GPT vision → analyzes screenshot + transcript
7. Description field is auto-filled; user can edit and submit

Configuration

MobileQA.init({
  apiKey: 'your-sdk-key',
  openaiApiKey: 'sk-...',
  openaiBaseUrl: 'https://api.openai.com/v1', // optional
  whisperModel: 'whisper-1',                  // optional
  visionModel: 'gpt-4o-mini',                 // optional
  enableScreenshot: true,
  enableVoice: true,
  enableAI: true,
});

API

| Method | Description | |--------|-------------| | MobileQA.init(config) | Initialize SDK | | generateIssueDescription({ screenshot, audioUri }) | Whisper + vision → description | | getVoiceService() | Access recorder (startRecording, stopRecording) | | captureScreenshot(ref) | Capture screenshot | | submitReport(data) | Create and submit report |

BugReport

interface BugReport {
  id: string;
  createdAt: string;
  description: string;
  screenshot?: string;
  voiceTranscript?: string;
  audioUri?: string;
}

Security note

openaiApiKey is used directly from the app for the MVP. For production, proxy OpenAI calls through your backend so the API key is not shipped in the client.

Development

yarn install
yarn typecheck
yarn test
yarn prepare
yarn example ios

Set OPENAI_API_KEY in example/src/App.tsx to test AI features locally.

License

MIT