LangChain Chat Application - Full Stack

A modern, full-stack chat application powered by LangChain and Mistral AI with a beautiful, responsive frontend and a modular backend API.

Project Structure

langchain-chat/
├── backend/                    # Node.js/Express Backend
│   ├── server.js              # Express server entry point
│   ├── routes.js              # API route handlers
│   ├── logger.js              # Logging system
│   ├── package.json           # Backend dependencies
│   └── README.md              # Backend documentation
│
├── frontend/                  # React/Vanilla JS Frontend
│   ├── index.html             # Main HTML template
│   ├── css/
│   │   └── styles.css         # Application styles
│   ├── js/
│   │   ├── app.js             # Application logic
│   │   ├── api.js             # API communication
│   │   └── ui.js              # UI utilities
│   └── README.md              # Frontend documentation
│
├── logs/                      # Auto-generated log files
│   └── chat.log               # Chat history logs
│
├── .env                       # Environment variables
├── package.json               # Root project config
└── README.md                  # This file

Features

• Backend

  • Express.js server on port 3000
  • LangChain + Mistral AI integration
  • RESTful API endpoints
  • Real-time logging system
  • File-based log persistence
  • CORS enabled

• Frontend

  • Beautiful gradient UI with purple theme
  • Real-time chat messaging
  • Backend logs panel
  • Modular JavaScript (ES6 modules)
  • Responsive design
  • Loading animations
  • Error handling

Quick Start

Prerequisites

• Node.js 16+ and npm
• Mistral AI API key

Installation

1. Clone or navigate to the project:

cd langchain-chat

2. Set up environment variables:

cp .env.example .env
# Edit .env and add your MISTRAL_API_KEY

3. Install dependencies:

npm run setup

Running the Application

Start the server (serves both backend API and frontend):

npm start

The application will be available at: http://localhost:3000

Backend API

Endpoints

Chat Endpoint

GET /chat?message=<user_message>

Send a message to the AI and receive a response.

Response:

{
  "response": "AI's response text here"
}

Logs Endpoint

GET /logs

Retrieve all stored chat logs.

Response:

{
  "logs": [
    "[2026-02-08T20:30:45.123Z] [INFO] Server initialized",
    "[2026-02-08T20:30:47.456Z] [SUCCESS] Chat response generated successfully"
  ]
}

Health Check

GET /health

Check if the server is running.

Response:

{
  "status": "ok",
  "message": "Server is running"
}

Frontend Architecture

Modules

• index.html - Main template
• css/styles.css - All styling
• js/app.js - Application orchestration
• js/api.js - API communication
• js/ui.js - UI utilities

Data Flow

User Input
    ↓
app.js: sendMessage()
    ├─ api.js: sendChatMessage()
    └─ ui.js: addMessage(), displayLogs()

Configuration

Environment Variables

Create a .env file in the root directory:

MISTRAL_API_KEY=your_api_key_here
PORT=3000
NODE_ENV=development

Backend Configuration

Edit backend/server.js to modify:

• Port (currently 3000)
• Frontend path
• CORS settings
• Middleware

Frontend Configuration

Edit frontend/js/api.js to modify:

• API base URL
• Endpoints
• Log refresh interval

Development

Backend Development

cd backend
npm install
npm start

Frontend Development

The frontend is served automatically by the backend server. Edit files in frontend/ and refresh your browser.

File Organization

Backend:
- Logging: backend/logger.js
- Routes: backend/routes.js
- Server: backend/server.js

Frontend:
- Application Logic: frontend/js/app.js
- API Communication: frontend/js/api.js
- UI Utilities: frontend/js/ui.js
- Styles: frontend/css/styles.css
- HTML: frontend/index.html

Deployment

Production Build

1. Install dependencies in the root:

npm run setup

2. Set environment variables:

export MISTRAL_API_KEY=your_production_key
export NODE_ENV=production

3. Start the server:

npm start

The server will serve both the API and static frontend assets.

Docker (Optional)

Create a Dockerfile in the backend directory and build your own container.

Troubleshooting

Server won't start

• Check if port 3000 is already in use
• Verify Node.js version: node --version (should be 16+)
• Check for errors in the terminal

Frontend can't connect to backend

• Verify the server is running: http://localhost:3000/health
• Check browser console (F12) for CORS errors
• Ensure API_CONFIG.BASE_URL in frontend/js/api.js is correct

Mistral API errors

• Verify API key in .env file
• Check Mistral API status and rate limits
• Review error logs in the logs panel

Logs not showing

• Check /logs endpoint: http://localhost:3000/logs
• Verify logs/ directory exists
• Check file permissions

Performance

• Logs are limited to 500 entries (configurable in backend/logger.js)
• Log refresh interval: 500ms (configurable in frontend/js/api.js)
• CSS animations use GPU acceleration
• Efficient DOM manipulation

Browser Support

• Chrome/Chromium 90+
• Firefox 88+
• Safari 14+
• Edge 90+

Requires HTTP/HTTPS (file:// protocol not supported)

Security Considerations

• Never commit .env with real API keys
• Use environment variables for sensitive data
• CORS is currently open (adjust for production)
• Sanitize user input in production

License

MIT

Support

For issues or questions, check:

1. Browser console (F12)
2. Backend logs in the logs panel
3. Terminal output where the server is running
4. logs/chat.log file

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Test thoroughly
5. Submit a pull request

---

Current Version: 1.0.0
Last Updated: 2026-02-08
Status: Production Ready ✅