A web-based AI assistant providing general information about Canadian law, built with React and Python Flask.

• 💬 Chat interface with AI-powered responses
• 📱 Mobile-responsive design (works on web, Android, iOS browsers)
• 🎨 Dark theme UI matching the screenshot design
• 🤖 Powered by Google Gemini Flash 1.5 (free tier)
• ⚡ Real-time chat with loading states

canlawai/
├── backend/           # Python Flask API
│   ├── app.py        # Main Flask application
│   ├── requirements.txt
│   └── .env          # API keys configuration
├── frontend/         # React application
│   ├── public/
│   ├── src/
│   │   ├── App.js    # Main React component
│   │   ├── App.css   # Styling
│   │   ├── index.js
│   │   └── index.css
│   └── package.json
└── README.md

• Python 3.8 or higher
• Node.js 14 or higher
• npm or yarn

1. Navigate to the backend directory:

cd backend

2. Create a virtual environment (recommended):

python3 -m venv venv
source venv/bin/activate  # On Windows: venv\Scripts\activate

3. Install Python dependencies:

pip install -r requirements.txt

4. The .env file is already created with your API keys. Verify it contains:

OPENROUTER_API_KEY=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

5. Start the Flask backend:

python app.py

The backend will run on http://localhost:5000

1. Open a new terminal and navigate to the frontend directory:

cd frontend

2. Install Node.js dependencies:

npm install

3. Start the React development server:

npm start

The frontend will run on http://localhost:3000 and automatically open in Chrome.

1. Start Backend (Terminal 1):

cd backend
source venv/bin/activate  # If using virtual environment
python app.py

2. Start Frontend (Terminal 2):

cd frontend
npm start

3. Open Chrome and navigate to http://localhost:3000

1. Type your legal question in the input field at the bottom
2. Press Enter or click the send button
3. The AI will process your question and provide a response
4. The conversation history is maintained during your session

✅ Mobile-responsive design matching the screenshot ✅ Dark theme UI with Canadian maple leaf logo ✅ Chat interface with user/assistant messages ✅ Integration with Google Gemini Flash 1.5 (free model) ✅ Loading states and thinking indicators ✅ Smooth scrolling and animations ✅ Works on Chrome, Android, and iOS browsers

• Model: google/gemini-flash-1.5
• Provider: OpenRouter
• Cost: Free tier (within your $0 budget)

• This app provides general legal information only
• It is NOT a substitute for professional legal advice
• Users should consult with licensed lawyers for specific legal matters
• The app uses free API credits from OpenRouter

• Port 5000 in use: Change the port in backend/app.py line app.run(debug=True, port=5000)
• API errors: Verify the API key in backend/.env is correct
• CORS errors: Ensure flask-cors is installed

• Port 3000 in use: React will prompt to use another port
• Connection refused: Ensure the backend is running on port 5000
• Dependencies error: Delete node_modules and run npm install again

cd frontend
npm run build

This creates an optimized production build in frontend/build/

For production deployment, use a production WSGI server like Gunicorn:

pip install gunicorn
gunicorn app:app

• ✅ Chrome (Desktop & Mobile)
• ✅ Safari (Desktop & iOS)
• ✅ Firefox (Desktop & Mobile)
• ✅ Edge
• ✅ Android Browsers

This project is for educational purposes.