A fully peer-to-peer WebRTC chat application with no backend server and no signaling broker. Communication happens directly between browsers using manual signaling exchange.
🌐 Live Demo: https://themorpheus407.github.io/TheCommunity/
TheCommunity is a community-driven project that demonstrates true peer-to-peer communication. The project direction is entirely steered by the community through GitHub Issues. Starting as a chat application, its future evolution depends on community contributions and ideas.
- No Backend Required - All communication happens directly between peers via WebRTC DataChannels
- Manual Signaling - No automatic signaling server means users control exactly what information is shared
- Rate Limiting - Protection against message flooding (max 30 messages per 5-second interval)
- Message Size Limits - Maximum 2000 characters per message to prevent abuse
- Channel Validation - Only accepts the expected 'chat' data channel, blocks others
- Security Warnings - Users are informed that sharing WebRTC signals reveals network addresses
- Real-time P2P Messaging - Direct browser-to-browser communication
- Message History - Visual distinction between your messages, peer messages, and system notices
- Auto-scroll - Messages automatically scroll to show the latest content
- Input Validation - Client-side validation for message length and format
- AI Draft Assistance - Optional OpenAI-powered rewrite button that refines your text locally using your own API key
- Screen Sharing - Stream your screen peer-to-peer with zero servers involved
- Permissioned Remote Control - Allow your peer to drive your mouse and keyboard within the app, with explicit opt-in and instant revocation
- Collapsible Signaling Window - Hide the technical signaling UI once connected
- Responsive Design - Works seamlessly on desktop and mobile devices
- Light/Dark Theme Toggle - One-click switch between palettes, remembered per browser and seeded from system preference
- Language Picker - Switch the interface between multiple German dialects on the fly
- Status Indicators - Real-time connection status and channel state feedback
- Accessible - ARIA labels and semantic HTML for better accessibility
- Background Loop - After your first interaction the requested “oiia oiia” soundtrack starts at full volume and keeps looping for peak gamer energy (Issue #73).
- Konami Remix - Enter the classic ↑ ↑ ↓ ↓ ← → ← → B A combo to toggle the Nyan Cat track on top of the background loop.
- Zero Dependencies - Uses only native browser APIs and React from CDN
- No Build Step - Pure JavaScript that runs directly in the browser
- ICE Candidate Collection - Automatically gathers and includes ICE candidates in signals
- Connection State Monitoring - Tracks ICE and peer connection states
- Graceful Cleanup - Properly closes connections when the page is unloaded
- WebRTC - Real-time peer-to-peer communication
- RTCPeerConnection API for establishing connections
- RTCDataChannel API for text messaging
- ICE (Interactive Connectivity Establishment) for NAT traversal
- React 18 - UI library (loaded from CDN)
- HTML5 - Semantic markup
- CSS3 - Modern styling with gradients, backdrop filters, and responsive design
- JavaScript (ES6+) - Modern JavaScript with hooks (useState, useRef, useCallback, useEffect)
- GitHub Pages - Static hosting
- GitHub Actions - Automated deployment
Since there's no signaling server, users manually exchange WebRTC signals:
-
Peer A (Initiator)
- Clicks "Create Offer"
- Copies the generated JSON signal
- Shares it with Peer B (via email, chat, etc.)
-
Peer B (Responder)
- Pastes Peer A's signal into "Remote Signal"
- Clicks "Apply Remote"
- Clicks "Create Answer"
- Copies and shares their answer signal with Peer A
-
Peer A (Completing Connection)
- Pastes Peer B's answer into "Remote Signal"
- Clicks "Apply Remote"
- Connection establishes automatically
-
Chat Begins
- Once connected, the signaling window can be collapsed
- Messages flow directly peer-to-peer
- No server involvement in the conversation
- When the app starts you can paste a personal OpenAI API key. The key stays in browser memory only and is sent exclusively to
api.openai.com. - Draft a message and click Rewrite with AI to request a refined version. The result replaces your local draft so you can review it before sending.
- Use Update OpenAI Key in the chat header any time to rotate or remove the key.
- Choose Disable AI or refresh the page to clear the key completely. You are responsible for any usage charges billed to your OpenAI account.
- The initial theme matches your operating system preference when possible.
- Use the Light/Dark Mode toggle in the chat header to switch palettes at any time.
- Your choice is remembered locally; clear browser storage or toggle again to follow a different preference.
┌─────────────┐ ┌─────────────┐
│ Peer A │ │ Peer B │
│ (Browser) │ │ (Browser) │
└──────┬──────┘ └──────┬──────┘
│ │
│ 1. Create Offer │
├──────────────────────────────► │
│ (Manual Exchange) │
│ │
│ 2. Create Answer │
│ ◄──────────────────────────────┤
│ (Manual Exchange) │
│ │
│ 3. Direct P2P Connection │
│ ◄═══════════════════════════► │
│ (WebRTC DataChannel) │
│ │
│ 4. Chat Messages │
│ ◄═══════════════════════════► │
│ │
- A modern web browser with WebRTC support (Chrome, Firefox, Safari, Edge)
- No installation required!
Simply visit https://themorpheus407.github.io/TheCommunity/
-
Clone the repository:
git clone https://github.com/TheMorpheus407/TheCommunity.git cd TheCommunity -
Open
index.htmlin your browser:# Using Python 3 python -m http.server 8000 # Or using Node.js npx http-server
-
Navigate to
http://localhost:8000
- Both users open the application
- One user creates an offer and shares the signal
- The other user applies the offer, creates an answer, and shares back
- The first user applies the answer
- Start chatting!
Note: For best results, have both users ready at the same time since the signaling exchange is manual.
TheCommunity/
├── index.html # Main HTML file
├── app.js # React application with WebRTC logic
├── styles.css # All styling (dark theme, responsive)
├── package.json # Project metadata
├── LICENSE # MIT License
├── CLAUDE.md # AI development guidelines
├── AGENTS.md # Additional development guidelines
└── .github/
└── workflows/ # GitHub Actions for deployment
- ✅ Establishes direct peer-to-peer connections
- ✅ Protects against message flooding
- ✅ Validates data channel names
- ✅ Limits message sizes
- ✅ Warns users about network address exposure
- ❌ Encrypt messages (WebRTC DataChannels use DTLS, but content is not end-to-end encrypted)
- ❌ Authenticate users
- ❌ Persist message history
- ❌ Hide your IP address from peers
- ❌ Proxy OpenAI requests on your behalf (your browser talks to api.openai.com directly with your key)
- Only connect with people you trust
- Don't share sensitive information
- Be aware that your IP address is visible to peers
- Consider using a VPN if privacy is a concern
- Treat your OpenAI API key like a password and only enter it on devices you control
This is a community-driven project! Here's how to contribute:
- Check Existing Issues - See what the community is working on
- Create an Issue - Propose new features or report bugs
- Submit a Pull Request - Follow the project's clean code guidelines
- Follow CLAUDE.md - Read the development guidelines before contributing
- Clean, maintainable code
- Extensible architecture
- No breaking changes to the live application
- Security-first approach
- Community-driven feature development
- WebRTC-only communication (no backend)
Since the app is deployed via GitHub Actions:
- Test thoroughly in your local environment
- Check the preview at
https://themorpheus407.github.io/TheCommunity/after deployment - Verify no functionality is broken
- Test on multiple browsers if possible
The future of TheCommunity is decided by the community through GitHub Issues. Current areas of interest:
- Additional P2P features
- Enhanced security measures
- UI/UX improvements
- Mobile experience optimization
- File sharing capabilities (future consideration)
- Video/audio chat (future consideration)
Want to suggest a feature? Open an issue!
| Browser | Minimum Version | Notes |
|---|---|---|
| Chrome | 56+ | Full support |
| Firefox | 44+ | Full support |
| Safari | 11+ | Full support |
| Edge | 79+ | Full support (Chromium) |
- Ensure both peers have completed the full signaling exchange
- Check that the signals are copied completely (they're long JSON strings)
- Verify both browsers support WebRTC
- Try refreshing and starting over
- Check that the channel status shows "Channel open"
- Ensure you're not sending messages too quickly (rate limit)
- Verify your message is under 2000 characters
- One or both peers may be behind a restrictive firewall
- Consider using a STUN/TURN server (requires code modification)
- Try on a different network
This project is licensed under the MIT License - see the LICENSE file for details.
- Built with WebRTC technology
- Powered by React
- Designed for the community, by the community
- Issues: GitHub Issues
- Discussions: Use GitHub Issues for feature requests and questions
- Repository: https://github.com/TheMorpheus407/TheCommunity
Built with ❤️ by the community | No servers, no tracking, just pure P2P