This is a complete, open-source, full-stack chatbot template designed to be both a functional starting point for your own projects and an impressive portfolio piece. It features a sleek, responsive Cyberpunk UI on the front-end and a robust Python Flask + OpenAI backend.
The front-end is a single, dependency-free HTML file. The back-end is a lightweight Flask server ready for deployment on services like Render.
Full-Stack Solution: Provides both the front-end UI and a functional back-end server.
Cyberpunk Aesthetic: A modern, dark theme with glowing neon highlights and a tech-inspired monospaced font.
Responsive UI: The chat interface seamlessly adapts from desktop to mobile devices.
Ready for OpenAI: The Python back-end is pre-configured to connect to the OpenAI API (or any compatible chat model).
Configuration via Environment Variables: Keep your API keys and prompts secure. No hard-coded secrets.
Ready to Deploy: Includes a render.yaml file for easy one-click deployment to the Render platform.
Session Persistence: Chat history is saved in the browser's sessionStorage.
Project Structure The repository is organized into two main folders:
/frontend: Contains the index.html file for the user interface.
/backend: Contains the Python Flask server (main.py), dependencies (requirements.txt), and deployment configuration (render.yaml).
How to Run Locally
- Backend Setup Navigate to the /backend directory.
Create a virtual environment (Recommended):
Bash
python -m venv venv
source venv/bin/activate # On Windows use venv\Scripts\activate
Install dependencies:
Bash
pip install -r requirements.txt Set up environment variables: Create a file named .env in the /backend directory and add your OpenAI API key:
OPENAI_API_KEY="sk-YourSecretApiKeyHere"
SYSTEM_PROMPT="You are a helpful AI assistant with a futuristic, cyberpunk personality." CHAT_MODEL="gpt-3.5-turbo" Run the server:
Bash
python main.py The backend will now be running on http://127.0.0.1:5000.
- Frontend Setup Navigate to the /frontend directory.
Open the index.html file directly in your web browser.
The UI is pre-configured to connect to your local backend at http://127.0.0.1:5000/chat. You can start chatting immediately!
Deployment This project is ready for deployment on Render.
Create a new repository on GitHub and upload the contents of the /frontend and /backend folders.
On Render, create a new "Web Service" and connect it to your GitHub repository.
Render will automatically detect the render.yaml file and configure the settings.
In the Render dashboard, go to "Environment" and add your OPENAI_API_KEY as a secret environment variable.
Deploy!
Once deployed, copy your new public URL (e.g., https://your-app.onrender.com) and update the API_URL constant in the frontend/index.html file to point to your live server's /chat endpoint.