AI驱动的教程管理系统

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.

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 (v18.x or higher)
• MongoDB (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:

   复制

   git clone <your-repo-url>
   cd node-express-mongodb
   

2. Install core dependencies:

   复制

   npm install
   

3. Install and Build the MCP Server: The AI tools are contained in a sub-project built with TypeScript.

   复制

   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.

   复制

   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.

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.