The latest articles on DEV Community by Yevhenii (@yevheniidev). https://dev.to/yevheniidev https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F4022986%2Fa2839dab-0bb5-442a-a332-7e73c260e6d7.png https://dev.to/yevheniidev en Yevhenii Thu, 09 Jul 2026 15:35:18 +0000 https://dev.to/yevheniidev/i-built-an-mcp-proxy-that-reduces-playwright-and-figma-context-for-ai-agents-48g3 https://dev.to/yevheniidev/i-built-an-mcp-proxy-that-reduces-playwright-and-figma-context-for-ai-agents-48g3 <p>Over the past few months I've been using Claude Code heavily with Playwright and Figma.</p> <p>At first everything worked well, but after longer sessions I started noticing a few recurring problems:</p> <ul> <li>Playwright browser snapshots were consuming hundreds of KB of context.</li> <li>Figma responses often contained much more information than the agent actually needed.</li> <li>Browser sessions occasionally crashed, forcing the agent to start over.</li> </ul> <p>None of these problems were caused by the MCP servers themselves.</p> <p>They were simply returning everything they were designed to return.</p> <p>The issue was that AI agents pay for every token they receive.</p> <h2> The Idea </h2> <p>Instead of modifying every existing MCP server, I wondered:</p> <blockquote> <p>What if there was a transparent proxy between the AI agent and the MCP server?</p> </blockquote> <p>That idea became <strong>PlayGuard</strong>.<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>AI Agent │ ▼ PlayGuard │ ▼ Playwright MCP / Figma MCP / ... </code></pre> </div> <p>The proxy intercepts requests and responses before they reach the agent.</p> <p>This makes it possible to optimize them without changing the original MCP server.</p> <h2> What PlayGuard Does </h2> <p>Current features include:</p> <ul> <li>Response optimization for Playwright</li> <li>Response optimization for Figma</li> <li>Automatic Playwright session recovery</li> <li>Response caching</li> <li>Configurable optimization rules</li> <li>Plugin architecture for additional MCP servers</li> </ul> <p>The goal is simple:</p> <blockquote> <p>Make existing MCP servers more efficient for AI agents.</p> </blockquote> <h2> Why It Matters </h2> <p>Large language models have limited context windows.</p> <p>If an MCP server returns 300–500 KB of data every time the agent asks for a browser snapshot, that context disappears quickly.</p> <p>By removing unnecessary information before it reaches the model, the agent can spend more of its context on reasoning instead of processing redundant data.</p> <h2> Design Philosophy </h2> <p>PlayGuard is intentionally transparent.</p> <p>It doesn't replace MCP servers.</p> <p>It doesn't require modifying existing tools.</p> <p>It simply sits in the middle and optimizes communication.</p> <p>That also means new optimizations can be added over time without requiring changes to Playwright, Figma, or other MCP implementations.</p> <h2> Roadmap </h2> <p>Some ideas I'm currently working on:</p> <ul> <li>More MCP integrations</li> <li>Better optimization pipelines</li> <li>Performance benchmarks</li> <li>Custom optimization plugins</li> <li>More intelligent caching</li> </ul> <h2> Feedback Welcome </h2> <p>The project is open source, and I'd appreciate any feedback or ideas.</p> <p>GitHub:<br> <a href="https://github.com/ZenyaDAR/PlayGuard" rel="noopener noreferrer">https://github.com/ZenyaDAR/PlayGuard</a></p> <p>Website:<br> <a href="https://zenyadar.github.io/PlayGuard/" rel="noopener noreferrer">https://zenyadar.github.io/PlayGuard/</a></p> <p>If you find the project useful, consider giving it a ⭐ on GitHub. It helps other developers discover the project.</p> ai opensource playwright productivity