A modern chatbot platform with intelligent conversation branching, persistent history, and beautiful graph visualization.
Features • Tech Stack • Setup • Usage
- ✨ Main Conversation: Central conversation thread with full context
- 🌳 Sub-Conversations: Select text from AI responses to create branching sub-conversations
- 🔗 Context Preservation: Sub-conversations inherit full context from parent conversations
- 💬 Tab Navigation: Browser-like tabs to navigate between conversations seamlessly
- 📊 Graph Visualization: Interactive tree-like graph view showing conversation branches (horizontal layout)
- 🤖 Model Selection: Choose from multiple LLM models via Groq Cloud API
- 🔐 Authentication: Secure user authentication via Supabase (Email/Password & Google OAuth)
- 💾 Persistent Storage: Full conversation history saved to Supabase database
- 👤 Guest Mode: Try the app without signing up
- Modern Design: Sleek, aesthetic interface with Blush Coral (#FF8F9F) and Smoked Olive (#34332D) color scheme
- Plus Jakarta Sans Typography: Beautiful, modern font throughout the platform
- Collapsible Sidebar: Smooth expand/collapse animation for better space utilization
- Double-Click Navigation: Double-click any node in graph view to instantly navigate to that conversation
- Hover Tooltips: Helpful tooltips guide users on interactive elements
- Smooth Transitions: Elegant zoom and fade animations when switching between views
- Dark Mode: Toggle between light and dark themes
- Responsive Design: Works seamlessly across different screen sizes
- ✅ Conversation History: Full conversation persistence for authenticated users
- ✅ UI Overhaul: Complete redesign with modern aesthetics and improved typography
- ✅ Graph Navigation: Double-click nodes to navigate directly to conversations
- ✅ Collapsible Sidebar: Space-efficient sidebar with smooth animations
- ✅ Enhanced Auth: Modern authentication page with Google OAuth support
- ✅ Horizontal Graph Layout: Graph expands horizontally for better visualization
- React 19.2 with TypeScript 5.9 - Modern UI framework with type safety
- Vite 7.2 - Lightning-fast build tool and dev server
- Tailwind CSS v4 - Utility-first CSS framework
- Zustand 5.0 - Lightweight state management
- React Flow 11.11 - Interactive graph visualization
- React Router DOM 7.10 - Client-side routing
- React Markdown - Markdown rendering for AI responses
- Lucide React - Beautiful icon library
- Supabase - Backend-as-a-Service for authentication and database
- Groq Cloud API - High-performance LLM inference
- PostgreSQL - Database (via Supabase)
- ESLint - Code linting
- TypeScript - Type checking
- PostCSS - CSS processing
- Node.js (v18 or higher)
- npm or yarn
- Supabase account (Sign up here)
- Groq Cloud API key (Get it here)
git clone https://github.com/Kabbya04/NodeNest.git
cd NodeNestnpm installCreate a .env file in the root directory:
VITE_SUPABASE_URL=your_supabase_project_url
VITE_SUPABASE_ANON_KEY=your_supabase_anon_key
VITE_GROQ_API_KEY=your_groq_api_key
VITE_SITE_URL=http://localhost:3000
VITE_REDIRECT_URL=http://localhost:3000- Go to your Supabase project dashboard
- Navigate to the SQL Editor
- Copy and run the contents of
supabase-schema.sql
This will create:
conversationstable for storing conversation metadatamessagestable for storing individual messages- Row Level Security (RLS) policies for data protection
- In Supabase Dashboard, go to Authentication → Providers
- Enable Google provider
- Add your OAuth credentials
- Add redirect URL:
${VITE_SITE_URL}/auth/callback
For detailed authentication flow documentation, see auth-flow.md.
npm run devOpen your browser and navigate to http://localhost:3000
- Sign Up / Sign In: Create an account or sign in with Google
- Guest Mode: Click "Continue as Guest" to try without an account
- Start Chatting: Type your message and press Enter or click Send
- Wait for the AI to respond to your message
- Select text in the AI's response that you want to explore further
- Click the "Ask AI" button that appears above the selection
- A new sub-conversation tab will open with the selected context
- Ask your follow-up question in the new conversation
- Tabs: Use the conversation tabs below the header to switch between conversations
- Graph View: Click the "Graph" button to see the conversation tree visualization
- Double-Click Navigation: Double-click any node in the graph to navigate directly to that conversation
- Sidebar: Browse all root conversations in the collapsible sidebar
- Breadcrumbs: Use the breadcrumb navigation when viewing sub-conversations
- Click the "Model" button in the top-right corner
- Select from available Groq models:
- openai/gpt-oss-120b
- openai/gpt-oss-20b
- llama-3.3-70b-versatile
- llama-3.1-8b-instant
- New Chat: Click "New Chat" in the sidebar to start a fresh conversation
- View History: All your conversations are saved and accessible in the sidebar
- Delete: Hover over a conversation in the sidebar and click the trash icon (coming soon)
node-nest/
├── src/
│ ├── components/ # React components
│ │ ├── Auth.tsx # Authentication page
│ │ ├── ChatInput.tsx # Message input component
│ │ ├── ChatWindow.tsx # Main chat interface
│ │ ├── ConversationGraph.tsx # Graph visualization
│ │ ├── ConversationTabs.tsx # Conversation tabs
│ │ ├── MessageBubble.tsx # Message display
│ │ ├── ModelSelector.tsx # Model selection
│ │ └── Sidebar.tsx # Sidebar navigation
│ ├── hooks/ # Custom React hooks
│ │ ├── useAuth.ts # Authentication hook
│ │ └── useChat.ts # Chat API hook
│ ├── lib/ # Utility libraries
│ │ ├── conversationDb.ts # Database operations
│ │ ├── supabase.ts # Supabase client
│ │ └── utils.ts # Utility functions
│ ├── store/ # Zustand stores
│ │ ├── conversationStore.ts # Conversation state
│ │ └── modelStore.ts # Model selection state
│ ├── types/ # TypeScript types
│ │ └── index.ts
│ ├── App.tsx # Main app component
│ ├── main.tsx # Entry point
│ └── index.css # Global styles
├── supabase-schema.sql # Database schema
├── auth-flow.md # Authentication documentation
└── package.json
The application supports the following models from Groq Cloud:
| Model | Context Window |
|---|---|
| openai/gpt-oss-120b | 131,072 tokens |
| openai/gpt-oss-20b | 131,072 tokens |
| llama-3.3-70b-versatile | 131,072 tokens |
| llama-3.1-8b-instant | 131,072 tokens |
npm run dev- Start Vite development servernpm run build- Build for productionnpm run preview- Preview production build locallynpm run lint- Run ESLint for code quality
npm run buildThe production build will be in the dist/ directory, ready to be deployed to any static hosting service.
- Push your code to GitHub
- Import your repository in Vercel
- Add your environment variables
- Deploy!
The project includes vercel.json for SPA routing configuration.
This is a static site and can be deployed to:
- Netlify
- GitHub Pages
- Cloudflare Pages
- Any static hosting service
Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the repository
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
- Groq for providing fast LLM inference
- Supabase for backend infrastructure
- React Flow for graph visualization
- Lucide for beautiful icons
Made using React, TypeScript, and modern web technologies
Star this repo if you find it helpful!
Kindly open up an issue and reach out to us if you find any bug or if you want to share your ideas!