ngx-json-render UI

npx add-mcp 'https://ngx-json-render.vercel.app/mcp'

ngx-json-render (espacio de trabajo)

UI generativa para Angular: un renderizador para json-render que transmite especificaciones JSON generadas por IA a componentes reales de Angular — signals, componentes independientes, sin zonas (verificado en CI: sin Zone.js, sin NgZone, cada suite explícitamente sin zonas).

→ Documentación del paquete: projects/ngx-json-render/README.md

→ Demo en vivo: https://shteynu.github.io/ngx-json-render/ — se abre en un panel de ventas del tercer trimestre (tarjetas KPI, un gráfico de líneas, un gráfico de barras) transmitiendo parche por parche; la misma pestaña reproduce un formulario de soporte cuya validación y envío escribió el modelo, por lo que enviarlo vacío muestra las comprobaciones en acción. Cuatro pestañas: ese SpecStream, que puedes detener a mitad de generación e inspeccionar a medio construir; un patio de juegos que renderiza una especificación que editas a mano contra cualquiera de los catálogos y muestra el prompt del sistema que recibiría un modelo; una especificación interactiva (enlaces, repetición, confirmación, observación); y un chat donde la prosa y los parches de UI llegan en la misma respuesta. Las dos pestañas de transmisión reproducen una grabación por defecto y llaman a un modelo real si pegas tu propia clave — o

Habilidades del agente

Una habilidad por paquete publicado para agentes de codificación de IA — la misma idea que el directorio skills/ de json-render. La CLI de habilidades las instala en Claude Code, Cursor, Codex y los otros agentes que soporta, y el agente entonces escribe catálogos, componentes y código de transmisión contra la API real en lugar de adivinar por el nombre del paquete:

npx skills add shteynu/ngx-json-render --skill ngx-json-render --skill ngx-json-render-material

En Claude Code también vienen como un plugin, que se actualiza con cada lanzamiento:

claude plugin marketplace add shteynu/ngx-json-render
claude plugin install ngx-json-render@ngx-json-render

Un agente sin ninguno de los dos puede comenzar desde llms.txt en el sitio de demostración, que enlaza ambos READMEs de paquetes y ambas habilidades como markdown sin procesar (projects/demo/public/llms.txt).

Fuentes: skills/ngx-json-render/SKILL.md y skills/ngx-json-render-material/SKILL.md. Un agente lee la habilidad en lugar del README, por lo que un cambio en la API pública de un paquete o su README no está completo hasta que la habilidad correspondiente diga lo mismo. CI compila cada fragmento de TypeScript en ambas habilidades contra los paquetes construidos (npm run check:skills), por lo que una habilidad no puede quedarse silenciosamente atrás. El plugin en plugins/ngx-json-render contiene copias de ambas habilidades que npm run sync:plugin actualiza; CI falla cuando se desvían (npm run check:plugin).

Estructura del espacio de trabajo

• projects/ngx-json-render — el renderizador (publicado como ngx-json-render).
• projects/ngx-json-render-material — un catálogo listo de Angular Material con 33 componentes (publicado como ngx-json-render-material), para que una especificación pueda generarse y renderizarse sin escribir un catálogo primero.
• skills — habilidades del agente, una por paquete publicado (ver abajo).
• projects/mcp-app — prototipo: el catálogo de Material como una App MCP, renderizado en línea en Claude, ChatGPT, VS Code o Cursor. La vista es injectJsonRenderApp de ngx-json-render/mcp, la contraparte del useJsonRenderApp de React del upstream, y el servidor es createRenderUiServer de ngx-json-render/mcp/server; npm run build:mcp-app.
• projects/demo — aplicación de demostración: una página de inicio con la línea de instalación, luego cuatro pestañas: un SpecStream en injectUIStream con un botón de detener, que se abre en un panel de ventas grabado con gráficos SVG; un patio de juegos (editar una especificación en vivo, cambiar catálogos, leer catalog.prompt()); una especificación interactiva (enlaces de estado, repetición, confirmación, observación); y un chat en injectChatUI donde la prosa y los parches comparten un solo flujo. Bajo ng serve la pestaña de Streaming también monta <json-render-devtools>; la compilación desplegada nunca lo carga. Las dos pestañas de transmisión intercambian solo su transporte entre una generación grabada y un modelo en vivo, por lo que lo que ves es el cliente real en ambos casos; la clave se guarda en sessionStorage y va directamente del navegador al proveedor.

