A real-time emergency response platform frontend built with Next.js 16 and React 19. Features AI-powered anomaly detection, live video streaming, and a comprehensive dispatcher dashboard.

This application provides two main interfaces:

• Caller Page (/): Upload video, detect anomalies using AI, and stream live to dispatchers
• Dispatcher Dashboard (/dispatcher): Monitor active incidents, view live streams, and track timeline events on an interactive map

• Next.js 16.1.3 - React framework with App Router
• React 19.2.3 - UI library
• TypeScript - Type safety
• LiveKit - WebRTC video streaming
• Overshoot SDK - AI-powered video analysis
• Leaflet - Interactive maps
• Tailwind CSS 4 - Styling

• Video upload and preview
• Real-time anomaly detection (weapons, violence, accidents, fire, medical emergencies)
• Signal threshold detection (3 signals trigger streaming)
• Live video streaming via LiveKit
• Scene description analysis
• Automatic incident creation

• Real-time incident and video monitoring
• Interactive map with incident/video markers
• Live video playback
• AI-generated timeline events
• SSE-powered real-time updates
• Collapsible detail panels

• Node.js 18+ or Bun 1.3.4+
• Overshoot API key
• LiveKit account (URL, API key, API secret)
• Running backend API (emergency-copilot-api)

npm install
# or
bun install

Create a .env.local file:

# Overshoot AI Vision
NEXT_PUBLIC_OVERSHOOT_API_KEY=ovs_your_key_here

# LiveKit Video Streaming
LIVEKIT_URL=wss://your-project.livekit.cloud
LIVEKIT_API_KEY=your_api_key
LIVEKIT_API_SECRET=your_api_secret

# Backend API
NEXT_PUBLIC_API_URL=http://localhost:8080

npm run dev
# or
bun dev

Open http://localhost:3000 to see the caller interface. Open http://localhost:3000/dispatcher for the dashboard.

emergency-copilot/
├── app/                        # Next.js App Router
│   ├── api/livekit/token/      # LiveKit token generation
│   ├── dispatcher/             # Dispatcher dashboard
│   ├── map/                    # Location testing
│   ├── layout.tsx              # Root layout
│   └── page.tsx                # Main caller page
├── components/                 # React components
│   ├── dispatcher/             # Dashboard components
│   ├── MapView.tsx             # Basic map
│   └── DispatcherMapView.tsx   # Map with markers
├── hooks/                      # Custom React hooks
│   ├── useSignalDetection.ts   # Anomaly detection
│   ├── useSnapshotWebSocket.ts # WebSocket communication
│   ├── useDescriptionVision.ts # Scene analysis
│   ├── useSSE.ts               # Server-Sent Events
│   └── useLocation.ts          # Geolocation
├── lib/                        # Utilities
│   └── api.ts                  # REST API client
├── types/                      # TypeScript types
└── public/                     # Static assets

The frontend connects to the backend API (emergency-copilot-api) via:

• REST API: Fetch incidents, videos, snapshots, timeline events
• WebSocket (/ws/snapshots): Stream snapshots from caller to backend
• SSE (/stream): Receive real-time updates on dispatcher dashboard
• LiveKit: Video streaming between caller and dispatcher

For complete project documentation, see the main CLAUDE.md file.

For backend API documentation, see:

• API.md - API endpoint reference
• docs/NEXTJS_CLIENT.md - Client integration guide