CogniFlow AI

💡 Inspiration

As developers, researchers, and founders, our daily thinking is fractured across a dozen disconnected tools: brainstorms in Apple Notes, architectural sketches in whiteboard apps, quick calculation scripts in scratchpads, and execution milestones in task managers.

Constantly switching between 40 open browser tabs creates severe cognitive context-switching fatigue. Worse, traditional mind-mapping apps are completely static—they cannot run executable code, transcribe voice memos natively, or detect logical gaps in an architecture.

We asked ourselves: What if our thoughts, executable code, voice streams, and task roadmaps lived on a single 2D spatial canvas that could autonomously synthesize itself into an actionable plan? That vision became CogniFlow AI.

🚀 What It Does

CogniFlow AI is a Spatial Cognitive Thought-Mapping & Autonomous Workflow Studio that transforms fragmented notes into an interconnected, executable neural mindmap:

1. 🌌 Interactive 2D Spatial Canvas & Synaptic Curves: A free-form draggable cognitive workspace connected by dynamic, auto-orienting SVG Cubic Bezier curves with animated energy gradients.
2. 💻 In-Canvas Executable Code Sandbox: Write and execute client-side JavaScript functions with live console output and latency benchmarks directly inside thought cards in $< 1\text{ms}$.
3. 🎙️ Web Speech Voice Journaling: Native speech-to-text recording allowing users to speak their thoughts directly into voice cards without external API latency or costs.
4. 🤖 Autonomous Neural Synthesis Engine: 1-Click meta-analysis that calculates the Cognitive Synergy Score (0-100%), uncovers unlinked logical blindspots, and drafts an executive action summary with celebratory confetti.
5. 🎯 Curated Workspace Templates: Ready-to-use environments for SaaS AI Architecture, LLM Fine-Tuning Labs, and YC Startup Pitch Matrices.
6. 📦 1-Click Multi-Format Exporter: Export mindmaps to structured Markdown knowledge trees (.MD), JSON graph packages, or clean printable canvases.

🛠️ How We Built It

• Frontend & Architecture: Built with React 19, TypeScript, and Vite 6 for instant response times and strict type safety.
• Visual Design: Crafted with Tailwind CSS 3.4 utilizing a high-contrast Cyber Indigo & Neural Purple Glassmorphic Dark UI palette (#060814, #6366f1, #8b5cf6, #ec4899, #06b6d4).
• Code Execution Engine: Implemented an isolated, client-side AST JavaScript evaluator with an hijacked console proxy capturing stdout and runtime exceptions safely.
• Audio Pipeline: Integrated the native browser Web Speech API (SpeechRecognition) for streaming audio-to-text journaling.
• Spatial Mathematics: Engineered dynamic SVG Cubic Bezier trajectory math linking dynamic card anchors in real-time.
• Deployment: Zero-config edge deployment on Vercel.

⚡ Challenges We Ran Into

• Dynamic Bezier Pathing During Live Drag: Calculating real-time SVG Cubic Bezier control points while users drag multiple cards across an infinite 2D canvas required careful offset clamping and sub-pixel coordinate synchronization.
• Safe In-Browser Code Sandboxing: Safely executing arbitrary JavaScript in the browser while intercepting console.log buffers without polluting global browser runtime state.
• Cross-Platform Speech Recognition: Handling browser-prefixed Web Speech APIs gracefully with zero external server dependencies.

🏆 Accomplishments That We're Proud Of

• Creating a workspace where you can literally write and run executable code inside a mindmap alongside voice memos and task checklists.
• Building the Autonomous Neural Synthesis Engine that evaluates graph density, identifies isolated nodes as blindspots, and calculates a live synergy coefficient.
• Achieving instantaneous sub-millisecond execution and a 100% offline-capable client-side architecture.

📚 What We Learned

• How spatial canvas computing dramatically reduces cognitive load compared to traditional linear documentation.
• The power of combining multiple input modalities (text, code, voice, tasks) into a unified visual graph representation.

🔮 What's Next for CogniFlow AI

• Multiplayer Collaborative Canvases: WebRTC peer-to-peer real-time multi-cursor collaboration.
• Local On-Device LLM Integration: Embedding WebGPU / WebLLM quantized models (e.g. Qwen2.5) for fully offline autonomous multi-agent debates between nodes.
• Custom Plugin Ecosystem: Allowing developers to write custom node widgets (Python sandboxes, SQL database connectors, Figma iframe embeds).

Built With

• github
• mind-mapping
• react
• tailwindcss
• typescript
• vercel
• vite
• web-speech-api