Workflow-Canvas

Seen on the streets of twitter, an amazing hackathon project built by RasMicky, I decided to try similar and after a night-without-sleep, voila...this one's still very simple and lacks depth.

Workflow-Canvas is a visual tool for generating, editing, and managing workflows with an intuitive drag-and-drop interface. Built with Next.js, React Flow, Notion API, and AWS Bedrook, it allows you to create process flows easily and efficiently.

Also has an agent for automated streamlining(funny stuff too, only that part works for now). After all, this was a quick mockup so it uses localStorage to persist the states of the canvas.

Features(soon)

• Visual workflow builder with drag-and-drop support
• Customizable nodes and connections
• Real-time editing and preview
• Streamlined Agent
• Modern UI powered by Next.js and Geist

Demo

workflow-canvas.mp4

Getting Started

To run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Create a .env.local file in the project root and add your Notion API credentials:

NOTION_API_TOKEN=your_notion_api_token
NOTION_PARENT_PAGE_ID=your_notion_parent_page_id

Then open http://localhost:3000 in your browser.