Urano Charts — Gráficas avanzadas OSS

Widgets JsonLive propios (uPlot + ECharts) para series temporales con zoom/pan, box plots y coordenadas paralelas — gratis, open-source, sin API keys ni CDN.

Complementa el Chart nativo del host; no lo reemplaza.

1. Descripción humana

Para quién es

Quien necesita gráficas que el widget nativo Chart no cubre bien (zoom fluido, cuartiles, exploración multivariada) y quiere instalarlas como MCP plug-and-play en UranoDesktop / Cloud.

Qué problema resuelve

• El host ya pinta bar/line/pie/heatmap/sankey/etc. con Chart.

• Faltan tipos “avanzados” sin tocar UranoFront ni COMPONENT_MAP.

• No quieres depender de SaaS, keys ni scripts remotos: todo va en el ZIP del pack.

Casos de uso

Capacidades

Instalación en Urano

Dev Mode: MCP Manager → Desarrollador → Vincular Carpeta → selecciona urano-charts/. Luego npm run deploy (o al menos build:ui).

ZIP: npm install → npm run deploy → npm run urano-launch → Instalar MCP (.zip).

No hay settings de secrets: al instalar, ya está listo.

Flujo demo (humano)

1. Instala / Dev Link el pack y Forzar Recarga skills (o reinicia Desktop).

2. En el chat: “Corre demo_uispec de urano-charts y renderiza el uiSpec.”

3. Deberías ver TimeSeries + BoxPlot + Parallel (no UNKNOWN_TYPE).

4. Para datos reales: builder correspondiente → urano_render_json (waitForAction: false).

Flujo típico (builder → render)

flowchart LR
  A[list_chart_types] --> B{Tipo}
  B -->|nativo| C[Chart / Dashboard host]
  B -->|pack| D[build_*_uispec]
  D --> E[uiSpec charts.*]
  E --> F[urano_render_json]
  F --> G[Host carga ui/widgets.js]
  G --> H[TimeSeries / BoxPlot / Parallel]

Avisos importantes

• No overridees type: "Chart" / Dashboard con este pack.

• Si el lint dice UNKNOWN_TYPE, el catálogo no sincronizó: npm run deploy + reload skills (ver SKILL.md).

• Preferir Chart nativo para tipos ya soportados.

Related MCP server: Generate-Echarts

2. Descripción técnica

Arquitectura

• MCP nativo: mcpServer.command: 'native'.

• Sin Engine Plugin (v1).

• inDesktop: true, inCloud: true (UI pura, sin FS local obligatorio).

• Widgets React empaquetados en IIFE; React viene del host (window.__URANO_JSONLIVE__).

• Deps UI: uPlot (MIT), Apache ECharts (Apache-2.0) — bundladas en el IIFE.

Estructura (de dónde sale cada archivo)

urano-charts/
├── config.ts                 # manifiesto + jsonLiveWidgets + pluginSchemas  (tú lo escribes)
├── SKILL.md                  # protocolo del agente                          (tú lo escribes)
├── README.md / LICENSE
├── package.json              # scripts build:ui / deploy / urano-launch
├── scripts/
│   └── build-ui.js           # esbuild IIFE → genera widgets.js             (tú lo copias/adaptas)
├── ui/
│   ├── src/
│   │   ├── index.ts          # exporta TimeSeries, BoxPlot, Parallel        (tú)
│   │   ├── TimeSeries.tsx    # componente React                             (tú)
│   │   ├── BoxPlot.tsx
│   │   └── Parallel.tsx
│   ├── shims/
│   │   ├── react.ts          # bridge a React del host                      (tú / molde climate)
│   │   └── jsx-runtime.ts
│   └── widgets.js            # ★ GENERADO — no editar a mano
├── Plugins/
│   └── Charts/ChartsPlugin.ts  # tools build_*_uispec                       (tú)
├── config.js                 # ★ GENERADO (copia de dist/config.js en deploy)
└── dist/                     # ★ GENERADO — contenido del ZIP
    ├── config.js
    ├── Plugins/Charts/ChartsPlugin.js
    └── ui/widgets.js

