Collaborative AI Integrated Chat Web App

A full-stack collaboration platform that combines real-time team chat with AI-assisted problem solving. The stack is optimized for rapid iteration using WebContainers while still offering Docker-based deployment for local or cloud environments.

Tech Stack

• Backend: Node.js, Express, MongoDB (Mongoose), Socket.IO, Gemini API integration
• Frontend: React (Vite), TailwindCSS, Zustand, Socket.IO Client
• Tooling: WebContainer-friendly workspace (StackBlitz), Docker & Docker Compose for containerized deployments

Getting Started

1. Clone & Install

npm install
npm run install:all

2. Configure Environment Variables

Copy the example environment files and fill in real values.

cp backend/.env.example backend/.env
cp frontend/.env.example frontend/.env

Gemini API: Generate an API key from Google AI Studio and place it in backend/.env as GEMINI_API_KEY.

3. Run in WebContainer (StackBlitz)

This repo ships with stackblitz.config.json and a root package.json tailored for WebContainers.

1. Open the project in StackBlitz (or another WebContainer host).
2. The service auto-installs dependencies and runs npm run dev, launching both backend (:5000) and frontend (:5173).
3. Exposed ports are declared in stackblitz.config.json for easy access.

4. Run Locally

npm run dev

• Backend: http://localhost:5000
• Frontend: http://localhost:5173

5. Docker (Optional)

Docker support is provided for environments where it is available.

cp backend/.env.example backend/.env
cp frontend/.env.example frontend/.env
docker-compose up --build

6. MongoDB

The backend expects a MongoDB connection string (MONGO_URI). You can use MongoDB Atlas (recommended) or a local MongoDB instance.

Key Features

• Real-time chat rooms (group & direct)
• AI assistance triggered via @ai <question> prefix
• Inline code mode with sandboxed execution (iframe-based runner)
• Organization & team scaffolding with role-based checks
• Socket.IO for presence updates and real-time message fan-out

Project Structure

backend/
  src/
    config/      # env + database helpers
    controllers/ # route handlers (auth, org, chat)
    middleware/  # auth guards, error handling
    models/      # User, Organization, Team, ChatRoom, Message
    routes/      # Express routers
    services/    # Gemini AI bridge
    sockets/     # Socket.IO bindings (typing indicators, room joins)
frontend/
  src/
    components/  # Chat UI widgets, auth forms, layout
    pages/       # Auth + Chat pages
    store/       # Zustand stores (auth + chat)
    lib/         # Axios client

Scripts

Command	Description
npm run dev	Start backend & frontend together
npm run dev:backend	Start only the backend
npm run dev:frontend	Start only the frontend
npm run install:all	Install workspace dependencies

Testing & Linting

• Lint placeholders exist (npm run lint). Add ESLint/Prettier rules as needed.

Useful Tips

• Messages beginning with @ai call Gemini for contextual suggestions.
• Toggle the composer into code mode to share snippets and run them instantly in the sandbox.
• TailwindCSS + design tokens (brand palette) yield a modern dark UI out of the box.

Next Steps

• Implement email invitations for organizations.
• Add presence indicators (online/offline) via Socket.IO rooms.
• Extend AI prompts with system-level guidance for richer answers.

Happy building! ✨