AutoFlow AI

Inspiration

We watched teams spend hours in meetings describing processes, then more hours in Zapier/Make clicking through drop-downs trying to translate those conversations into workflows. Meanwhile, ChatGPT and Gemini can understand complex processes in seconds--but asking them to build workflows just produces text walls nobody can execute.

The gap: AI is great at understanding intent, but terrible at producing executable structure. We thought: what if we forced AI to speak in a language it could never break--JSON--and let Angular render that into something beautiful and interactive?

We wanted to build something that makes automation accessible to non-technical people without sacrificing power.

---

What it does

AutoFlow AI is a no-code workflow automation platform powered by Google Gemini:

1. Natural Language Workflows

   • Users describe a process: "Onboard new customers: send welcome email, check payment status, assign support team, schedule onboarding call"
   • Gemini instantly generates a structured workflow with steps, conditions, integrations, and error handling

2. Visual Workflow Editor

   • Beautiful, interactive flowchart visualization
   • Drag-and-drop to reorganize steps
   • Click any step to view/edit details
   • Color-coded by action type (actions, conditions, integrations, waits)

3. Execution Simulator

   • "Run" button animates the workflow in real-time
   • Watch data flow through steps
   • See which conditions trigger which paths
   • Display execution timeline and results

4. Guaranteed Valid Output

   • Gemini is constrained to a strict JSON schema--no hallucinations
   • Every workflow is guaranteed to be executable
   • Built-in validation before rendering

---

How we built it

Tech Stack:

• Frontend: Angular 18 + TypeScript
• AI: Google Gemini API (with strict JSON schema enforcement)
• Visualization: SVG-based custom flowchart renderer + Angular CDK drag-drop
• Styling: Tailwind CSS + Angular Material
• State Management: RxJS Observables

Architecture:

1. WorkflowGeneratorComponent

   • Text input + submit button
   • Calls Gemini API with constrained schema
   • Validates output matches JSON structure
   • Passes valid workflow to diagram component

2. WorkflowDiagramComponent

   • Renders steps as draggable SVG boxes
   • Draws connections/arrows between steps
   • Color-codes by step type
   • Handles drag-and-drop reordering

3. StepDetailsPanelComponent

   • Side panel showing selected step details
   • Editable fields for manual tweaks
   • Shows variables used in that step

4. ExecutionSimulatorComponent

   • Animates through workflow steps
   • Highlights current step
   • Shows branching at conditions
   • Displays final result + timeline

Key Implementation Details:

Gemini Constraint System:

• Created strict TypeScript interfaces for all JSON outputs
• Gemini receives the full schema in system prompt
• Output validated against interfaces before rendering
• If validation fails, user sees error + retry option

Workflow Schema:

{
  name: string
  steps: [{
    id: string
    type: 'action' | 'condition' | 'integration' | 'wait'
    title: string
    action: { service, operation, parameters }
    condition: { field, operator, value }
    connections: { onSuccess, onFailure, onConditionTrue, onConditionFalse }
  }]
  variables: [{ name, type, defaultValue }]
}

---

Challenges we ran into

1. Getting Gemini to output valid JSON consistently

   • Problem: Gemini would sometimes add markdown formatting or extra text
   • Solution: Used system prompt to explicitly forbid anything except JSON, added strict validation with helpful error messages

2. Rendering complex workflows without a library

   • Problem: ngx-flow didn't fit our needs; we needed custom styling and interactions
   • Solution: Built custom SVG renderer with path routing algorithm for arrows

3. Simulating workflow execution with mock data

   • Problem: How do you mock data flowing through steps without hardcoding?
   • Solution: Created DataContext object that passes through steps, with variable substitution at each step

4. Making drag-and-drop performant with many steps

   • Problem: SVG redraws were laggy with >20 steps
   • Solution: Used CDK drag-drop with change detection optimization + requestAnimationFrame for smooth updates

5. Designing the UX to be intuitive

   • Problem: Too many options analysis paralysis
   • Solution: Kept interface minimal (input box, generate button, visual diagram, run button) and hid advanced options in detail panel

---

Accomplishments we're proud of

100% schema compliance -- Every Gemini output validates perfectly; zero hallucinations in production runs

Smooth execution simulator -- Real-time animation showing data flow, conditional branching, and timing. Genuinely impressive to watch.

Beautiful diagram rendering -- Custom SVG flowchart with auto-routing arrows, color-coding, and drag-drop that feels polished

End-to-end integration -- From text prompt to executable, visual, simulatable workflow in <5 seconds

Clean architecture -- Fully typed TypeScript, reusable components, clear separation of concerns

Real-world demo scenarios -- Pre-built examples (customer onboarding, support ticket routing, payment processing) that show actual use cases

---

What we learned

1. AI needs guardrails. Asking Gemini "generate a workflow" produces chaos. Asking it "generate ONLY this exact JSON structure" produces gold.

2. Visualization matters. Users don't understand JSON. But show them a flowchart + animation? Suddenly it clicks.

3. Constraints enable creativity. Forcing JSON output felt limiting at first, but it made everything cleaner, more predictable, and faster to render.

4. SVG is powerful. We could've used a heavy visualization library, but rolling our own gave us performance and control.

5. Schema-first design. Designing the workflow schema BEFORE building the UI meant everything else fell into place naturally.

---

What's next for AutoFlow AI

Phase 2 (Post-Hackathon):

1. Real integrations -- Connect to actual services (Slack, Gmail, Stripe, Postgres) instead of mocks
2. Workflow persistence -- Save/load workflows from database
3. Team collaboration -- Multiple users editing same workflow in real-time
4. Advanced conditions -- If/else branches, loops, parallel execution
5. Error handling UI -- Visual retry logic, fallback paths, dead-letter queues
6. Mobile app -- Companion app to monitor running workflows
7. Workflow templates library -- Community-built workflow templates
8. Audit trail -- Execution logs with full data visibility for debugging

Vision: The "Figma for workflows" -- where non-technical people can design, visualize, and execute complex automations as easily as they design documents.