By: Ashish Kumar Singh
A full-stack, real-time, and secure AI chatbot application built from scratch with modern web development practices. This project is a professional implementation of an intelligent conversational AI system with a GraphQL-native architecture.
AutoAI is a sophisticated, real-time AI assistant application designed for intelligent conversations. Built on a modern, serverless, GraphQL-native architecture, it features:
- A polished, responsive user interface
- Advanced conversational features with chat history management
- Real-time messaging capabilities
- Markdown rendering with syntax highlighting
- Edit and regenerate response functionality
- Secure, privacy-focused data handling
The application prioritizes security, GraphQL-only API communication, and clean separation of concerns between frontend and secure backend automation.
- ✅ Secure Authentication - Email/password authentication with secure session management
- ✅ Data Privacy - Row-Level Security (RLS) ensures users only access their own data
- ✅ Real-time Messaging - Live chat experience powered by GraphQL Subscriptions
- ✅ Intelligent AI Assistant - Conversational memory with advanced prompt engineering
- ✅ Rich Text Formatting - Full Markdown support with styled code blocks and copy functionality
- ✅ Advanced Chat Management
- Edit and rename chat titles
- Delete chats with confirmation
- Edit messages and regenerate AI responses
- ✅ Polished User Interface
- Clean, modern design inspired by leading AI applications
- Fully responsive (desktop & mobile)
- Collapsible sidebar navigation
- Light and dark mode support
- Smooth animations with Framer Motion
| Category | Technology |
|---|---|
| Frontend | React 18, Vite, Tailwind CSS, Framer Motion |
| State Management | Apollo Client, React Hooks |
| Authentication | Nhost Auth |
| Database | PostgreSQL (via Nhost) |
| API | Hasura GraphQL (with real-time subscriptions) |
| Backend Service | n8n (secure webhook middleware) |
| AI Integration | OpenRouter API (Google Gemma / Mistral 7B) |
| 3D Graphics | Three.js, React Three Fiber |
| UI Components | Headless UI, Lucide Icons |
| Notifications | React Hot Toast |
| Code Highlighting | React Syntax Highlighter |
| Deployment | Netlify |
The application follows a secure, decoupled architecture with clear separation of concerns:
┌─────────────┐ ┌──────────────┐ ┌──────────────┐
│ Frontend │ ◄────► │ Hasura/Nhost │ ◄────► │ n8n (AI) │
│ (React) │ GraphQL │ (GraphQL) │ Webhook │ Middleware │
└─────────────┘ └──────────────┘ └──────────────┘
│
▼
┌──────────────┐
│ PostgreSQL │
│ Database │
└──────────────┘
- Frontend (React) - User interface with all GraphQL communication
- API Layer (Hasura/Nhost) - Real-time GraphQL API over PostgreSQL
- Secure Middleware (n8n) - Backend automation handling AI calls and business logic
- Data Storage - PostgreSQL with RLS policies for data isolation
- Node.js (v16 or higher)
- npm or yarn
- Nhost account for backend services
- OpenRouter API key (for AI integration)
-
Clone and install:
npm install
-
Set up Nhost backend:
- Create a new project on Nhost
- Create
chatsandmessagestables in PostgreSQL - Configure authentication and Row-Level Security policies
- Set up Hasura Actions for AI integration
- Configure n8n workflow for secure AI calls
-
Configure environment variables:
Create a
.env.localfile in the project root:VITE_NHOST_SUBDOMAIN=your-nhost-subdomain VITE_NHOST_REGION=your-nhost-region
-
Start development server:
npm run dev
The application will be available at
http://localhost:5173
npm run build
npm run previewsrc/
├── components/ # React components
│ ├── AnimatedSphere.jsx # 3D animated sphere
│ ├── AuthLayout.jsx # Auth page wrapper
│ ├── Avatar.jsx # User avatar component
│ ├── ChatList.jsx # Chat history sidebar
│ ├── ConfirmationModal.jsx # Confirmation dialog
│ ├── MessageView.jsx # Message display
│ └── ProtectedRoute.jsx # Route protection
├── pages/ # Page components
│ ├── Dashboard.jsx # Main chat interface
│ ├── SignIn.jsx # Login page
│ └── SignUp.jsx # Registration page
├── graphql/ # GraphQL operations
│ ├── mutations.js # GraphQL mutations
│ ├── queries.js # GraphQL queries
│ └── subscriptions.js # Real-time subscriptions
├── lib/ # Utilities
│ └── nhost.js # Nhost client configuration
├── App.jsx # Root component
├── main.jsx # Entry point
└── index.css # Global styles
The current version provides a solid foundation. Planned improvements include:
- File and Image Uploads - Integrate Nhost Storage for document/image uploads with multi-modal AI analysis
- Global Chat Search - Full-text search across conversation history
- Enhanced AI Features - Specialized tools for financial analysis, spending pattern recognition, and automated savings advice
- Advanced Analytics - User engagement tracking and chat statistics
- API Integrations - Connect external services for expanded capabilities
This project is open for enhancements and improvements. Contributions and ideas are welcome to extend its capabilities further.
This project is created and maintained by Ashish Kumar Singh.
For questions or issues, please refer to the original project repository or the Nhost documentation at nhost.io.
Happy coding!