Judge Mode deliberately breaks, diagnoses, heals and re-tests the architecture before producing a production verdict.
49 WebMCP tools let an AI agent discover and operate PromptFlow directly.

PromptFlow.ai — AI Software Architect

Describe it. Watch it architect. Build it.

PromptFlow.ai is an AI-native software architecture workspace where humans describe systems in natural language and AI agents operate the live architecture through WebMCP.

Instead of treating architecture as a static diagram, PromptFlow treats it as a living system that can be designed, analyzed, deliberately broken, diagnosed, hardened, re-tested, built, executed, and verified.

Why WebMCP?

WebMCP is the core interaction layer between the AI agent and PromptFlow.

A normal visual architecture tool requires an agent to understand the application's UI and manually figure out how to manipulate it. PromptFlow exposes structured, typed WebMCP tools so an agent can discover capabilities, reason about the user's intent, construct an architecture plan, and invoke deterministic operations directly.

PromptFlow currently exposes 49 WebMCP tools:

37 Agent OS tools
12 atomic architecture tools

For a complete product brief, the primary agent workflow is build_and_verify_system.

The calling AI agent owns open-ended semantic reasoning. PromptFlow owns validation, state mutation, deterministic architecture intelligence, project generation, browser-native execution, and verification.

Humans + Agents

The human provides the product idea and constraints.

The AI agent interprets the intent and decides which PromptFlow capabilities to use.

WebMCP carries the structured tool calls into the live application.

PromptFlow validates the agent-authored architecture plan, updates the live graph, analyzes the system, simulates failure, applies hardening, generates the project, executes it in a browser-native WebContainer, and produces a final production verdict.

This collaboration makes it possible to move from:

Natural-language intent → architecture → failure analysis → implementation → executable proof

without requiring the human to manually construct every node and connection.

The Core Verification Loop

PromptFlow's Judge Mode orchestrates:

Brief → Reason → Architect → Break → Diagnose → Heal → Re-test → Build → Execute → QA → Verdict

The system intentionally injects failure scenarios into the architecture instead of only demonstrating a successful happy path.

It then:

identifies bottlenecks and failure propagation,
diagnoses the affected architecture,
applies bounded hardening,
re-runs the same failure scenario,
generates the implementation workspace,
executes the generated project inside WebContainer,
runs Production QA,
produces a final release verdict.

The result is an architecture workflow that demonstrates not only what the system looks like, but how it behaves under failure and whether the generated project can actually execute.

Real WebContainer Execution

PromptFlow uses WebContainer as a browser-native Node.js runtime.

The generated project goes through:

Generate → Mount → Install → Test → Build → Diagnose → Heal → Re-run → Verify

The generated source is not executed directly by the host page.

The production demo successfully verifies the real execution loop, including:

mounting,
dependency installation,
testing,
building,
runtime verification.

Architecture Intelligence

PromptFlow evaluates architecture across:

Reliability
Scalability
Performance
Security
Resilience
Observability

It also provides:

deterministic architecture audits,
heuristic stress testing,
Architecture DNA,
failure simulation,
digital-twin analysis,
implementation readiness,
implementation contracts,
project blueprints,
migration planning,
architecture versioning.

These are explicitly planning and review signals, not security certifications, production load-test guarantees, or infrastructure capacity guarantees.

Production QA

The final Production QA gate checks the actual application state, including:

architecture integrity,
generated artifact safety,
WebMCP registry coverage,
browser isolation requirements,
generated project readiness,
real WebContainer execution state,
architecture checkpoint integrity.

The final demo produced:

100/100 architecture score
86 → 100 compute-failure survivability
+14 recovery
100/100 Production QA
11/11 Judge Mode stages completed
5/5 real execution steps passed

What Makes PromptFlow Different

Most architecture tools stop at visualization.

PromptFlow connects the full lifecycle:

Describe → Architect → Break → Diagnose → Heal → Re-test → Build → Execute → Verify

The architecture itself becomes an active system that can be reasoned about, challenged, repaired, and proven.

PromptFlow's central idea is:

Architecture should be a living system, not a static diagram.

Implementation

PromptFlow is built with:

React
TypeScript
React Flow
Zustand
Vite
WebMCP
WebContainer
Netlify

