WebMCP Studio: Agent-Native Portfolio

An interactive portfolio implementing the official W3C WebMCP standard for zero-hallucination agent browsing, 11 native tools, declarative forms, and a real-time Live UI Event Bus.

Comment

Inspiration

When autonomous AI agents (like ChatGPT, Gemini, or Claude) navigate portfolios, they run into a bottleneck: DOM trees, token bloat, and hallucinated developer claims. I wanted to treat AI agents as first-class citizens by implementing the official W3C WebMCP standard, Utilizing a passive display website into an interactive, zero-hallucination agent runtime.

What it does

  • Dual W3C WebMCP API: Implements both the Imperative JavaScript API (document.modelContext.registerTool with 11 native capabilities) and the Declarative HTML Forms API (<form toolname="send_inquiry" toolautosubmit="true"> with Resend email delivery).
  • UI Event Bus: Synchronizes a visual interaction in real time. When an agent queries skills or projects, matching nodes in the Skill Graph visual feedback can be seen.
  • Autonomous Recruiter Audit Workflow: AI recruiter agents can cross-reference declared skills against reviewed project evidence snapshots and generate a verified, printable Candidate Dossier.
  • In-Page Simulator Drawer: Allows Users to test all 11 tools, presets, and direct JSON arguments without needing Chrome 149 experimental flags.

How I built it

  • Framework & UI: Next.js 16 (App Router & Turbopack), React 19, TypeScript 5.9.
  • AI Standard: W3C WebMCP (document.modelContext) & Declarative HTML Attributes.
  • Graphics & Motion: Three.js WebGL particle field, Anime.js telemetry, Framer Motion.
  • Video Production: Programmatic motion graphics rendered using HyperFrames.

Challenges I ran into

  • Designing an architecture that works in Chrome 149 with experimental flags while building an in-page fallback simulator so users on any browser can test the exact same tool execution pipeline.
  • Coordinating asynchronous tool execution events with React state across interactive 3D particle fields and physics decks without causing re-render lag.

Accomplishments that I'm proud of

  • 100% W3C WebMCP standard compliance across 11 registered tools and declarative forms.
  • Creating a bi-directional visual event bus where background agent calls manipulate the frontend UI.
  • Producing a verified, evidence-backed candidate audit workflow that eliminates LLM hallucinations.

What I learned

  • How standardized agent-to-browser protocols like WebMCP will web scraping on a person's portfolio can now be done easily with agents.

What's next

  • Adding multi-agent collaborative workspace inspection and real-time WebMCP code review sessions.

Built With

Share this project:

Updates

Submission history