@eddydesk/react

React components for integrating EddyDesk QA into your web application.

Installation

npm install @eddydesk/react

Quick Start

1. Wrap your app with EddyDeskProvider

import { EddyDeskProvider, EddyDeskPanel } from '@eddydesk/react';

function App() {
  return (
    <EddyDeskProvider
      config={{
        projectId: 'your-project-id', // Get this from EddyDesk dashboard
        getCurrentUser: async () => {
          // Return your logged-in user's info
          const user = await yourAuthMethod();
          if (!user) return null;
          return {
            id: user.id,
            email: user.email, // Must match email in EddyDesk testers list
            name: user.name,   // Optional, shown on reports
          };
        },
      }}
    >
      <YourApp />
      <EddyDeskPanel />
    </EddyDeskProvider>
  );
}

2. Add testers in EddyDesk dashboard

The widget only appears for users whose email is registered as a tester in your EddyDesk project.

Configuration Options

<EddyDeskProvider
  config={{
    // Required
    projectId: 'your-project-id',
    getCurrentUser: async () => ({ id: user.id, email: user.email }),

    // Optional — rich context for bug reports
    getAppContext: () => ({
      currentRoute: window.location.pathname,
      userRole: currentUser?.role,       // 'owner', 'manager', 'guest', etc.
      propertyId: currentProperty?.id,   // App-specific context
      custom: { theme: 'dark' },         // Any additional data
    }),

    // Optional — callbacks
    onNavigate: (route) => router.push(route),  // Deep linking from test cases
    onReportSubmitted: (report) => { ... },      // After report submission

    // Optional — self-hosted
    supabaseUrl: '...',
    supabaseAnonKey: '...',
  }}
  enabled={isAuthReady} // Delay init until auth is ready (default: true)
>

Why use getAppContext?

When a tester reports a bug, EddyDesk attaches the app context to the report. This tells the developer fixing the bug:

• Which route the bug is on (auto-captured, but getAppContext is more accurate)
• What role the user has (critical for role-dependent bugs)
• App-specific state like selected property, active filters, etc.

Without getAppContext, EddyDesk still captures the route automatically via window.location.pathname.

Automatic Context Capture

EddyDeskProvider automatically captures debugging context with zero configuration:

This data is attached to every bug report and available to the MCP server's get_report_context tool for AI-assisted debugging.

Components

EddyDeskProvider

Wraps your app and provides EddyDesk context to child components. Automatically starts context capture.

EddyDeskPanel

The floating widget UI. Renders a button that opens the bug report panel.

<EddyDeskPanel
  position="bottom-right" // 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left'
/>

The bug report form includes:

• Report type (Bug, Feedback, Idea)
• Severity selector (for bugs)
• Description
• "Where did it happen?" — lets the tester specify the affected route if different from current page
• Screenshot attachments

EddyDeskErrorBoundary

Automatically captures React errors and offers to report them.

import { EddyDeskErrorBoundary } from '@eddydesk/react';

<EddyDeskErrorBoundary>
  <YourComponent />
</EddyDeskErrorBoundary>

Hooks

useEddyDesk

Access EddyDesk state and methods from any component.

import { useEddyDesk } from '@eddydesk/react';

function MyComponent() {
  const {
    client,           // EddyDesk client instance
    isTester,         // Is current user a tester?
    isQAEnabled,      // Is QA mode enabled for this project?
    shouldShowWidget, // Should the widget be visible?
    testerInfo,       // Current tester's info
    assignments,      // Test cases assigned to this tester
    issueCounts,      // { open, done, reopened } issue counts
    refreshIssueCounts, // Refresh issue counts
    isLoading,        // Loading state
  } = useEddyDesk();

  // Submit a report programmatically
  const handleReport = async () => {
    await client?.submitReport({
      type: 'bug',
      description: 'Something went wrong',
      severity: 'high',
      appContext: client.getAppContext(),
    });
  };
}

Widget Screens

The widget includes screens for bug reporting, test execution, messaging, and issue tracking:

How It Works

1. User logs in to your app
2. EddyDesk checks if the user's email is in the testers list
3. Context capture starts — console logs, network requests, and navigation are recorded
4. Widget appears only for registered testers when QA mode is enabled
5. Testers submit bug reports with automatic debugging context attached
6. Testers track issues — Open, Done (with verification proof), and Reopened cards on home screen
7. Reports appear in your EddyDesk dashboard with full context for developers

Example: Next.js App Router

// app/providers.tsx
'use client';

import { EddyDeskProvider, EddyDeskPanel } from '@eddydesk/react';
import { useAuth } from './auth'; // Your auth hook

export function Providers({ children }) {
  const { user, isLoaded } = useAuth();

  return (
    <EddyDeskProvider
      config={{
        projectId: process.env.NEXT_PUBLIC_EDDYDESK_PROJECT_ID!,
        getCurrentUser: async () => {
          if (!user) return null;
          return { id: user.id, email: user.email, name: user.name };
        },
        getAppContext: () => ({
          currentRoute: window.location.pathname,
          userRole: user?.role,
        }),
      }}
      enabled={isLoaded} // Wait for auth before initializing
    >
      {children}
      <EddyDeskPanel />
    </EddyDeskProvider>
  );
}

// next.config.ts — required for Next.js
const config = {
  transpilePackages: ['@eddydesk/core', '@eddydesk/react'],
};

Support

• GitHub: https://github.com/Bear-Eddy/eddydesk