Inspiration

Most portfolios are designed for people to browse. But when an AI agent needs to understand whether a studio is a good fit for a specific project, it still has to infer capabilities from navigation, marketing copy, screenshots, and visual presentation.

We wanted to explore a different model: what if a portfolio could provide structured evidence of what its work actually proves?

That became Brenych Studio Agent Interface — a shared evidence workspace where people and AI agents can evaluate the same real portfolio through the same visible interface.

What it does

The site exposes seven structured WebMCP tools directly from the live page:

  • get_profile
  • get_capabilities
  • list_projects
  • get_project
  • match_requirements
  • focus_project
  • create_collaboration_brief

An agent can discover capabilities, inspect project dossiers, evaluate requirements, focus the strongest evidence, and create an editable collaboration brief.

The important part is that the agent does not operate inside a separate chatbot layer. Its actions update the same interface the human is looking at.

For example, when evaluating:

Electron · MCP · AI automation · Supabase

the deterministic evidence model returns 100% evidence coverage, ranks the strongest project evidence, and visibly recomposes the spatial evidence field.

When evaluating unsupported requirements such as:

Swift · Metal · native iOS

the interface returns 0% coverage / NOT DEMONSTRATED instead of inventing a fit.

How we built it

The application is built with:

  • React
  • TypeScript
  • Vite
  • Zustand
  • Motion
  • WebMCP
  • Cloudflare Pages

The architecture separates the pure evidence domain from the browser integration:

Pure domain → application façade → semantic state → WebMCP + visible UI

Matching is deterministic rather than probabilistic.

Requirements are normalized and resolved through curated relationships:

  • exact match: 1.00
  • alias match: 0.90
  • related evidence: 0.45
  • missing evidence: 0.00

There are no embeddings, fuzzy matching, LLM-generated rankings, or screenshot-derived scores.

The WebMCP integration uses the current document.modelContext API. Manual controls and WebMCP tools share the same application boundary, so both human and agent interactions produce the same semantic state.

The production application contains seven scoring project records, four non-scoring studio showcase systems, and 18 reviewed evidence images.

Challenges we ran into

The most important challenge only appeared during real browser certification.

All seven tools registered and enumerated correctly in Chrome, but every invocation initially failed. The development type package described an execution callback with an options argument containing a cancellation signal, while the shipping Chrome host invoked the handler with only the input object.

This was invisible in our unit and type-level tests.

We hardened the WebMCP adapter so the options argument is optional while preserving the same schemas, annotations, outputs, cancellation behavior, and tool semantics.

We also observed a host-level limitation during ChatGPT desktop testing: the in-app browser correctly discovered all seven Site Tools, but the Work agent did not consistently route requests through them and sometimes fell back to general browsing. Since the Challenge also supports WebMCP-enabled Chrome, we completed end-to-end certification there. This exposed an important opportunity for more predictable Site Tools routing across agent hosts.

Real host testing also exposed presentation issues that ordinary automated tests did not catch: scroll-position restoration, evidence metadata overlap, and motion that technically existed but was not perceptible to a human viewer.

Those findings reinforced an important lesson: agent-native interfaces need both deterministic automated verification and real visual/browser certification.

Accomplishments that we're proud of

  • Seven real WebMCP tools registered on the production website
  • End-to-end WebMCP execution verified in Chrome 152
  • Visible agent-driven interface recomposition
  • Deterministic positive and negative evidence matching
  • Exact scroll restoration for both manual and agent-driven project focus
  • Editable page-local collaboration brief with no automatic external write
  • Explicit public / owner-verified evidence boundaries
  • Complete manual fallback when WebMCP is unavailable
  • Responsive experience from mobile to large desktop
  • Reduced-motion and keyboard-accessible interaction paths
  • 244 automated tests across 41 test files
  • Public Apache-2.0 repository and live Cloudflare Pages deployment

What we learned

WebMCP becomes much more interesting when it is not treated as a hidden automation layer.

The strongest interaction we found is when the agent and the human operate on the same visible state.

The agent can evaluate and focus evidence, but the human can immediately inspect why that result exists, review the actual screenshots and limitations, edit the generated brief, or ignore the agent entirely and use the interface manually.

We also learned that negative evidence is as important as positive evidence. A trustworthy agent-facing site should be able to say “not demonstrated” instead of always trying to produce a confident answer.

What's next for Brenych Studio Agent Interface

The current project focuses on a portfolio as an evidence interface, but the same pattern could extend much further.

Future directions include:

  • richer structured evidence provenance
  • broader agent-host interoperability
  • reusable WebMCP evidence components
  • client and procurement evaluation workflows
  • deeper collaboration planning
  • agent-native interfaces for other Brenych Studio products

The larger idea is simple:

A website should not only present information to an AI agent. It should expose clear, bounded operations and structured evidence that both the agent and the human can understand and verify together.

Built With

Share this project:

Updates

Submission history