# MCP Burst - React Frontend
A professional React + TypeScript + Vite application that replaces the vanilla JavaScript demo app with a modern, modular architecture.
## Features
- **React 19 + TypeScript**: Modern React with full TypeScript support
- **State Management**: Context API with useReducer for professional state management
- **Modular Architecture**: Well-organized components, hooks, and utilities
- **Real-time Communication**: WebSocket integration for live updates
- **Professional UI**: Reusable components with dark theme styling
- **Responsive Design**: Mobile-friendly responsive layout
## Architecture
### Directory Structure
```
frontend/src/
├── components/ # React components
│ ├── chat/ # Chat-related components
│ │ ├── ChatPanel.tsx
│ │ ├── ChatMessage.tsx
│ │ └── ChatForm.tsx
│ ├── steps/ # Step execution components
│ │ ├── StepsPanel.tsx
│ │ └── StepItem.tsx
│ ├── resources/ # Resource debugging components
│ │ ├── ResourcesPanel.tsx
│ │ └── ResourcesContent.tsx
│ ├── ui/ # Reusable UI components
│ │ ├── Button.tsx
│ │ ├── Panel.tsx
│ │ └── StatusIndicator.tsx
│ ├── Dashboard.tsx # Main dashboard layout
│ └── Header.tsx # Application header
├── contexts/ # React contexts for state management
│ └── AppContext.tsx # Main application state
├── hooks/ # Custom React hooks
│ └── index.ts # Auto-scroll, focus, and keyboard hooks
├── types/ # TypeScript type definitions
│ └── index.ts # Application interfaces and types
├── utils/ # Utility functions
│ └── index.ts # JSON formatting, ID generation, etc.
├── App.tsx # Main application component
├── App.css # Application styles (converted from original)
└── main.tsx # Application entry point
```
### Key Components
#### AppContext (contexts/AppContext.tsx)
- Centralized state management using React Context + useReducer
- WebSocket connection and message handling
- API communication for chat messages
- Real-time step and resource updates
#### Custom Hooks (hooks/index.ts)
- `useAutoScroll`: Automatically scrolls chat and steps to bottom
- `useAutoFocus`: Auto-focuses input elements
- `useEscapeKey`: Handles escape key for closing modals
#### Reusable UI Components (components/ui/)
- `Button`: Consistent button styling with variants
- `Panel`: Layout components for dashboard sections
- `StatusIndicator`: Connection status display
#### Feature Components
- **Chat**: Message display, form input, and conversation management
- **Steps**: Real-time step execution visualization
- **Resources**: Debug information and resource display
## State Management
The application uses React Context with useReducer for professional state management:
```typescript
interface AppState {
messages: ChatMessage[];
isProcessing: boolean;
connectionStatus: ConnectionStatus;
connectionText: string;
steps: Step[];
stepStats: { successful: number; total: number };
debugInfo: DebugInfo | null;
stepsVisible: boolean;
}
```
## WebSocket Integration
Real-time updates through WebSocket connection:
- Workflow start/complete events
- Step execution progress
- Debug information updates
- Connection status management
- Automatic reconnection handling
## Development
### Running the Application
```bash
# Install dependencies
npm run install:frontend
# Start development server (frontend only)
npm run start:frontend
# Start both backend and frontend
npm run dev
# Build for production
npm run build:frontend
```
### API Integration
The frontend communicates with the backend through:
- REST API: `/api/chat` endpoint for message submission
- WebSocket: Real-time updates for workflow execution
- Proxy configuration in Vite for seamless development
## Migration from Vanilla JavaScript
This React application maintains 100% feature parity with the original vanilla JavaScript application while adding:
1. **Type Safety**: Full TypeScript integration
2. **Component Reusability**: Modular component architecture
3. **State Management**: Professional state management patterns
4. **Developer Experience**: Hot reload, better debugging, modern tooling
5. **Maintainability**: Clear separation of concerns and code organization
## Styling
- Preserved original dark theme aesthetic
- CSS custom properties for consistent theming
- Responsive design for mobile and desktop
- Component-scoped styling approach
## Browser Support
- Modern browsers with ES2020+ support
- WebSocket support required for real-time features
- Mobile-responsive design
