AlphaX

Inspiration

The biggest barrier to the agent-native web is adoption. Most websites will not implement WebMCP themselves anytime soon. AlphaX was born from a simple question: what if I could turn any existing website into a reliable, agent-ready surface — while keeping the human firmly in control?

Instead of waiting for every site to add tools, AlphaX acts as a universal mediation layer. It analyzes a page, synthesizes high-quality WebMCP tools, registers them live, and lets agents use them under strict human supervision.

What it does

AlphaX lets you:

• Paste any URL
• Automatically generate structured WebMCP tools from the page
• Review and approve those tools
• Register them via document.modelContext.registerTool
• Let agents call the tools while you supervise every sensitive action
• Maintain full provenance and audit logs

It supports three supervision modes (Strict, Supervised, Autonomous) so the human always remains sovereign.

How I built it

AlphaX is a full-stack system:

• Frontend: React + TypeScript + Zustand + Tailwind
• Backend: Express + Playwright (controlled browser)
• Tool Synthesis: Groq + Gemini + a strong heuristic fallback
• Persistence: Supabase
• WebMCP: Full imperative registration with polyfill support

The system extracts page structure, generates tools, registers them dynamically, translates tool calls into Playwright actions, and streams live feedback and provenance to the operator.

Challenges I ran into

• Making tool generation reliable across very different websites
• Keeping Playwright stable in a production environment
• Designing a supervision model that feels safe without becoming annoying
• Balancing power-user features with first-time clarity for judges
• Deploying a Playwright-heavy backend alongside a Vite frontend

What I learnt

Building a meta-layer on top of WebMCP taught us how important human-in-the-loop design is. Agents become far more useful when they operate on real websites through clean, schema-validated tools — but only when the human retains clear control and visibility.

What's next

• Better multi-step goal planning
• Improved tool quality through learning from successful runs
• Chrome extension for deeper same-origin mediation
• Support for authenticated sessions and multi-site orchestration

Built With

• express.js
• gemini
• groq
• node.js
• playwright
• react
• supabase
• tailwind-css
• typescript
• vite
• webmcp
• zustand