compile_and_save_component
Compile dynamic Dossin components into standalone HTML via backend. Returns a public URL for embedding or sharing. Requires user authentication token.
Instructions
Envía un COMPONENTE DOSSIN al backend para compilación remota a HTML standalone.
🔐 AUTENTICACIÓN OBLIGATORIA: ⚠️ ANTES de llamar a esta tool, DEBES preguntar al usuario por su token de autenticación. ❗ El token es REQUERIDO para la compilación en el backend.
FLUJO OBLIGATORIO:
Pregunta al usuario: "Por favor, proporciona tu token de autenticación"
El usuario puede obtenerlo desde:
DevTools del frontend: document.cookie.split('; ').find(r => r.startsWith('accessToken='))?.split('=')[1]
O copiar directamente desde la aplicación
Una vez obtenido el token, procede con la compilación
⚠️ CRÍTICO - DIFERENCIA ENTRE ARTEFACTO Y COMPONENTE DOSSIN:
📱 ARTEFACTO DE CLAUDE (NO compilar):
Componente con datos hardcodeados
Se muestra en el chat de Claude
const turnos = [{id: 1, ...}, {id: 2, ...}]; // Datos fijos
NO tiene fetch(), NO tiene useEffect
❌ NO usar con compile_and_save_component
🔧 COMPONENTE DOSSIN (SÍ compilar):
Componente con fetch dinámico
const [data, setData] = useState([]);
useEffect(() => { fetch('http://localhost:3000/api/database/query', ...) }, []);
Incluye estados: loading, error, data
✅ USAR con compile_and_save_component
TRANSFORMACIÓN REQUERIDA (Artefacto → Componente Dossin):
Remover: const turnos = [datos_hardcodeados];
Agregar: const [turnos, setTurnos] = useState([]);
Agregar: const [loading, setLoading] = useState(true);
Agregar: const [error, setError] = useState(null);
Agregar: useEffect con fetch al endpoint
Agregar: manejo de if(loading) e if(error)
COMPILACIÓN EN BACKEND:
El backend compila el componente con todas las dependencias
Genera HTML standalone listo para producción
Retorna URL pública del componente compilado
Compatible con iframes, S3, CDN
RESULTADO:
URL pública del componente compilado
HTML standalone con datos en tiempo real
Listo para embeber o compartir
Registrado con trazabilidad del usuario que lo creó
CUÁNDO USAR:
Solo después de transformar ARTEFACTO → COMPONENTE DOSSIN
Para generar archivos HTML de producción
Para obtener URL pública del componente
Input Schema
| Name | Required | Description | Default |
|---|---|---|---|
| reactCode | Yes | El código JSX completo del COMPONENTE DOSSIN. DEBE incluir: imports (React, useState, useEffect), fetch dinámico a la API, estados (loading, error, data), y manejo de errores. NO enviar artefactos con datos hardcodeados. | |
| userToken | Yes | Token JWT del usuario para autenticación (OBLIGATORIO). Debe ser solicitado al usuario ANTES de llamar a esta función. El token se envía como Authorization Bearer al backend y permite trazabilidad de quién creó el componente. | |
| componentName | Yes | Nombre descriptivo del componente (ej: 'VolumenCargaProvincias', 'TurnosDelDia'). Se usa para el título del HTML y nombre del archivo. |