P.S.: I used my Gemini API key and for google(Gmail + Sheet) integration for automation, I used my gmail OAuth 2.0 Playground y29 accesstoken, as this app is currently not verified on OAuth, hence i would have to add every email in test email. So, the flow is for integrations of goole products, put the latest y29 accesstoken, as it also gets expired every 1 hour so you have to refresh it.
P.S.: This does not affect Google login on main page for current user, as that is powered by Supabase's Google OAuth Sign-in Provider. That segment works seamlessly, saving user data.
The core assignment was to build a purpose-built chatbot. However, a modern chatbot should be more than a conversation wrapper—it should be an Actionable Agent.
I evolved the prompt into Thinkly, an AI Workflow Copilot. Instead of just answering questions, Thinkly:
- Translates conversational intent into structured logic.
- Architects a full Directed Acyclic Graph (DAG) of multi-step automation.
- Refines the workflow interactively through a dedicated System Design Chatbot.
My goal was to find a problem that "clicked." I didn't settle on the first idea.
- Iteration Loop: I used ChatGPT to brainstorm 5 different personas (e.g., a "Stoic Philosophy Bot," a "Medical Billing Assistant," a "Sales Lead Guru", a Cinematography Expert).
- The "Finalist": I chose Sales Lead Management because it perfectly bridges the gap between unstructured data (unorganized emails) and structured business value (Google Sheets / CRM).
- Thinkly Labs Alignment: I researched Thinkly Labs' own product focus. By building a tool that "blueprints" systems, I am demonstrating a direct understanding of agentic orchestration—the core of Thinkly Labs' DNA.
"Frontend Thinking" isn't just about colors; it's about reducing the user's cognitive load during complex AI interactions.
Built with React, GSAP, and Framer Motion, this design language focuses on "Active Feedback":
- Non-Static Surfaces: Using blurred overlays and dynamic gradients inspired by modern macOS design.
- Micro-Animations: Every node generation in the graph is accompanied by "Trace Animations," visually confirming that the AI is linking data correctly.
- Empty State UX: Instead of "No workflows found," I designed an onboarding-focused empty state that guides the user to their first generation, complete with "Magic Suggestion" tiles.
While Thinkly generates full workflows, the Chat Interface remains a core pillar of the experience—fulfilling the original assignment's chatbot requirement in a highly specialized way.
The Refinement Chatbot is a purpose-built assistant for Workflow Engineering:
- Context-Aware Modification: After the initial generation, you can chat with the workflow. Ask: "Can you add a Slack notification if the lead score is > 80?" or "Change the Gmail trigger to look for 'Urgent' in the subject line."
- Delta Patching: The bot doesn't just rewrite everything; it intelligently patches the existing node tree, maintaining state while evolving the logic.
- Conversational Reasoning: If a requested change is unfeasible (e.g., a tool that isn't connected), the bot will explain why and suggest an alternative architectural approach.
Thinkly doesn't just use one model; it uses a Strategic AI Factory (lib/ai/prompts/factory.ts) to steer different architectural personas based on the user's priority.
- Target: High-speed, intuitive workflow generation.
- Strength: Rapid DAG creation and creative processing.
- Defaults: Used as the primary engine for initial hero-input generation.
- Target: 100% Structural Precision & Industrial Hardening.
- Strength: Specialized in surgical JSON accuracy, following strict "Industrial Framework" rules (SLAs, monitors, error-paths).
- Strategy: Leverages a highly-hardened system prompt to ensure zero-tolerance architectural depth.
True production workflows require more than a happy-path. Thinkly's engine now enforces an Industrial Framework for every blueprint:
- Mandatory Node Triad: Every manual step is automatically modeled as a self-healing triad:
[Action: Wait] -> [Parallel SLA Alert] -> [Monitor: Audit Log]. - Fault-Tolerant Retries: Every REST API operation is backed by a dedicated
Retry Logicnode with exponential backoff modeling. - Enterprise Tool Inference: The system automatically infers best-in-class SaaS tools (Salesforce, SendGrid, Datadog) based on the workflow's functional intent.
![Model Selection UI Placeholder - Hero Input Toggle] ![Model Selection UI Placeholder - Chat Refinement Toggle]
LLMs occasionally hallucinate conversational chatter along with their JSON. In lib/ai/responseParser.ts, I built a Structural, Depth-Tracking Crawler (extractBalancedJSON):
- Heuristic JSON Discovery: Instead of fragile regex, the system uses a stack-based brace-balancing algorithm to isolate valid JSON blocks from model preambles.
- Collision-Proof Extracting: It effectively filters out "Ghost Braces" and conversational chatter, ensuring 100% stability even when models deviate from instructions.
- Payload Escaping Discipline: Formally enforces backslash-escaping for nested JSON strings inside
payloadfields, eliminating the most common cause of parsing crashes.
To make the AI feel "intelligent," the system must compensate for human error.
- The Problem: A user might prompt "Summary this email" but forget to link the actual email data variable.
- The Logic: I built a detector that checks if the AI prompt is "data-starved." If it is, the system automatically injects the appropriate Gmail/Context payload into the prompt, ensuring the AI always has the context it needs to succeed.
True automation isn't 100% autonomous—it requires trust. Every Thinkly blueprint is designed with Human Review nodes.
- Example: In a lead-qualifying workflow, the AI summarizes the lead but pauses the execution for a manual "Approval" before sending a high-stakes response.
To ensure a Zero-Friction onboarding experience, Thinkly implements a hybrid storage architecture:
- LocalStorage (Guest Mode): Unauthenticated users can immediately start generating and interacting with workflows. Data is persisted in
window.localStorage, allowing for instant utility without a mandatory sign-up barrier. - Supabase Cloud Sync: Once a user authenticates via Google OAuth, the system transparently synchronizes their local state to a permanent Supabase PostgreSQL instance.
- Architectural Choice: By using a "Local-First" approach, we maximize initial engagement while leveraging Supabase's Row-Level Security (RLS) and relational power for long-term user data integrity.
To manage API costs and prevent background "rate-limit runaway," Thinkly currently uses Tab-Visibility Polling. Triggers are active only when the user is viewing the dashboard.
For a true production environment, I propose a transition to a Headless Worker Architecture:
- Queue Layer (BullMQ + Redis): Triggers (Webhooks, Cron) are pushed to a Redis-backed queue.
- Execution Workers: Standalone Node.js workers consume the queue and execute the
runner.tslogic 24/7. - Socket.io Streaming: Live execution logs would be streamed back to the UI in real-time, regardless of the user's tab state.
I utilized Antigravity and Google Stitch as my high-speed engineering partners.
- Prompting Mastery (Role-Based & Negative Steering):
- In-App Logic: I architected the
promptBuilder.tsto enforce a "Senior Workflow Architect" persona on Gemini, using Negative Prompting to strictly forbid generic, non-agentic patterns (e.g., "NEVER use polling—always use event-driven triggers"). Well defined response format expectaions were provided in prompts like required response should be in a very specific strict JSON format. - Development Strategy: When directing Antigravity, I didn't just ask for features; I provided Rich Architectural Context and used Role Explanation to ensure the code followed production-grade principles. By using specific exclusion rules, I steered the AI away from "lazy" solutions and towards the sophisticated JSON-patching and vault-encryption models we adopted. Manual Refinement & Edge-Case Hardening:
- While AI generated initial structures, I conducted Rigorous Manual Testing on the local dev server. This phase was essential for identifying and fixing subtle edge cases that static AI analysis often misses—such as the specialized regex for handling Gemini's JSON hallucinations and refining the OAuth token refresh lifecycle.
- Majority of code was personally reviewed and refactored to maintain absolute architectural purity and system reliability.
- In-App Logic: I architected the
- Industrial Hardening & Zero-Tolerance Parsing:
- I migrated the parsing logic from static regex to a Structural Deep Crawler to handle conversational drift in smaller models like Gemma.
- I architected the Mandatory Node Triad pattern to ensure that the AI-generated "designs" are not just beautiful, but production-ready with proper monitoring and escalation paths.
- Vercel Deployment: Thinkly
- Walkthrough Video: Loom Recording
- Contact: letshashankknow@gmail.com
Thinkly - Built with precision, engineered for action.