feat: direct PeerJS agent — no relay tab needed - #36
Merged
Conversation
…et-agent Includes: agent package (state, mcp, scryfall, server, index), design specs, plans, eslint/vite config, ActionLog cardSrcs, useCardReducer lastPlayedSrcs.
Replace dual sync client approach with a relay pattern: - Add agentRelay.ts — bridges WS (agent) ↔ PeerJS (players) - Relay browser applies agent shapes as local shapes (relay's peer ID) - Relay forwards all PeerJS players' shapes to agent via WS - Agent uses simple sync:agent-shapes / sync:remote-shapes messages - No separate WebSocket transport or agentSyncClient needed - Add Relay button to SelectionPanel and SetupScreen The relay browser doesn't play — it bridges. Open a second tab to play against the agent, or let a remote human connect via PeerJS.
Replace WebSocket server with direct PeerJS peer connectivity. node-datachannel provides WebRTC polyfill for Node.js. Verified: polyfill loads, PeerJS creates peer and gets ID.
- Add peer.ts: sets up WebRTC polyfill, creates PeerJS transport and sync client, registers shapes channel - Add shapesChannel.ts: transport-agnostic shapes sync channel mirroring browser's shapesChannel but without React/Zustand dependencies - Update mcp.ts: replace AgentWebSocketServer import with inline AgentServer interface - Delete server.ts and its integration test (replaced by PeerJS peer connectivity)
…server - Replace AgentWebSocketServer with createAgentPeer (PeerJS/WebRTC) - Polyfill import is first line, before any PeerJS imports - Replace --port CLI arg with --peer (optional browser peer ID to auto-connect) - Agent shapes sync via shapesChannel; remote shapes arrive via onRemoteShapes - action-log / card-state-sync messages subscribed via agentPeer.onMessage() - Add connectToPeer MCP tool to connect to a browser by peer ID - Remove debugMessages tool and all WebSocket-related code - Rewrite e2e test to use mockServer (no transport dependency) - Fix mcp.test.ts to import AgentServer from mcp.js instead of server.js - Add @types/node devDependency to fix process.argv TypeScript errors
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
- Dynamic import of peerjs and @vescofire/peersync/peerjs to ensure WebRTC polyfill globals are set before PeerJS checks for them - Custom createPeer function handles CJS default export interop - MCP config uses cwd: "maginet-agent" for correct module resolution
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
The MCP agent joins the game as a real PeerJS peer — no relay browser tab, no WebSocket server, no bridge code.
Architecture
graph LR CC["Claude Code<br/>(LLM)"] -- "stdio / MCP" --> MCP["MCP Server<br/>(Node.js)"] MCP -- "PeerJS / WebRTC" --> You["Your Browser"] MCP -- "PeerJS / WebRTC" --> Opp["Opponent"] style MCP fill:#bbf,stroke:#333,stroke-width:2pxThe agent uses
node-datachannelto polyfill WebRTC in Node.js, then connects via@vescofire/peersync's PeerJS transport — the same sync engine the browsers use. Shapes, action logs, and card state all flow through the existing sync channels.How to use
abc-123"connectToPeertool → agent joins as a peerWhat changed vs PR #35 (relay approach)
Supersedes
Test plan