Stack Blueprint

Inspiration

AI coding agents are good at naming a familiar framework, database, and host. That answer is rarely enough to make them excellent at building with those choices. A React Native project may need Expo-specific skills, device automation, React diagnostics, and a native-quality design pass. A Supabase project benefits from its MCP and explicit database and RLS guidance. Builders should not have to know this entire ecosystem before they begin.

We built Stack Blueprint to answer the harder question: “How do I fully equip my agent to execute this stack well?”

What it does

Describe any software idea in ordinary language. Stack Blueprint infers the project shape, stage, and priorities; selects a focused product stack; applies curated technology-to-tool mappings; verifies matching workspace picks against VibeLeaderboard's maintained public index; and converts relevant engineering Intel into project-specific instructions.

The result draws itself as an architectural blueprint. The equipped AI workspace appears first, grouped into harness and model, connected MCPs, diagnostics and QA, project skills, and an execution playbook. The application and delivery layers follow. Click any logo to see its role, why it was chosen, and its official source. The overview stays deliberately simple, while the browser agent can inspect, refine, and render the same structured plan through WebMCP.

Why WebMCP

This is shared work, not a static recommendation. The user needs a visible plan they can understand and question; the agent needs structured tools it can call, inspect, and revise. WebMCP lets one project description trigger the real product workflow, update visible page state, and return the same evidence-backed blueprint to the agent.

The page registers seven tools: build, inspect, apply a constraint, refine, survey, consult, and render. Together, a person and agent can create and improve one inspectable execution system instead of passing disconnected lists between a chat and a website. An agent can explain why Expo was selected, open that same explanation for the person, then apply an offline-first requirement and visibly record which choices stayed or changed.

How we built it

Stack Blueprint is an open-source Next.js and TypeScript application hosted on Vercel. Its client registers tools with document.modelContext.registerTool(...); tool calls update the same React state as the manual interface. A bounded same-origin API proxy calls only VibeLeaderboard's public, read-only catalog and Intel tools. No private source code, credentials, transcripts, or article bodies are shipped.

Recommendations are conditional. Selecting Expo activates Expo MCP, exact Expo project/design/router skills, React and Expo diagnostics, and device automation. Selecting Supabase activates Supabase MCP and database guidance. Live catalog matches are marked as verified; curated fallbacks remain linked to their official sources. Prototype briefs intentionally defer production-only services. Intel results are filtered to the project's risks and rewritten as imperative build instructions rather than displayed as a generic reading feed.

Challenges

The hardest problem was resisting a template-driven stack picker. Similar apps do not prove that their choices were correct, and a dense alternatives grid made the result harder to use. We removed automatic product matching and focused the consultation on the more defensible value: a maintained, stack-specific AI workspace.

We also had to make external evidence useful without making it authoritative. Catalog and Intel results are bounded, sanitized, cited, and treated as untrusted inputs. The initial blueprint remains a first draft that the calling agent can refine only with a complete replacement plan and explicit reasoning.

What we learned

The framework decision is often the easy part. Execution quality improves when a stack selection automatically brings along its official MCPs, exact implementation skills, deterministic diagnostics, and proof requirements. WebMCP is especially useful when the browser experience and the agent's structured state are the same object instead of two approximations.

What's next

Next we want to expand the maintained tool mappings, add repeatable browser evals for more project types, and let teams export the final blueprint directly into repository instructions and agent workspace configuration.

Built With

• ai-agents
• next.js
• react
• typescript
• vercel
• webmcp