Content
# AI-Driven Secure Tutorial Management System
A full-stack, AI-powered web application that allows users to seamlessly manage a tutorial database using natural language. The system features an embedded MCP (Model Context Protocol) server that empowers an LLM (Large Language Model) to dynamically execute RESTful CRUD operations on behalf of the user, strictly adhering to JWT-based Role-Based Access Control (RBAC).
## 🚀 Features
* **Natural Language Database Operations**: Chat with the embedded AI to create, read, update, or delete tutorials.
* **Zero-Trust AI Agent**: The AI has no direct access to the database. It must use the active user's JIT (Just-In-Time) Session Token to authenticate REST requests through the standard backend API.
* **Visual Auto-Login & UI Synchronization**: The AI Chat can programmatically authenticate users via conversational prompts, instantly synchronizing the browser's UI state (e.g., automatically logging in, transitioning dashboards, and updating roles without a page refresh).
* **Role-Based Access Control (RBAC)**: Strict enforcement of permissions. Admins have full CRUD capabilities, while Standard Users are restricted to read-only actions. The AI proactively refuses unauthorized operations.
* **Modern Vanilla UI**: A fast, responsive, glassmorphism-styled frontend with an ever-present floating chat widget.
## 🏗️ Architecture
Below is the detailed architectural flow of the system. The frontend communicates with the Express backend, which houses both standard REST endpoints and an internal AI Chat Engine. The Chat Engine securely spawns an isolated MCP Server that maps LLM tool calls back into authenticated API requests.
```mermaid
graph TD
classDef ui fill:#3b82f6,stroke:#1d4ed8,stroke-width:2px,color:#fff
classDef backend fill:#10b981,stroke:#047857,stroke-width:2px,color:#fff
classDef db fill:#f59e0b,stroke:#b45309,stroke-width:2px,color:#fff
classDef ai fill:#8b5cf6,stroke:#6d28d9,stroke-width:2px,color:#fff
classDef mcp fill:#ec4899,stroke:#be185d,stroke-width:2px,color:#fff
User((User)) -->|Interacts| UI[Browser UI / Chat Widget]:::ui
subgraph Browser Frontend
UI
end
UI -->|REST + JWT Header| API[Express REST API]:::backend
UI -->|POST /api/chat + SessionID| ChatEngine[Backend AI Chat Engine]:::ai
subgraph Node.js Server
API
ChatEngine
end
API <-->|Mongoose Queries| DB[(MongoDB)]:::db
ChatEngine <-->|Chat Completions| LLM[OpenAI / OpenRouter API]:::ai
ChatEngine <-->|MCP Tool Execution| MCPServer[Local MCP SDK Server]:::mcp
subgraph Specialized Tools
MCPServer -->|Auto-Injected JWT| API
end
```
## 🛠️ Technology Stack
* **Frontend**: Vanilla HTML5, CSS3, JavaScript
* **Backend Framework**: Node.js, Express.js
* **Database**: MongoDB (via Mongoose ORM)
* **Security**: JSON Web Tokens (JWT), bcrypt.js
* **AI Integration**: `@modelcontextprotocol/sdk` (MCP client/server), `openai` SDK (Configured for OpenRouter compatibility)
## 📦 Prerequisites
Ensure you have the following installed before setting up the project:
* [Node.js](https://nodejs.org/) (v18.x or higher)
* [MongoDB](https://www.mongodb.com/) (Running locally on `mongodb://localhost:27017/` or via a cloud URI)
* An API Key from OpenRouter or OpenAI (for the LLM engine).
## ⚙️ Installation & Setup
1. **Clone the repository:**
```bash
git clone <your-repo-url>
cd node-express-mongodb
```
2. **Install core dependencies:**
```bash
npm install
```
3. **Install and Build the MCP Server:**
The AI tools are contained in a sub-project built with TypeScript.
```bash
cd tutorials-mcp-server
npm install
npm run build
cd ..
```
4. **Environment Variables:**
Create a `.env` file in the root directory and add your AI provider credentials. If using OpenRouter for free models, use the `sk-or-` prefix.
```env
OPENAI_API_KEY=sk-or-your-api-key-here
```
5. **Initialize Database Roles:**
The initialization script inside `server.js` automatically creates default `user` and `admin` roles in MongoDB upon first execution.
## 🚀 Running the Application
Start the backend server. The backend will automatically spawn the built MCP Server process in the background.
```bash
node server.js
```
The server will run on port `8080`.
Open your browser and navigate to: **`http://localhost:8080`**
## 💡 Usage Guide
### Direct API / Manual Usage
You can log in manually using the provided UI boxes. To set up an admin account for the very first time, click "Sign Up" and then use MongoDB Compass to manually inject the Admin role ObjectId into your user record, OR utilize the Chat Agent to securely log you in using the pre-configured `claude_bot` mock credentials.
### AI Chat Widget 💬
Click the floating chat bubble in the bottom right corner at any time (even before logging in) to interact with the LLM.
**Example Prompts:**
* *"Login as admin"* - Automatically authenticates you, updates the browser UI, and returns an admin JWT.
* *"Login as user and show me all published tutorials"* - The AI chains the login and fetch commands simultaneously in one turn.
* *"Create a new tutorial called 'Intro to React' with the description 'Hooks basics' and mark it as published."* - Easily execute DB writes using natural language. (AI will refuse this gracefully if you are a standard user).
* *"Logout user and switch to admin account."* - The AI actively logs you out, signaling the UI to purge local states and swap accounts visually.
