STAFF PRODUCT DESIGN & AI DESIGN ENGINEERING

Enterprise SaaS: GraphQL & Agentic Workflow Studio

Designed for Enterprise API Engineers, Platform Architects, and Product Teams who need real-time governance, visual observability, and safe execution boundaries when exposing complex GraphQL schemas to autonomous, non-deterministic AI agents.

Try Live Sandbox
React Flow Dynamic Canvas
React Flow Canvas & Custom Node Relationship Engine React Flow Canvas
Human-in-the-Loop Intercept Modal
Human-in-the-Loop Governance & Intercept Modal UX Governance Engine
Active Agent Execution Path
Active Path Visualizer & Live AI Contract Inspector Active Execution
Monaco Schema Inspection Drawer
Client-Side SDL Parser & Integrated Monaco Sandbox Monaco Sandbox
Table of Contents

1. Executive Overview & Scope

Role, core UI engineering stack, and architectural ownership

As enterprise GraphQL APIs transition to support autonomous AI agents acting on behalf of users, a new design challenge emerges: how to give engineers and operators real-time visual control and governance over agentic graph traversals. I designed and engineered a production-grade prototype sandbox that visualizes non-deterministic AI agent execution against enterprise GraphQL schemas.

My Role & Approach
Lead Enterprise Product Designer & AI Design Engineer
Self-directed problem identification, AI-assisted architecture mapping, visual design system, and Next.js front-end implementation.
UI Engineering & AI Tooling Stack
  • Next.js (App Router), React 18, & TypeScript
  • React Flow (Custom Node & Edge Rendering Engine)
  • Monaco Editor & Client-Side GraphQL AST Parser
  • AI Acceleration: Gemini (Architecture & Logic Synthesis) & Cursor (IDE & Implementation)
Strategic Design Scope
  • Dynamic graph canvas for mapping agent prompt intent into executable GraphQL operation paths.
  • Human-in-the-Loop (HITL) safety patterns for real-time mutation authorization and audit trails.
  • Live behavioral contract inspector (JSON/YAML policy guardrails and schema validation).

2. Strategic Opportunity & Paradigm Shift

Designing for the Next API Consumer: Autonomous AI Agents

What consumes an API is fundamentally shifting. Increasingly, it is not a human clicking a UI component, but an AI agent traversing a graph to execute complex workflows. Without visual governance tools, developers cannot verify what schema branches an agent can reach or inspect real-time tool calls before dangerous mutations hit production databases.

3. AI-Driven Design Process & Build Methodology

From strategic framing to live code via Gemini and Cursor

Inspired by Apollo GraphQL's vision of powering agentic graph experiences, I moved directly from problem articulation into code using advanced AI tooling. Rather than waiting for static requirements, I leveraged Gemini to synthesize complex backend schemas into intuitive UX patterns and Cursor to pair-engineer a fully functional prototype sandbox.

Phase 01 • Strategic Problem Framing

Apollo Vision & Opportunity

Analyzed how GraphQL schemas serve as ideal context graphs for AI agents, identifying the core UX leverage point: visual observability and HITL governance for agent traversals.

Phase 02 • Conceptual AI Synthesis

Gemini System Architecture

Used Gemini to model interaction flows, design behavioral contract JSON schemas, and structure the state machine for multi-branch GraphQL node path execution.

Phase 03 • AI Design Engineering

Cursor Code Implementation

Paired with Cursor to write modular Next.js components, integrate React Flow custom edges, embed Monaco Editor, and build high-fidelity interactive sandboxes directly in code.

4. UI Engineering & Technical Execution

Building high-fidelity interactive systems with Next.js, React Flow, and Monaco

4.1 Custom React Flow Node Engine & Dynamic Path Highlighting

I extended React Flow with custom node renderers tailored to GraphQL entity relationships. When an agent processes a user prompt, the canvas dynamically highlights active execution paths with CSS glows while dimming unselected schema branches.

React Flow Dynamic Canvas
React Flow Node Architecture • Real-Time Dynamic Edge Glows UI Engineering

4.2 AI Behavioral Contract Inspector & JSON Guardrail Engine

I engineered an inspector drawer that displays live behavioral contracts alongside execution paths. This allows developers to inspect policy boundaries—such as max step depth, execution timeouts, and scope limits—in real-time.

Active Agent Execution Path & Contract Inspector
Contract Inspector • Live Policy JSON Inspection Drawer Policy UX

4.3 Human-in-the-Loop Intercept Modal & Audit Signature Workflow

To address developer trust and security, I designed and implemented an intercept modal. When an agent attempts high-risk GraphQL mutations, execution halts, enabling operators to inspect parameters, modify inputs, or authorize actions with audit signatures.

Human-in-the-Loop Intercept Modal
HITL Engine • Intercept Modal with Manual Sign-off & Audit Logs Governance UX

4.4 Client-Side GraphQL SDL Parser & Monaco Editor Integration

I integrated Monaco Editor into the studio alongside a client-side SDL parser. Engineers can paste raw GraphQL schema definitions to auto-generate node graphs instantly for sandbox testing.

Monaco Schema Inspection Drawer
Monaco Editor Integration • Live GraphQL SDL Syntax Highlighting Front-End Engineering

5. Key Outcomes & Design Leverage

Proving value through proactive execution and code-level design craft

By taking full ownership from problem identification through Next.js prototype delivery, this project demonstrates how design engineering accelerates product discovery for emerging AI surfaces.

  • Proactive Problem Ownership: Transformed an ambiguous problem space (governing agentic API calls) into a tangible visual interaction model without needing upstream product specs.
  • AI Tooling Acceleration: Demonstrated how combining Gemini (for logic synthesis) and Cursor (for code implementation) compresses weeks of exploration into functional design prototypes.
  • Developer Experience Standards: Established repeatable, reusable UI components for Human-in-the-Loop governance and schema node visualizers.