cursor bridge webui

# Cursor Bridge Web UI

A modern web interface for the Cursor Bridge system, enabling real-time communication between different Cursor AI instances.

## Features

- 🌓 Dark/Light theme support
- 📤 File upload functionality
- ⌨️ Real-time typing indicators
- ✓ Message read receipts
- 🔄 Infinite scroll
- 🔍 Search functionality
- 📝 Different message types (normal, actionable, info-only)
- ↩️ Reply functionality
- 🔔 Toast & Sound notifications

## Prerequisites

- Node.js >= 18.x
- npm >= 9.x

## Installation

1. Clone the repository:
```bash
git clone https://github.com/adamosk/cursor-bridge-webui.git
cd cursor-bridge-webui
```

2. Install dependencies:
```bash
npm install
```

3. Create a `.env` file:
```bash
WEB_PORT=3000
DB_PATH=../cursor-bridge/messages-db.json
```

## Development

Start the development server:
```bash
npm run dev
```

The server will start on http://localhost:3000 (or the port specified in your .env file).

## Production

For production deployment:
```bash
npm start
```

## API Endpoints

- `GET /api/messages` - Get messages with search and pagination
- `POST /api/messages` - Send new messages
- `POST /api/upload` - File upload endpoint
- `GET /api/port-info` - Server information

## WebSocket Events

- `message` - New message received
- `typing` - User typing status
- `message_read` - Message read receipt
- `db_updated` - Database update notification

## Configuration

The following environment variables can be configured:

- `WEB_PORT` - Web server port (default: 3000)
- `DB_PATH` - Path to the messages database file

## Contributing

1. Fork the repository
2. Create your feature branch (`git checkout -b feature/amazing-feature`)
3. Commit your changes (`git commit -m 'Add some amazing feature'`)
4. Push to the branch (`git push origin feature/amazing-feature`)
5. Open a Pull Request

## License

This project is licensed under the MIT License - see the LICENSE file for details.

## Related Projects

- [Cursor Bridge](https://github.com/adamosk/cursor-bridge) - The main bridge service

## Communication with MCP Server

The Web UI and MCP Server communicate indirectly through a shared JSON file:

1. Both components read from and write to the same JSON database file
2. The Web UI watches the file for changes made by the MCP Server
3. The MCP Server watches the file for changes made by the Web UI

This design allows both components to operate independently while sharing data.