🚀 Dashboard Modular con IA (React + Vite + MUI + TypeScript)

¡Bienvenido al frontend del Proyecto MCP!

Este es un panel de administración moderno y minimalista diseñado para interactuar con Inteligencia Artificial. Está construido con las tecnologías más eficientes del mercado (Vite para velocidad, TypeScript para seguridad y Material UI para el diseño), asegurando que sea escalable, mantenible y responsivo.

✨ Características Principales

• 🎨 Modo Oscuro/Claro: Sistema de temas integrado. Puedes cambiar entre día y noche con un solo clic en la barra lateral.
• 📱 Diseño 100% Responsivo: La interfaz se adapta a móviles y tablets. El menú lateral se oculta automáticamente en pantallas pequeñas y se activa con un botón de menú (hamburguesa).
• nav Navegación Anidada: Sistema de doble barra lateral (Rail fijo + Menú contextual) para navegar entre módulos sin perder el foco.
• ⚡ Rendimiento Ultra Rápido: Gracias a Vite, el servidor de desarrollo inicia en milisegundos.

📋 Requisitos Previos

Antes de comenzar, asegúrate de tener instalado lo siguiente en tu PC:

1. Node.js (Versión 18 o superior): Es el motor que ejecuta el entorno. Descargar aquí.
2. Git: Para clonar este repositorio. Descargar aquí.
3. VS Code: El editor de código recomendado.

🛠️ Guía de Instalación Paso a Paso

Sigue estas instrucciones exactas para ejecutar el proyecto en tu máquina local:

Paso 1: Clonar el repositorio

Abre tu terminal (PowerShell, CMD o Git Bash) y ejecuta el siguiente comando para descargar los archivos:

git clone <URL_DEL_REPOSITORIO_AQUI>

### Paso 2: Entrar a la carpeta del proyecto
cd dashboard-v1-chat-mcp

### Paso 3: Instalar dependencias
npm install

### Paso 4: Iniciar el servidor de desarrollo
npm run dev

### Paso 5: Abrir en el navegador
  ➜  Local:   http://localhost:5173/
    ➜  Network: use --host to expose


### 📂 Estructura del Proyecto

src/
│
├── components/          <-- Piezas de LEGO (Componentes visuales)
│   ├── ChatInterface.tsx    # La ventana del chat (con botón hamburguesa móvil)
│   ├── PrimarySidebar.tsx   # La barra delgada izquierda (con botón de tema)
│   └── SecondarySidebar.tsx # El menú que se expande/contrae
│
├── layout/              <-- El esqueleto
│   └── DashboardLayout.tsx  # El cerebro que decide qué mostrar y controla el responsive
│
├── theme/               <-- Estilos y configuración
│   ├── theme.ts             # Definición de colores (Claro/Oscuro)
│   └── ThemeContext.tsx     # Lógica para cambiar el tema en toda la app
│
├── App.tsx              # Punto de entrada principal
└── main.tsx             # Conexión con el HTML