🤖 Chatbot Flow Builder

A visual drag-and-drop interface to build chatbot flows using @xyflow/react (React Flow). Users can create, connect, and configure custom nodes to design conversational experiences.

📹 Preview

---

✨ Features

• 📌 Drag and drop custom nodes onto the canvas
• 🔗 Connect nodes visually
• 📝 Edit node labels/messages
• 🗑️ Delete selected nodes/edges with Delete
• 📂 Save button for exporting or processing flows
• 🧙‍♂️ Extendable node system via a central registry
• 🧘‍🎨 Built with TailwindCSS + ShadCN UI for clean UI

---

🧪 Tech Stack

• React with TypeScript
• @xyflow/react (React Flow)
• Tailwind CSS
• ShadCN UI
• Lucide Icons
• Sonner Toasts

---

🚀 Getting Started

1. Clone the Repo

git clone https://github.com/yourusername/chatbot-flow-builder.git
cd chatbot-flow-builder

2. Install Dependencies

pnpm install
# or
npm install
# or
yarn install

3. Run Locally

pnpm dev
# or
npm run dev
# or
yarn dev

---

📂 View Folder Structure

🧱 Custom Node System

To add new nodes:

1. Edit NodeRegistry.ts

2. Provide:

   • label
   • component
   • defaultData

export const NODE_TYPES = {
  text: {
    label: "Text Message",
    component: TextNode,
    defaultData: { label: "Hi there!" }
  },
  ...
};

---

🤝 Acknowledgements

Thanks to:

• React Flow (xyflow)
• ShadCN UI
• Lucide Icons