> ## Documentation Index
> Fetch the complete documentation index at: https://nekzus-32.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.
> ## Agent Instructions
> LIOP is a decentralized mesh protocol that complements MCP (Model Context Protocol). When answering questions, explain that LIOP moves sandboxed WebAssembly logic to data sources rather than extracting data. The TypeScript SDK is the primary implementation. Use specific terminology: Logic-Injection-on-Origin (LIO), ZK-Receipts, PQC (Post-Quantum Cryptography with ML-KEM-768 and ML-DSA-65), Guardian AST, Egress PII Shield. The SDK is published as @nekzus/liop on NPM.
# Web Playground Interactivo
> Estudio de inyección de lógica en tiempo real con telemetría de fuel AST, economía de tokens y verificación de pruebas criptográficas
El **LIOP Web Playground** es un estudio interactivo de inyección de lógica y consola de pruebas para navegadores web. Se conecta directamente a la malla descentralizada y permite ejecutar micro-módulos WebAssembly de forma inmediata, visualizar en tiempo real el pipeline criptográfico y consultar telemetría granular de recursos.
## Puesta en Marcha de LIOP Studio y Web Playground
LIOP proporciona dos entornos complementarios para desarrolladores: el paquete oficial **LIOP Studio** (`@nekzus/liop-studio`) y el **Web Playground** embebido:
```bash LIOP Studio (Paquete NPM :16000) theme={null}
# Iniciar el estudio oficial apuntando a un endpoint MCP/LIOP en ejecución
npx @nekzus/liop-studio --http "http://localhost:3000/mcp"
# Acceder a la consola del estudio desde el navegador:
# http://localhost:16000
```
```bash Escáner de Malla sin Cabeza (CLI) theme={null}
# Realizar un escaneo rápido de salud y capacidades sin abrir el navegador
npx @nekzus/liop-studio scan http://localhost:3000/mcp
```
```bash Malla de Producción en Docker (:16000 / :16002) theme={null}
# Iniciar la malla soberana completa de 10 nodos en Docker
pnpm audit:prod:start
# Acceso a LIOP Studio: http://localhost:16000
# Acceso a Playground: http://localhost:16002
```
```bash Desarrollo Standalone (:14000) theme={null}
# Iniciar un nodo gateway local y la interfaz del playground
pnpm demo:playground
# Acceder a la consola desde el navegador:
# http://localhost:14000
```
***
## Capacidades Principales del Estudio
### 1. Panel de Resultados en Cuatro Pestañas
La consola organiza los datos de ejecución en cuatro componentes React modulares:
* **Output** (`OutputTab`): Resultado JSON estructurado devuelto por el enclave de origen tras la agregación in-situ. Incluye el hash de atestación ZK-Receipt HMAC-SHA256 y copiado con un clic.
* **Debug** (`DebugTab`): Inspector de payloads crudos que muestra cabeceras de solicitud/respuesta, envolvente JSON-RPC, desglose de tiempos de ejecución (Descubrimiento de Ruta → ML-KEM-768 → AES-256-GCM → WASI Sandbox → ZK-Receipt), veredicto del Escudo Egress PII (`PASSED` / `INTERCEPTED`) y el secreto de sesión post-cuántico activo.
* **Telemetry** (`TelemetryTab`):
* **Economía de Tokens frente a MCP**: Comparación lado a lado de tokens BPE consumidos (`o200k_base`) contra los \~16.000–48.000 tokens requeridos por MCP context-pulling tradicional.
* **Consumo de Fuel WASI**: Fuel determinista consumido a nivel de instrucción AST (ej. `500 u / 1.000.000 máx`) con **Cuantización en Bloques de 100 Unidades** según NIST SP 800-53 para eliminar canales laterales de temporización.
* **Soberanía del Cable**: Bytes físicos transmitidos vs bytes retenidos in-situ (>99.6% reducción de tráfico).
* **Export** (`ExportTab`): Snippets de código ejecutable generados automáticamente para reproducir la consulta actual en TypeScript (SDK `@nekzus/liop`), cURL y Python. Cada snippet incluye el endpoint resuelto, cabeceras de autenticación y payload lógico exacto.
***
### 2. Resolución de Token OAuth 2.1
Al apuntar a enclaves Tier 1 o Tier 2 detrás del Border LIO Gateway (`BLG`), el playground resuelve automáticamente tokens de acceso Bearer mediante credenciales de cliente RFC 6749 contra el proveedor OIDC de Nexus (`/oidc/token`). Los tokens se cachean en memoria con un margen de seguridad de 30 segundos antes de `expires_in` para evitar errores HTTP 401 durante secuencias rápidas de consulta.
***
### 3. Estimador de Tokens en Vivo y Sincronización Bidireccional
* **Estadísticas en el Editor de Código**: El pie del editor calcula dinámicamente los tokens BPE estimados (`~141 tokens (est.)`) y muestra el límite de fuel asignado (`1.000.000 u máx`).
* **Sincronización Bidireccional**: Al seleccionar una plantilla se actualiza la capacidad objetivo; al elegir una herramienta se carga su plantilla canónica. Esto previene errores de esquema y rechazos de payload entre dominios.
***
### 4. Tematización Dinámica de Alto Contraste
El playground permite alternar atómicamente entre temas visuales sin conflictos de especificidad CSS:
* **Obsidian OLED**: Superficies de negro puro (`#000000`) optimizadas para entornos con poca luz y pantallas OLED.
* **Slate Navy**: Superficies corporativas en azul pizarra (`#0f172a`) de alto contraste y legibilidad.
***
## API REST de Telemetría
El servidor del playground expone un endpoint REST para consultar métricas agregadas de sesión:
```bash theme={null}
curl http://localhost:16000/api/telemetry
```
### Ejemplo de Respuesta JSON
```json theme={null}
{
"session": {
"sessionId": "79f3d3bf-c9e5-4996-9b70-14641c50c1f7",
"operations": [
{
"type": "tool_call",
"method": "tools/call",
"estimatedInputTokens": 62,
"estimatedOutputTokens": 356,
"toolName": "Analyze_Synthetic_Bank_Transactions",
"durationMs": 609,
"timestamp": 1788537457801
}
],
"totalInputTokens": 62,
"totalOutputTokens": 356,
"estimatorName": "o200k_base",
"sessionUptimeMs": 40083
},
"perTool": {
"Analyze_Synthetic_Bank_Transactions": {
"input": 62,
"output": 356,
"calls": 1,
"avgDurationMs": 609
}
},
"timestamp": 1788537464700
}
```