Desarrollo

npm ci
npm start            # build the library, then serve the demo at http://localhost:4200
npm test             # vitest: renderer + Material catalog + demo
npm run build        # build renderer + Material catalog + demo

La demo consume ambos paquetes compilados (dist/ngx-json-render y dist/ngx-json-render-material, que su patio de juegos renderiza) a través de asignaciones de rutas tsconfig — npm start y npm test los construyen primero, por lo que un clon nuevo no necesita ningún otro paso. Esto también hace que el repositorio arranque sin modificaciones en StackBlitz, que siempre ejecuta npm install && npm start. Mantén npm run watch:lib ejecutándose en paralelo si estás editando la biblioteca en sí.

Lanzamientos

Los lanzamientos están automatizados mediante publicación confiable de npm (OIDC — sin tokens, procedencia incluida). Los dos paquetes versionan de forma independiente, cada uno con su propio prefijo de etiqueta.

El renderizador, en release.yml — incrementa version en projects/ngx-json-render/package.json, haz commit, luego

git tag v0.x.y && git push origin main v0.x.y

El catálogo de Material, en release-material.yml — incrementa version en projects/ngx-json-render-material/package.json, haz commit, luego

git tag material-v0.x.y && git push origin main material-v0.x.y

Cada flujo de trabajo verifica que la etiqueta coincida con la versión del paquete, compila, ejecuta las pruebas de ese proyecto, publica en npm y crea el lanzamiento de GitHub.

Ambos flujos de trabajo también pueden iniciarse manualmente, para una máquina que no puede enviar etiquetas: Actions → Release (o Release Material catalog) → Run workflow en la rama que contiene el incremento de versión, normalmente main. El flujo de trabajo entonces deriva la etiqueta del manifiesto (v<version> o material-v<version>), la crea en el commit donde se ejecuta, y continúa exactamente como lo haría un envío de etiqueta; una etiqueta que ya existe en otro commit falla la ejecución en lugar de publicar, por lo que un incremento olvidado no puede enviarse dos veces.

Configuración única en npmjs.com, por paquete — configurar uno no cubre al otro, y un paquete sin conexión no obtiene credenciales en absoluto en Actions y falla con ENEEDAUTH. En Settings → Trusted Publisher → GitHub Actions del paquete:

Campo	Valor
Organización o usuario	shteynu
Repositorio	ngx-json-render
Nombre del flujo de trabajo	release.yml para el renderizador, release-material.yml para el catálogo — solo el nombre del archivo, sin ruta
Nombre del entorno	dejar vacío — ningún flujo de trabajo declara un environment:, y un nombre aquí tendría que coincidir con uno
Acciones permitidas	marca Allow npm publish; el formulario no se guardará sin al menos una, y npm stage publish no es lo que ejecutan estos flujos de trabajo

Respaldo manual (requiere OTP de 2FA). Publica sin la atestación de procedencia que adjuntan los flujos de trabajo, así que úsalo solo cuando Actions no esté disponible. Pasa --registry explícitamente: npm lee la configuración del proyecto solo del directorio actual, por lo que la línea registry en el .npmrc de este repositorio no se aplica una vez que haces cd en dist/, y la publicación apunta silenciosamente a lo que tu ~/.npmrc global indique.

npm run build:lib && cp LICENSE dist/ngx-json-render/ && cd dist/ngx-json-render && npm publish --registry https://registry.npmjs.org/

Lo mismo para el catálogo de Material:

npm run build:material && cp LICENSE dist/ngx-json-render-material/ && cd dist/ngx-json-render-material && npm publish --registry https://registry.npmjs.org/

La demo se despliega en GitHub Pages mediante ci.yml en cada push a main.

Estado y upstream

No hay un renderizador Angular de primera parte en el monorepo de json-render, ni en npm: 28 otros paquetes @json-render/* están en 0.20.0, pero ningún @json-render/angular (verificado 2026-08-29). El PR comunitario #244 ha estado abierto desde marzo de 2026 sin una decisión del mantenedor; #310 llegó después y fue cerrado por su propio autor el 2026-08-03. Esta biblioteca refleja el contrato del renderizador base (React = Vue = Solid = Svelte) y está estructurada para que su src/lib pueda adaptarse a un PR packages/angular upstream.

Licencia

Apache-2.0 — coincidiendo con el proyecto upstream json-render.