Inspiration
Managing complex prompt chains and multi-step AI instructions in flat text files gets messy quickly. We wanted to build a visual, intuitive workspace where prompt engineers and developers can map out workflows like flowcharts and test Gemini models dynamically.
What it does
PromptCanvas AI is a visual, node-based workspace powered by Google Gemini. It allows users to create, resize, and connect prompt nodes, manage multiple isolated project workspaces, and use an integrated chat assistant to brainstorm, generate, and inject prompts straight onto the canvas with a single click.
How we built it
We built the application using Next.js for a robust structure, React Flow for the interactive flowchart canvas, and Tailwind CSS for a sleek dark-themed UI. It integrates directly with the Google Gemini API, featuring multi-model fallback logic and local storage persistence.
Challenges we ran into
Synchronizing state across multiple dynamic nodes while handling real-time chat injections and keeping local storage persistence smooth was tricky. We also had to implement resilient error handling and model fallback logic to ensure reliable Gemini API responses.
Accomplishments that we're proud of
Successfully building a seamless bridge between a conversational chat interface and a spatial flowchart canvas—letting users instantly push AI-generated responses into active nodes or spawn brand-new connected nodes effortlessly.
What we learned
We gained deep insights into structuring state management for graph-based node applications, handling custom React Flow custom nodes with resizing features, and structuring clean frontend-AI integrations.
What's next for PromptCanvas AI
Adding automated execution pipelines where data flows sequentially from node to node, user authentication for cloud saving, and community template sharing.
Log in or sign up for Devpost to join the conversation.