Inspiration
I work in the carport business, where early planning starts in ordinary language but quickly becomes a structured decision: use case, footprint, height, roof, openings, material, anchoring, budget, and unresolved site constraints. A normal chat can recommend an answer, but the reasoning often disappears into prose and the page on screen drifts out of sync.
I built BuildBrief Studio to explore a better workflow—one where a person and an AI agent collaborate through the same visible, reviewable workspace.
What it does
BuildBrief Studio turns a rough structure request into a transparent preliminary project brief. The visual worksheet and six imperative Website Tools share one validated configuration. An agent can:
- discover structures in a synthetic catalog;
- read the person's current visible choices;
- compare two or three complete candidates against a budget;
- apply a partial recommendation to the worksheet;
- identify constraints that still need human verification; and
- create a copyable preliminary brief.
Write tools update the visible UI before returning and leave exact field-level receipts. If the person changes a value afterward, the revision advances and the old brief is visibly marked stale.
Why WebMCP fits
WebMCP is the product interface, not an add-on beside it. The agent acts through explicit tools while the person watches the same worksheet change. This makes agent actions observable, reversible, and easier to review than recommendations buried in a chat transcript.
Together, a person and agent can move from an imprecise request to compared alternatives, a selected configuration, documented assumptions, and a usable handoff artifact—without creating a hidden agent-only state.
How I built it
The app is built with Astro, React, and TypeScript and deployed on Cloudflare Pages. It registers six imperative tools from the top-level page using document.modelContext.registerTool:
search_catalogget_build_statecompare_buildsapply_buildcheck_constraintscreate_build_brief
The tools use strict JSON Schema, runtime validation, truthful read/write annotations, structured results, and AbortSignal-aware execution. The tool layer and visible React controls share the same state adapter.
Every price comes from a bundled synthetic catalog and deterministic formula. There is no login, personal information, external API, or production pricing system. Permit, access, anchoring, snow-load, and site conditions remain explicit human-review items.
Challenges and learning
The hardest part was keeping the visible interface and agent-readable state synchronized while making every mutation auditable. I also had to prevent incompatible configurations, distinguish catalog fit from real-world feasibility, and make stale generated briefs obvious after manual edits.
As a beginner working with WebMCP, I learned how careful tool schemas, validation, annotations, lifecycle handling, and visible receipts turn an AI interaction into a dependable product workflow. OpenAI Codex helped me implement, debug, test, and harden the project, but I reviewed the generated work against the running app and its automated tests.
What's next
The hackathon build deliberately uses synthetic data and stops before any production quote or permitting decision. The next step is to apply this human-and-agent collaboration pattern to my real carport business, with authenticated data, server-side pricing, audit trails, and the necessary engineering and compliance checks.
Built With
- astro
- cloudflare-pages
- playwright
- react
- typescript
- webmcp