WebMCP tools are registered directly in the browser using the WebMCP model context API.

The application does not require a PromptFlow backend for the core architecture execution flow.

The architecture graph remains in browser state, while the WebMCP layer provides the agent-facing execution contract.

Demo

Live application:

https://promptflow-webmcp.netlify.app/

The demo video shows:

AI agent discovery of PromptFlow WebMCP tools
Agent-authored architecture planning
Live architecture generation
Judge Mode failure injection
Diagnosis and hardening
Re-test and recovery
Real WebContainer execution
Production QA
Final production verdict

WebMCP Challenge Work

PromptFlow was meaningfully extended for the WebMCP Challenge submission period.

The WebMCP-specific work includes:

WebMCP tool registration and discovery
Agent OS architecture tools
49 agent-facing WebMCP tools
structured agent-authored architecture plans
build_and_verify_system orchestration
deterministic architecture execution
WebMCP execution telemetry
Judge Mode integration
failure injection and diagnosis
architecture hardening and re-testing
project generation
browser-native WebContainer execution
Production QA
final production verdict
production WebMCP deployment configuration

The repository history documents the WebMCP implementation work added during the challenge period.

Safety & Boundaries

PromptFlow intentionally keeps semantic reasoning and deterministic execution separate.

The AI agent can reason about arbitrary product requirements, but PromptFlow validates all structured operations before applying them.

Simulation tools are non-destructive.

Generated code is executed only inside the isolated WebContainer runtime.

Architecture Intelligence, Digital Twin, and Production QA metrics are clearly presented as deterministic or heuristic planning signals rather than guarantees of real-world production performance, security, or availability.

Built With

flow
netlify
react
typescript
vite
webcontainer
webmcp
zustand

Submitted to

The WebMCP Challenge

Created by

I independently designed and built PromptFlow.ai as an AI-native software architecture workspace, and I was responsible for the product concept, architecture, frontend implementation, WebMCP integration, deterministic architecture engine, verification workflow, browser-native execution, production hardening, and deployment.

I created the application around a clear separation between AI reasoning and deterministic software execution. The AI agent understands the user's natural-language requirements and uses WebMCP to operate PromptFlow, while PromptFlow validates structured tool input, manages the architecture state, applies deterministic transformations, analyzes the architecture, and visualizes the result on the live canvas.

For the WebMCP Challenge, I extended the existing project with a dedicated Agent OS layer containing 49 WebMCP tools: 37 high-level Agent OS tools and 12 atomic architecture tools. I implemented the WebMCP registry, typed tool contracts, agent-facing architecture operations, structured agent-authored architecture plans, and the build_and_verify_system orchestration workflow.

I also built the architecture intelligence and verification layers, including deterministic architecture audits, reliability/scalability/performance/security/resilience/observability analysis, stress testing, Architecture DNA, Digital Twin failure and load simulation, architecture hardening, implementation planning, project generation, and architecture versioning.

A major part of my contribution was turning the architecture graph into a verifiable engineering workflow. I created Judge Mode to orchestrate:

Brief → Reason → Architect → Break → Diagnose → Heal → Re-test → Build → Execute → QA → Verdict.

The system deliberately introduces failure scenarios, analyzes their propagation, applies bounded hardening, and measures the recovery. I then connected the generated project to a browser-native WebContainer execution loop so the generated Node/React project can be mounted, installed, tested, built, and runtime-verified inside the browser rather than being executed directly by the host page.

I implemented the production QA layer and the final release verdict, including checks for architecture integrity, generated artifacts, WebMCP coverage, browser isolation requirements, execution state, and architecture checkpoints.

I also handled the production deployment work required to make WebMCP and WebContainer operate correctly on Netlify, including the required cross-origin isolation configuration and production execution compatibility.

Finally, I tested the complete system through Chrome's WebMCP Model Context Tool Inspector with Gemini as the calling AI agent and verified the production deployment end-to-end.

The resulting system demonstrates the complete path from human intent to AI-agent interaction, live architecture, failure recovery, generated implementation, real browser-native execution, and production verification.

Hikmat Turayev
Dilovar

Updates

Hikmat Turayev started this project — Sep 03, 2026 04:09 PM EDT

Leave feedback in the comments!

Log in or sign up for Devpost to join the conversation.