Install with AI Assistants

Analysis:
✓ Detected: Next.js 14 (App Router) with TypeScript
✓ Found: "Feedback" button in app/components/Navbar.tsx
  Confidence: 85% (High)
✓ Recommendation: Use existing element

Implementation:

// app/components/IssueCapture.tsx
'use client';
import { useEffect, useState } from 'react';
import { createClientComponentClient } from '@supabase/auth-helpers-nextjs';

export default function IssueCapture() {
  const [user, setUser] = useState<{ name: string; email: string } | null>(null);
  const supabase = createClientComponentClient();

  // Get user data from auth session
  useEffect(() => {
    const getUser = async () => {
      const { data: { session } } = await supabase.auth.getSession();
      if (session?.user) {
        setUser({
          name: session.user.user_metadata?.full_name || session.user.email?.split('@')[0] || 'User',
          email: session.user.email || ''
        });
      }
    };
    getUser();

    const { data: { subscription } } = supabase.auth.onAuthStateChange((event, session) => {
      if (session?.user) {
        setUser({
          name: session.user.user_metadata?.full_name || session.user.email?.split('@')[0] || 'User',
          email: session.user.email || ''
        });
      } else {
        setUser(null);
      }
    });

    return () => subscription.unsubscribe();
  }, [supabase]);

  useEffect(() => {
    import('https://issuecapture.com/widget.js').then((IC) => {
      const config: any = {
        apiKey: process.env.NEXT_PUBLIC_ISSUECAPTURE_API_KEY!,
        trigger: '#feedback-btn'
      };

      // Prefill user data if authenticated
      if (user) {
        config.user = {
          name: user.name,
          email: user.email
        };
      }

      IC.default.init(config);
    });
  }, [user]);

  return null;
}

// app/layout.tsx (add this import)
import IssueCapture from './components/IssueCapture';

Environment Variables:
Add to .env.local:
NEXT_PUBLIC_ISSUECAPTURE_API_KEY=your_api_key_here

Testing:
1. npm run dev
2. Open http://localhost:3000
3. Click the "Feedback" button
4. Verify widget opens