LexMind is an advanced professional legal AI infrastructure designed to provide precision, speed, and professional-grade insights regarding Vietnamese Laws (specifically Decree 168/2024/NĐ-CP, Road Traffic Safety Laws, and beyond).
This repository contains the Next.js frontend application, built with modern web technologies, a sleek Dark-mode aesthetic, and powerful interactive data visualization.
- Real-time SSE Streaming: Extremely fast and dynamic word-by-word generation via Server-Sent Events.
- Granular Transparency: Highly detailed breakdown of AI processing steps (
Thinking,Process Queue,Answer). - Citation & Relevancy Metrics: Advanced citation metrics including RRF (Reciprocal Rank Fusion) relevancy scores for total transparency.
- Knowledge Graph Visualization: Visually explores the semantic relationships between legal nodes using
react-force-graph-2d. - In-chat Law Details: An interactive side panel for direct statutory reading alongside the AI conversation.
- LangSmith Integration: Trigger and view full dataset batch runs powered by LangGraph directly from the dashboard.
- Advanced AI Metrics Tracking: Automatically displays AI-driven evaluation metrics across dimensions like Groundedness, Correctness, Behavior Compliance, and Citation Accuracy.
- Manual Feedback Interface: Complete manual evaluation overlay with 0-2 scale scoring and issue tagging to constantly map, trace, and refine model outputs.
- Dataset Management: Select test datasets and control run limits directly from the frontend.
- Secure JWT Management: Authentication with transparent auto-refreshing via an interceptor pattern.
- Google OAuth2 Integration: 1-click seamless SSO authorization.
- Forgot Password Flow: Fully featured recovery with 6-digit OTP email verification integration.
- System Overview: Monitors API, Postgres Database, AI Services, and Redis health.
- User Management: Monitor signups, activity, and adjust administrative roles.
- Generative Analytics: Real-time generation metrics (p50, p95, TTFT, token usage) and Semantic Caching hit-rates to measure real-world performance.
- Presentations Module: Programmatic dynamic video/animation generation powered by
Remotionfor legal explainers directly inside the web app.
- Framework: Next.js App Router (React 19, TypeScript)
- Styling: Tailwind CSS V4 (Custom Neo-Cyberpunk & Dark Theme System)
- State Management: Zustand (with LocalStorage persistence features)
- Data Visualization:
d3andreact-force-graph-2dfor legal knowledge graph charting - Motion & Media:
Remotionfor internal programmatic slide/video rendering - Content Rendering:
react-markdown
- Node.js (v18+)
- npm, yarn, or pnpm
-
Clone the repository:
git clone <repo-url> cd LexMind-Frontend
-
Install dependencies:
npm install
-
Set up environment variables: Copy
.env.exampleto.env(or create a.envfile) and configure your endpoints:NEXT_PUBLIC_API_BASE_URL=http://localhost:8080/api/v1 # Add other required client keys here
-
Run the development server:
npm run dev
src/
├── app/ # Next.js App Router (Routing & Layouts)
│ ├── admin/ # LexMind Ops Dashboard (Guards & Eval pipelines)
│ ├── chat/ # AI Interaction Application
│ ├── login/ # Entry & Authentication Flows
│ └── presentation/ # Remotion-powered presentation & video rendering
├── assets/ # Static assets & backgrounds
├── components/ # Reusable UI components (Modals, Bubbles, Layouts)
├── hooks/ # Global custom React hooks
├── lib/ # Dedicated API Controllers (Auth, Chat, Eval, Admin, Law)
├── providers/ # Top-level React context providers
└── store/ # Zustand global stores (Zustand)
The application strictly delegates routes based on Role-Based Access Control (RBAC). Regular users interface with the RAG engine via the /chat route. Users identified as ADMIN are instantly and natively directed to the advanced LexMind Ops suite upon authentication to configure models, track evaluations, and view metrics.
© 2024-2026 Lexi Intelligence Systems | All Rights Reserved.