AgentFlow

Inspiration

No-code tools are rigid. AI chatbots are black boxes. And agents that scrape the DOM with querySelector → click → hope break on every redesign. We asked: what if humans and agents operated the same machine — not through fragile selectors, but through typed, reliable browser tools? AgentFlow is that machine: a shared canvas where you see the workflow and the agent calls it.

What it does

AgentFlow is a visual instrument for Human × Agent automation — drag modules, wire pins, press RUN. Every action you take, an agent can take too, via WebMCP. 19 WebMCP tools via document.modelContext.registerTool() (webmcp.ts:40, engine.ts):

• 8 core: add_node, connect_nodes, execute_workflow, get_available_tools, get_node_details, update_node_config, get_workflow_status, validate_workflow
• 11 advanced: delete_node, clone_node, get_node_connections, save_workflow, load_workflow, run_node, set_node_position, get_workflow_history, create_template, export_workflow, import_workflow Real execution, not a mock: Topological sort, branch gating on true/false wires, and fail-fast error propagation. Try the 30-second wow: ?workflow=judge-demo → Start → HackerNews API → AI summarize → Condition → Split → [download + log] — watch signals travel the wires live. True co-creation: You drag a node. The agent calls add_node. Both appear instantly in the ToolLog as YOU vs AGENT — same canvas, same truth. ## How we built it
• Canvas: React + React Flow + TypeScript + Vite — 15 node types with smart grid placement (utils/grid.ts), snap-to-grid, and non-disruptive wiring
• Engine: engine.ts — DAG-based topological execution, real fetch for API nodes, AI with graceful fallback without a key, and download / webhook / console outputs
• WebMCP: webmcp.ts:40 registers all 19 tools with registerTool({ signal }) for lifecycle safety, mirrored on window.__agentflow.callTool for testing without a WebMCP browser
• Deploy: Cloudflare Pages — https://agentflow-hackathon.pages.dev (mirror netlify.app), landing at https://agentflow-landing.pages.dev/
• Auth: Zero friction — anon canvas works instantly. WorkflowManager is only gated behind user to persist to DB. No login to try. ## Challenges we overcame
• Discovery: WebMCP requires chrome://flags → WebMCP → Enabled + ChatGPT's in-app browser — we built the window.__agentflow mirror so judges can test without it
• State sync: Keeping human and agent in perfect sync without re-renders or race conditions via nodesRef/edgesRef
• Semantics: Nailing branch gating and split/merge/loop semantics so a workflow that looks right actually runs right ## What's next AgentFlow is the visual OS for the agentic web. Next: one-click templates, team workspaces with shared cursors, and a marketplace where any site can expose its own WebMCP tools and AgentFlow becomes the canvas that wires the open web together. Try now: open /tool?workflow=judge-demo → press RUN.

Built With

• cloudflare-pages
• react
• react-flow
• typescript
• vite
• webmcp