Inspiration
Security review becomes slow when findings live in a dense dashboard while an agent must guess its way through pixels—or when the agent works in a separate chat that the human cannot easily verify. We built Hi AUDIT Triage Room so both can work from the same structured, visible security workspace.
What it does
Hi AUDIT Triage Room is a shared security-triage workspace for a person and their browser agent. It exposes a fixed synthetic audit scenario through seven imperative WebMCP tools. Together, a user and agent can inspect the workspace, focus the visible findings, review evidence, record status and priority with a rationale, build a phased remediation plan, and verify that the structured result matches the page.
The important interaction is not “agent clicks dashboard buttons.” The agent works with security outcomes—scope, findings, decisions, and plan tasks—while every change appears in the same interface the person is reviewing. The user can take over at any point with normal controls, and the shared activity trail makes authorship visible.
The public demo contains five clearly labeled synthetic findings and never uploads source code or claims to scan a real repository.
Why WebMCP is a good fit
Security findings are dense, structured, and consequential. Asking an agent to infer them from pixels is fragile, while hiding the work in a chat makes human review difficult. WebMCP gives the agent narrow, typed capabilities and keeps the human-facing UI as the source of shared context.
Read tools let the agent ground itself before acting. Write tools update the same browser-local state as the human controls. A final read-back tool lets the agent verify the plan that is visibly on screen. This creates a legible human-in-the-loop workflow rather than a parallel automation channel.
How it was built
The challenge experience is a Next.js 16 and React 19 Client Component. At the
top-level /webmcp route it feature-detects document.modelContext and
registers seven tools:
get_audit_workspaceset_audit_scopefilter_findingsget_finding_detailstriage_findingbuild_remediation_planget_remediation_plan
Each tool has a narrow JSON Schema plus runtime validation. Read-only tools use
readOnlyHint; responses containing synthetic code evidence also use
untrustedContentHint. Registration is cancelled with an AbortController on
cleanup or partial failure. The state is stored locally in the browser, and
defensive validation safely discards malformed persisted data. Browsers without
WebMCP still get the complete human interface.
Challenges
The hardest part was making one state model safe and understandable for two actors. Tool calls needed to update the UI immediately without stale React closures, while human edits needed to be visible to the next agent call. A ref backs the current state for tool execution, React renders it, and local storage provides deterministic reloads. We also handled development Strict Mode, partial tool-registration failures, runtime input checks, cancellation, responsive layout, reduced motion, and accessible status controls.
Accomplishments
- Seven working WebMCP tools were exercised in ChatGPT's in-app browser.
- Agent actions and human actions use the same state and activity trail.
- A complete workflow goes from five findings to focused release blockers, documented triage, and a six-step remediation plan.
- The experience remains useful in a browser without WebMCP.
- The demo is deterministic, transparent about synthetic data, and requires no account, secret, or environment variable.
What we learned
The best site tools model domain outcomes, not UI mechanics. Small schemas and explicit read-back tools make agent behavior easier to guide and verify. We also learned that feature detection and cleanup are part of the experience: the human UI must remain trustworthy even when tool support is absent or registration is interrupted.
What's next
We plan to connect the same interaction model to authenticated Hi AUDIT scans, add approval gates before high-impact workflow changes, attach ownership and due dates to plan tasks, and export approved plans to engineering trackers. Production connections will retain the product's existing authorization and audit boundaries rather than trusting tool schemas as a security boundary.
Links
Contact
TECHFUND Inc. — [email protected]
Built With
- cybersecurity
- next.js
- react
- typescript
- webmcp
Log in or sign up for Devpost to join the conversation.