{"id":13593576,"url":"https://github.com/minhbtrc/langchain-chatbot","last_synced_at":"2025-04-09T05:31:42.743Z","repository":{"id":198036942,"uuid":"699264770","full_name":"minhbtrc/langchain-chatbot","owner":"minhbtrc","description":"This code is an implementation of a chatbot using LLM chat model API and Langchain.","archived":false,"fork":false,"pushed_at":"2025-03-26T08:09:25.000Z","size":712,"stargazers_count":53,"open_issues_count":0,"forks_count":12,"subscribers_count":6,"default_branch":"main","last_synced_at":"2025-04-06T04:12:54.740Z","etag":null,"topics":["chatbot","gpt-4","gradio","langchain","langserve","langsmith","lcel","llm","mongodb","openai","personality-chatbot","presidio","runnable","streaming","streaming-response"],"latest_commit_sha":null,"homepage":"","language":"Python","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/minhbtrc.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2023-10-02T09:31:33.000Z","updated_at":"2025-03-26T08:09:30.000Z","dependencies_parsed_at":"2023-10-21T11:25:16.598Z","dependency_job_id":"46aa1150-9783-44ee-ae0a-09b932d3f134","html_url":"https://github.com/minhbtrc/langchain-chatbot","commit_stats":null,"previous_names":["btrcm00/chatbot-with-langchain","spartan-minhbui/chatbot-with-langchain","minhbtrc/langchain-chatbot","spartan-minhbui/langchain-chatbot"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/minhbtrc%2Flangchain-chatbot","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/minhbtrc%2Flangchain-chatbot/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/minhbtrc%2Flangchain-chatbot/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/minhbtrc%2Flangchain-chatbot/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/minhbtrc","download_url":"https://codeload.github.com/minhbtrc/langchain-chatbot/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247986750,"owners_count":21028886,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["chatbot","gpt-4","gradio","langchain","langserve","langsmith","lcel","llm","mongodb","openai","personality-chatbot","presidio","runnable","streaming","streaming-response"],"created_at":"2024-08-01T16:01:21.736Z","updated_at":"2025-04-09T05:31:42.727Z","avatar_url":"https://github.com/minhbtrc.png","language":"Python","funding_links":[],"categories":["开源项目"],"sub_categories":["其他聊天机器人"],"readme":"# Chatbot with Langchain, LangSmith.\n\n## Requirement\n\n- Python version \u003e= 3.9. Because langchainhub package requires it\n- Docker and Docker Compose (for containerized deployment)\n\n## Description\n\n- This is a chatbot implementation with Langchain framework.\n    - Base LLM: Vertex AI or OpenAI API\n    - Memory: MongoDB\n    - UI:\n        - Next.js frontend\n        - FastAPI backend\n    - Prompt versioning and tracing: LangSmith\n- User can custom bot's personality by setting bot information like gender, age, ...\n- Demo UI:\n  ![Demo UI](/assets/demo_ui.png)\n\n## System Architecture\n\nThe application follows a modern microservices architecture with containerized components:\n\n```\n┌─────────────────────────────────────────────────────────────────────────────┐\n│                                                                             │\n│                           Docker Compose Environment                        │\n│                                                                             │\n│  ┌───────────────┐       ┌────────────────┐        ┌───────────────────┐   │\n│  │               │       │                │        │                   │   │\n│  │    Next.js    │◄─────►│    FastAPI     │◄──────►│     MongoDB       │   │\n│  │   Frontend    │       │    Backend     │        │     Database      │   │\n│  │  (Port 3000)  │       │   (Port 8080)  │        │    (Port 27017)   │   │\n│  │               │       │                │        │                   │   │\n│  └───────────────┘       └────────┬───────┘        └───────────────────┘   │\n│                                   │                                         │\n│                                   ▼                                         │\n│                          ┌─────────────────┐      ┌──────────────────┐     │\n│                          │                 │      │                  │     │\n│                          │   LangChain     │─────►│  LangSmith       │     │\n│                          │   Framework     │      │  (Tracing)       │     │\n│                          │                 │      │                  │     │\n│                          └────────┬────────┘      └──────────────────┘     │\n│                                   │                                         │\n│                                   ▼                                         │\n│                          ┌─────────────────┐      ┌──────────────────┐     │\n│                          │                 │      │                  │     │\n│                          │   LLM Provider  │      │  Presidio        │     │\n│                          │ (OpenAI/Vertex) │      │  Anonymizer      │     │\n│                          │                 │      │  (PII Protection) │     │\n│                          └─────────────────┘      └──────────────────┘     │\n│                                                                             │\n└─────────────────────────────────────────────────────────────────────────────┘\n```\n\n### Data Flow\n\n1. **User Interaction**:\n   - User sends a message through the Next.js frontend\n   - Frontend forwards the request to the FastAPI backend\n\n2. **Message Processing**:\n   - Backend optionally anonymizes PII data using Presidio Anonymizer\n   - LangChain framework builds the conversation chain\n   - Request is sent to the selected LLM provider (OpenAI or Vertex AI)\n   - Response is traced using LangSmith for monitoring\n\n3. **Conversation Storage**:\n   - Conversations are stored in MongoDB for history\n   - Each user session has a unique conversation ID\n\n4. **Response Generation**:\n   - LLM response is de-anonymized if PII protection is enabled\n   - Backend sends the formatted response back to the frontend\n   - Frontend renders the response to the user\n\n### Component Structure\n\n#### Backend Architecture\n\n```\n┌────────────────────────────────────────────────────────────────────────┐\n│                                                                        │\n│                             FastAPI Backend                            │\n│                                                                        │\n│  ┌────────────┐     ┌─────────────┐      ┌────────────────────────┐   │\n│  │            │     │             │      │                        │   │\n│  │   API      │◄───►│   Bot       │◄────►│     Memory System      │   │\n│  │  Routes    │     │  Manager    │      │    (MongoDB/Redis)     │   │\n│  │            │     │             │      │                        │   │\n│  └────────────┘     └──────┬──────┘      └────────────────────────┘   │\n│                            │                                           │\n│                            ▼                                           │\n│                    ┌───────────────┐                                   │\n│                    │               │         ┌────────────────────┐    │\n│                    │  Chain        │◄───────►│                    │    │\n│                    │  Manager      │         │   Anonymizer       │    │\n│                    │               │         │                    │    │\n│                    └───────┬───────┘         └────────────────────┘    │\n│                            │                                            │\n│                            ▼                                            │\n│                   ┌────────────────┐        ┌─────────────────────┐    │\n│                   │                │        │                     │    │\n│                   │  LLM Models    │───────►│  External Tools     │    │\n│                   │  Integration   │        │  (Search/etc.)      │    │\n│                   │                │        │                     │    │\n│                   └────────────────┘        └─────────────────────┘    │\n│                                                                         │\n└─────────────────────────────────────────────────────────────────────────┘\n```\n\n**Key Backend Components:**\n\n- **API Routes**: FastAPI endpoints for chat, health checks, and conversation management\n- **Bot Manager**: Core orchestration layer that handles message processing\n- **Memory System**: Stores conversation history with MongoDB integration\n- **Chain Manager**: Manages LangChain prompt templates and execution\n- **Anonymizer**: Optional PII protection using Microsoft Presidio\n- **LLM Integration**: Connects to OpenAI or Vertex AI models\n- **External Tools**: Integrates with search and other auxiliary services\n\n#### Frontend Architecture\n\n```\n┌────────────────────────────────────────────────────────────────────────┐\n│                                                                        │\n│                           Next.js Frontend                             │\n│                                                                        │\n│  ┌────────────────┐     ┌─────────────────┐    ┌───────────────────┐  │\n│  │                │     │                 │    │                   │  │\n│  │  Page Layout   │────►│  Chat Window    │───►│  Message Bubbles  │  │\n│  │                │     │  Component      │    │                   │  │\n│  └────────────────┘     └─────────────────┘    └───────────────────┘  │\n│                                │                                       │\n│                                ▼                                       │\n│                        ┌─────────────────┐    ┌───────────────────┐   │\n│                        │                 │    │                   │   │\n│                        │  API Services   │───►│  State Management │   │\n│                        │                 │    │                   │   │\n│                        └─────────────────┘    └───────────────────┘   │\n│                                                                        │\n│                        ┌─────────────────┐    ┌───────────────────┐   │\n│                        │                 │    │                   │   │\n│                        │  UI Components  │───►│  Utility Helpers  │   │\n│                        │                 │    │                   │   │\n│                        └─────────────────┘    └───────────────────┘   │\n│                                                                        │\n└────────────────────────────────────────────────────────────────────────┘\n```\n\n**Key Frontend Components:**\n\n- **Page Layout**: Main application layout and container components\n- **Chat Window**: Core component handling conversation display and input\n- **Message Bubbles**: Display of user and AI messages with formatting\n- **API Services**: REST client for communicating with the backend\n- **State Management**: Manages conversation state and UI interactions\n- **UI Components**: Reusable elements like buttons, inputs, and modals\n- **Utility Helpers**: Support functions for data formatting and processing\n\n### Sequence Flow\n\nBelow is a sequence diagram showing how data flows through the system when a user sends a message:\n\n```\nUser        Frontend        Backend        LangChain       LLM        MongoDB\n |             |              |               |             |            |\n |--message---\u003e|              |               |             |            |\n |             |--POST /chat-\u003e|               |             |            |\n |             |              |--load history-|             |            |\n |             |              |               |--query------|-----------\u003e|\n |             |              |               |\u003c--history---|------------|\n |             |              |--anonymize---\u003e|             |            |\n |             |              |               |--prompt----\u003e|            |\n |             |              |               |\u003c--response--|            |\n |             |              |\u003c-de-anonymize-|             |            |\n |             |              |--store--------|-------------|-----------\u003e|\n |             |\u003c---response--|               |             |            |\n |\u003c--display---|              |               |             |            |\n |             |              |               |             |            |\n```\n\n**Key Steps in the Sequence:**\n\n1. **User Interaction:**\n   - User types a message in the chat interface\n   - Frontend captures the input and sends to backend API\n\n2. **Backend Processing:**\n   - Backend loads conversation history from MongoDB\n   - If enabled, PII is anonymized using Presidio\n   - The conversation chain is constructed with LangChain\n\n3. **LLM Interaction:**\n   - The prompt with history and user message is sent to the LLM\n   - LLM processes the request and returns a response\n   - If PII protection is enabled, the response is de-anonymized\n\n4. **Response Handling:**\n   - The conversation is stored in MongoDB\n   - Response is returned to the frontend\n   - Frontend displays the message to the user\n\n5. **Tracing and Monitoring:**\n   - Throughout this process, LangSmith traces the execution\n   - Performance metrics and debugging information are collected\n\n### PII for chatbot\n\n- [Data anonymization with Microsoft Presidio](https://python.langchain.com/docs/guides/privacy/presidio_data_anonymization/)\n- To protect personally identifiable information (PII), we add `PresidioAnonymizer` to my bot to replace PIIs before\n  pass to LLM api. View code in [Anonymizer](//utils/anonymizer.py)\n- Steps when using it:\n    - User message after anonymize:\n\n      ![anonymized message](/assets/anonymized_output.png)\n\n    - Anonymized prompt before input to LLM:\n\n      ![anonymized_prompt](/assets/anonymized_prompt.png)\n\n    - De-anonymized response to user after LLM call:\n  \n      ![de-anonymized_output.png](/assets/de-anonymized-output.png)\n\n## How to use\n\n### Quick Start with Setup Script\n\nThe easiest way to run the entire application is using our setup script:\n\n1. **Make the script executable**:\n   ```bash\n   chmod +x setup.sh\n   ```\n\n2. **Run the setup script**:\n   ```bash\n   ./setup.sh\n   ```\n\n3. **Follow the prompts**:\n   - The script will create necessary .env files if they don't exist\n   - Choose between Docker Compose deployment or local development\n   - The script will guide you through the rest of the setup process\n\nFor Windows users, use `setup.bat` instead.\n\n### Quick Start with Docker Compose Manually\n\nIf you prefer to run the commands manually:\n\n1. **Set up environment variables**:\n   ```bash\n   # For backend\n   cp backend/.env.example backend/.env\n   # Edit the .env file to add your OpenAI API key\n   \n   # For frontend\n   cp frontend/.env.example frontend/.env\n   ```\n\n2. **Start the application**:\n   ```bash\n   docker-compose up -d\n   ```\n\n3. **Access the application**:\n   - Frontend: http://localhost:3000\n   - Backend API: http://localhost:8080\n   - API documentation: http://localhost:8080/docs\n\n4. **Stop the application**:\n   ```bash\n   docker-compose down\n   ```\n\n### Setup tracing with Langsmith\n\n- Langsmith docs: [LangSmith](https://docs.smith.langchain.com/)\n- Configure environment to connect to LangSmith. Add these to your `backend/.env` file:\n  ```\n  LANGCHAIN_TRACING_V2=true\n  LANGCHAIN_ENDPOINT=\"https://api.smith.langchain.com\"\n  LANGCHAIN_API_KEY=\"\u003cyour-api-key\u003e\"\n  LANGCHAIN_PROJECT=\"chatbot-with-langchain\"\n  ```\n\n### Running Locally (without Docker)\n\n0. Download the models for the languages to use in anonymizer. PII support.\n    1. `python -m spacy download en_core_web_md`\n1. RUN backend\n    1. Clone repo: `git clone https://github.com/btrcm00/chatbot-with-langchain.git`\n    2. Add google-cloud-platform credential file to `secure/vertexai.json` or set up OpenAI API key\n    3. `cd backend`\n    4. Install required packages: `pip install -r requirements.txt`\n    5. Create MongoDB database and config environment variables to connect Mongo\n    6. Run: `python -m uvicorn backend.main:app --reload --host 0.0.0.0 --port 8080`\n2. RUN frontend\n    1. `cd frontend`\n    2. Install packages: `npm install`\n    3. Start frontend: `npm run dev`\n\n## Development\n\nFor development purposes, you can use the Makefile commands:\n```bash\nmake setup  # Set up environment files\nmake start  # Start all services\nmake stop   # Stop all services\nmake logs   # View logs from all containers\n```\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fminhbtrc%2Flangchain-chatbot","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fminhbtrc%2Flangchain-chatbot","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fminhbtrc%2Flangchain-chatbot/lists"}