Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

Chatbot built with Flask and Bootstrap that delivers ChatGPT-style Markdown responses, including code blocks, lists, and headings. It features a clean, responsive UI with real-time chat and structured AI output using Google’s gemini-pro model.

License

Md-Emon-Hasan/Chatbot-with-HTML-Structured-Formatted

Folders and files

NameName
Last commit message
Last commit date

Latest commit

History

3 Commits

Repository files navigation

πŸš€ Chatbot with HTML Structured Formatted (Flask + Bootstrap)

A full-stack, production-grade Question Answering Chatbot built using Gemini API, Python Flask, and Bootstrap. This app mimics the ChatGPT-style UI by rendering structured Markdown responses from Gemini, including code blocks, headers, and lists.


πŸ“Έ Demo Preview

Image

πŸ”§ Tech Stack

Layer Technology
Frontend HTML, CSS, Bootstrap 5, Vanilla JS
Backend Python, Flask
AI/LLM Google Gemini Pro (via google-generativeai)
API Key Mgmt python-dotenv
Markdown Rendering markdown Python library

βš™οΈ Features

  • βœ… ChatGPT-style Markdown rendering (code blocks, headings, lists)
  • βœ… Gemini-powered accurate responses using gemini-pro
  • βœ… Clean Bootstrap UI with responsive design
  • βœ… JavaScript-powered asynchronous chat (no page reload)
  • βœ… Error-handling for broken requests
  • βœ… Easily extensible to include login, memory, tools, etc.

πŸ“ Project Structure

gemini_chatbot/
β”œβ”€β”€ app.py # Flask backend
β”œβ”€β”€ .env # API keys (not shared)
β”œβ”€β”€ requirements.txt # Dependencies
β”œβ”€β”€ templates/
β”‚ └── index.html # Frontend UI
β”œβ”€β”€ static/
β”‚ └── style.css # Optional custom styles

πŸ”‘ Environment Setup

1. Clone the Repo

git clone https://github.com/<your-username>/gemini-chatbot.git
cd gemini-chatbot

2. Create .env File

GEMINI_API_KEY=your_gemini_api_key_here

πŸ” Keep this file private and never share your API key publicly.

3. Install Dependencies

pip install -r requirements.txt

If you don’t have requirements.txt, manually install:

pip install flask google-generativeai markdown python-dotenv

πŸš€ Run the Application

python app.py

Then visit: http://127.0.0.1:5000


πŸ’‘ Example Prompts

Prompt Response Style
Give for loop code in Python Code + explanation
What is a dictionary in Python? Bullet points + example
Write HTML code for a login form Rendered code block
Explain AI in 3 bullet points Structured Markdown

πŸ› οΈ Customization Ideas (Next-Level)

You can easily extend this app into:

  • πŸ” User authentication system
  • πŸ’¬ Persistent chat history (local DB / SQLite)
  • 🧠 LangChain or Agentic AI integration
  • 🧾 Export conversation to PDF or Markdown
  • 🌐 Deploy on Render, Vercel, or Railway
  • πŸ“² Mobile-responsive design

πŸ“¦ Deployment Suggestions

Platform Status
Render.com βœ… Easy Flask deploy
Railway.app βœ… One-click deploy
Heroku (legacy) ⚠️ Deprecated
Docker βœ… Production-ready container

πŸ“„ License

This project is licensed under the MIT License. Feel free to fork, modify, and use in commercial or educational projects. ⭐


🀝 Contact

πŸ”— Developed by Md Emon Hasan πŸ“§ Email: iconicemon01@gmail.com πŸ’Ό GitHub: Md-Emon-Hasan πŸ“± WhatsApp: +8801834363533


About

Chatbot built with Flask and Bootstrap that delivers ChatGPT-style Markdown responses, including code blocks, lists, and headings. It features a clean, responsive UI with real-time chat and structured AI output using Google’s gemini-pro model.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

AltStyle γ«γ‚ˆγ£γ¦ε€‰ζ›γ•γ‚ŒγŸγƒšγƒΌγ‚Έ (->γ‚ͺγƒͺγ‚ΈγƒŠγƒ«) /