TopFlow
LearnBuildSecurity
DocsLearnIntroduction

Introduction to TopFlow

TopFlow is a visual workflow builder for creating AI-powered applications with security and privacy baked in from day one. Built by a former CISO to demonstrate how to build AI systems the right way.

TopFlow is both a functional tool and a showcase project demonstrating security-first AI architecture patterns. Every design decision prioritizes security, privacy, and compliance.
What is TopFlow?
Overview
A security-focused visual workflow builder for AI applications

TopFlow is a security-focused visual workflow builder that lets you create AI-powered applications using a node-based interface. Think of it as a canvas where you drag and drop components (nodes) to build complex AI workflows without writing code.

Visual Builder

Drag and drop nodes to create workflows. Connect AI models, API calls, data transformations, and logic—all visually.

Security-First

Real-time security validation with 12 security checks. SSRF prevention, rate limiting, and privacy-preserving architecture built in.

Privacy-First

All data stored in your browser only. No backend database. Your API keys and workflows never leave your machine.

Code Export

Export your workflows as production-ready TypeScript code. No vendor lock-in. You own the code.

Unlike traditional no-code tools, TopFlow is built specifically for secure AI orchestration. Every feature prioritizes security, compliance, and privacy.
Why TopFlow?
Security-First
Security is the foundation, not an afterthought

Most AI workflow tools focus on ease of use but ignore security. TopFlow flips this—security is the foundation, not an afterthought. Here's why it exists:

The Problem with Traditional AI Tools

  • No security validation: Accidentally create SSRF vulnerabilities, expose PII, or introduce prompt injection risks
  • Vendor lock-in: Workflows trapped in proprietary platforms with no export options
  • Privacy concerns: API keys, workflows, and data stored on someone else's servers
  • Compliance gaps: No built-in GDPR, SOC 2, or HIPAA considerations

The TopFlow Approach

  • Real-time security validation: 12 security checks run automatically as you build, catching issues before execution
  • Client-side everything: Data never leaves your browser. No backend database = no data breach risk
  • BYOK (Bring Your Own Key): Use your own API keys for OpenAI, Anthropic, Google, Groq. Keys stored locally only
  • Code export: Generate production TypeScript from any workflow. Own your code, no platform dependency
  • Compliance-conscious: Built-in examples for GDPR, SOC 2, HIPAA workflows
Learn about security architecture
Key Features
Capabilities
Everything you need to build secure AI workflows

Security Features

  • •SSRF Prevention
  • •Rate Limiting
  • •Input Sanitization
  • •Cycle Detection
  • •Validation Scoring

AI Integration

  • •Multi-Provider Support
  • •Image Generation
  • •Text Embeddings
  • •Structured Output
  • •Tool Calling

Developer Experience

  • •Visual Editor
  • •Live Execution
  • •Code Export
  • •Template Library
  • •Undo/Redo & Auto-Save
12 Security Validations
SSRF prevention, cycle detection, API key validation, and more
12 Node Types
AI models, data transformations, HTTP requests, and control flow
How It Works
Quick Guide
From visual builder to production code in 4 steps
1

Build Visually

Drag nodes from the palette onto the canvas. Each node represents an action:

  • • Entry/Exit Nodes: Start and End markers
  • • AI Nodes: Text generation, embeddings, image creation
  • • Data Nodes: HTTP requests, structured outputs
  • • Logic Nodes: Conditionals, JavaScript execution
  • • Tools: Custom function definitions
2

Connect & Configure

Connect nodes by dragging from output handles to input handles. Data flows left-to-right through your workflow. Configure each node's settings (API key provider, model, temperature, prompts, etc.) in the right panel.

3

Validate

Click "Validate" to run 12 security checks. You get a score (A-F grade) and detailed error/warning messages:

  • • Structural checks (cycles, orphans, missing start/end)
  • • Security checks (SSRF, private IPs, cloud metadata endpoints)
  • • Configuration checks (missing API keys, invalid models, empty prompts)
4

Execute or Export

Execute: Click "Run" to execute your workflow in real-time. Watch nodes turn green as they complete. Results stream to the execution panel.

Export: Click "Export Code" to generate production-ready TypeScript:

  • • Next.js API Route (server-side execution)
  • • React Component (client-side execution)
  • • Standalone Function (pure TypeScript)
Try the Quick Start Guide
Who It's For
Audience
Built for security professionals, AI engineers, and privacy advocates

Security Professionals

CISOs, Security Engineers, Compliance Officers: TopFlow demonstrates how to build AI systems with security baked in. Use it as a reference architecture for your organization's AI initiatives.

AI Engineers

Developers Building Secure AI Apps: Prototype workflows visually, then export to TypeScript. Learn security patterns and compliance requirements while building.

Privacy Advocates

Anyone Concerned About Data Privacy: TopFlow's client-side architecture means your data never leaves your browser. True privacy-first design, not marketing speak.

Technical Hiring Managers

Evaluating Architecture Skills: TopFlow is a showcase project demonstrating security-first architecture, privacy-preserving design, and compliance-conscious engineering.

Ready to get started?
Choose your learning path based on your experience and goals.
Quick Start Guide
Build your first workflow in 5 minutes
Core Concepts
Understand workflows, nodes, and validation
Security & Compliance
Learn about 12 security validations
Step-by-Step Tutorials
Learn through hands-on examples
Complete Node Reference
Explore all 12 node types in detail
FAQ
Common questions and answers