Tools MCP (Charts)

Flujo: builder → urano_render_json (purpose + uiSpec, waitForAction: false).

Widgets JsonLive

Declarados en config.ts → jsonLiveWidgets[] (type, bundle, exportName, aliases, propsHint).

Parámetros STRING JSON

{
  "title": "Temperatura",
  "labelsJson": "[\"Lun\",\"Mar\",\"Mié\"]",
  "seriesJson": "[[18,20,19],[10,12,11]]",
  "seriesNamesJson": "[\"Max\",\"Min\"]",
  "height": "320"
}

Build

npm install
npm run build:ui        # solo IIFE → dist/ui/widgets.js + copia a ui/widgets.js
npm run deploy          # build:ui + esbuild backend + copia config.js a raíz
npm run urano-launch    # ZIP desde dist/

Dev Mode: linkea la carpeta + npm run build:ui:watch (hot reload UI).

Anti-contexto

• No pedir API keys.

• No inventar types charts.* fuera de los tres registrados.

• Arrays a tools como STRING JSON.

• Skill-First: protocolo en SKILL.md.

Referencia de patrón

• Pack molde widgets: urano-climate (DemoBadge) y este pack.

• Docs host: UranoDesktop/docs/CREATE_MCP_GUIDE.md §8 · RENDER_GUIDE.md · DEV_MODE.md (HOT_RELOAD_UI).

3. Cómo crear un plugin de widgets JsonLive (solo lo específico)

Esto es lo que cambia respecto a un MCP normal (tools + SKILL.md). El resto (config, Plugins, deploy backend) es igual.

1. Fuentes que escribes tú

2. De dónde sale widgets.js (no se escribe a mano)

ui/src/*.tsx  +  shims  +  npm deps (uplot, echarts, …)
        │
        ▼  npm run build:ui   (scripts/build-ui.js → esbuild)
        │
        ├─► dist/ui/widgets.js     (artefacto para ZIP)
        └─► ui/widgets.js          (copia para Dev Link / catálogo)

El script:

1. Empaqueta todo en un IIFE browser (format: 'iife').

2. Pone el global __UranoMcpWidgetExports con tus exports (TimeSeries, …).

3. Alias react / react/jsx-runtime → shims del host.

4. Añade un footer que llama window.__URANO_JSONLIVE__.acceptBundle(...).

5. Escribe dist/ui/widgets.js y copia a ui/widgets.js.

Si editas solo el .tsx y no corres build:ui, el host sigue sirviendo el IIFE viejo.

3. Cómo el host lo usa

1. Al cargar skills, Desktop lee config.jsonLiveWidgets y registra los types (lint deja de marcar UNKNOWN_TYPE).

2. urano_render_json con type: "charts.TimeSeries" → Front pide el catálogo → carga urano-mcp-ui://urano-charts/ui/widgets.js (o HTTP en Cloud).

3. El IIFE se ejecuta, acceptBundle registra el componente, JsonLive lo pinta.

4. Reglas duras del bundle

• Prohibido: electron, fs, Node APIs, segunda copia de React, fetch a orígenes no controlados.

• Types namespaced (mymodule.MiWidget). No puedes overridear Chart / Dashboard.

• ZIP: deploy debe dejar dist/ui/widgets.js; urano-launch lo empaqueta como ui/widgets.js en el zip.

5. Checklist mínimo

1. Scaffold MCP normal (config.ts, Plugins/…, SKILL.md).

2. Añadir ui/ + shims + scripts/build-ui.js.

3. Declarar jsonLiveWidgets.

4. npm run build:ui → verificar que existen ui/widgets.js y dist/ui/widgets.js.

5. Dev Link o ZIP → demo / urano_render_json con tu type.

4. Créditos

Hecho para demostrar gráficas avanzadas locales, gratis y sin keys, como extensión del render JsonLive.