ngx-json-render UI

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

ngx-json-render (workspace)

UI generativa para Angular: um renderizador para json-render que transmite especificações JSON geradas por IA em componentes Angular reais — signals, componentes standalone, sem zone.js (verificado no CI: sem Zone.js, sem NgZone, cada suíte explicitamente sem zone).

→ Documentação do pacote: projects/ngx-json-render/README.md

→ Demonstração ao vivo: https://shteynu.github.io/ngx-json-render/ — abre em um dashboard de vendas do Q3 (cartões de KPI, um gráfico de linhas, um gráfico de barras) transmitindo patch por patch; a mesma aba reproduz um formulário de suporte cuja validação e envio o modelo escreveu, então enviá-lo vazio mostra as verificações em ação. Quatro abas: esse SpecStream, que você pode interromper no meio da geração e inspecionar pela metade; um playground que renderiza uma especificação que você edita manualmente contra qualquer catálogo e mostra o prompt do sistema que um modelo receberia; uma especificação interativa (bindings, repeat, confirm, watch); e um chat onde prosa e patches de UI chegam na mesma resposta. As duas abas de streaming reproduzem uma gravação por padrão e chamam um modelo real se você colar sua própria chave — ou

Habilidades do agente

Uma habilidade por pacote publicado para agentes de codificação de IA — a mesma ideia do diretório skills/ do próprio json-render. A CLI de habilidades as instala no Claude Code, Cursor, Codex e nos outros agentes que ela suporta, e o agente então escreve catálogos, componentes e código de streaming contra a API real em vez de adivinhar pelo nome do pacote:

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

No Claude Code, elas também vêm como um plugin, que é atualizado a cada lançamento:

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

Um agente sem nenhum dos dois pode começar por llms.txt no site de demonstração, que vincula ambos os READMEs dos pacotes e ambas as habilidades como markdown bruto (projects/demo/public/llms.txt).

Fontes: skills/ngx-json-render/SKILL.md e skills/ngx-json-render-material/SKILL.md. Um agente lê a habilidade em vez do README, então uma mudança na API pública de um pacote ou no seu README não é concluída até que a habilidade correspondente diga o mesmo. O CI compila cada trecho de TypeScript em ambas as habilidades contra os pacotes compilados (npm run check:skills), então uma habilidade não pode ficar silenciosamente desatualizada. O plugin em plugins/ngx-json-render contém cópias de ambas as habilidades que npm run sync:plugin atualiza; o CI falha quando elas divergem (npm run check:plugin).

Estrutura do workspace

• projects/ngx-json-render — o renderizador (publicado como ngx-json-render).
• projects/ngx-json-render-material — um catálogo Angular Material pronto de 33 componentes (publicado como ngx-json-render-material), para que uma especificação possa ser gerada e renderizada sem escrever um catálogo primeiro.
• skills — habilidades do agente, uma por pacote publicado (veja abaixo).
• projects/mcp-app — protótipo: o catálogo Material como um App MCP, renderizado inline no Claude, ChatGPT, VS Code ou Cursor. A visão é injectJsonRenderApp de ngx-json-render/mcp, a contraparte do React useJsonRenderApp do upstream, e o servidor é createRenderUiServer de ngx-json-render/mcp/server; npm run build:mcp-app.
• projects/demo — app de demonstração: uma landing com a linha de instalação, depois quatro abas: um SpecStream em injectUIStream com um botão de parar, abrindo em um dashboard de vendas gravado com gráficos SVG; um playground (edite uma especificação ao vivo, alterne catálogos, leia catalog.prompt()); uma especificação interativa (bindings de estado, repeat, confirm, watch); e um chat em injectChatUI onde prosa e patches compartilham um único stream. Sob ng serve, a aba Streaming também monta <json-render-devtools>; o build implantado nunca o carrega. As duas abas de streaming trocam apenas seu transporte entre uma geração gravada e um modelo ao vivo, então o que você assiste é o cliente real de qualquer forma; a chave é mantida em sessionStorage e vai direto do navegador para o provedor.

Desenvolver

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

A demonstração consome ambos os pacotes compilados (dist/ngx-json-render e dist/ngx-json-render-material, que seu playground renderiza) via mapeamentos de caminho tsconfig — npm start e npm test os compilam primeiro, então um clone novo não precisa de nenhum outro passo. Isso também faz o repositório iniciar sem modificações no StackBlitz, que sempre executa npm install && npm start. Mantenha npm run watch:lib rodando em paralelo se você estiver editando a própria biblioteca.

Lançamentos

Os lançamentos são automatizados via publicação confiável do npm (OIDC — sem tokens, proveniência incluída). Os dois pacotes versionam independentemente, cada um em seu próprio prefixo de tag.

O renderizador, em release.yml — aumente version em projects/ngx-json-render/package.json, faça commit, então

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

O catálogo Material, em release-material.yml — aumente version em projects/ngx-json-render-material/package.json, faça commit, então

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

Cada workflow verifica se a tag corresponde à versão do pacote, compila, executa os testes daquele projeto, publica no npm e cria o lançamento do GitHub.

Ambos os workflows também podem ser iniciados manualmente, para uma máquina que não pode enviar tags: Actions → Release (ou Release Material catalog) → Run workflow no branch que contém o aumento de versão, normalmente main. O workflow então deriva a tag do manifesto (v<version> ou material-v<version>), a cria no commit em que executa e continua exatamente como um push de tag faria; uma tag que já existe em outro commit falha a execução em vez de publicar, então um aumento esquecido não pode ser enviado duas vezes.

Configuração única no npmjs.com, por pacote — configurar um não cobre o outro, e um pacote sem conexão não recebe nenhuma credencial nas Actions e falha com ENEEDAUTH. Em Settings → Trusted Publisher → GitHub Actions do pacote:

Campo	Valor
Organização ou usuário	shteynu
Repositório	ngx-json-render
Nome do workflow	release.yml para o renderizador, release-material.yml para o catálogo — apenas o nome do arquivo, sem caminho
Nome do ambiente	deixe vazio — nenhum workflow declara um environment:, e um nome aqui teria que corresponder a um
Ações permitidas	marque Allow npm publish; o formulário não salvará sem pelo menos uma, e npm stage publish não é o que esses workflows executam

Fallback manual (requer OTP de 2FA). Ele publica sem a atestação de proveniência que os workflows anexam, então use-o apenas quando as Actions estiverem indisponíveis. Passe --registry explicitamente: o npm lê a configuração do projeto apenas do diretório atual, então a linha registry no .npmrc deste repositório não se aplica uma vez que você cd em dist/, e a publicação silenciosamente visa o que seu ~/.npmrc global aponta.

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

O mesmo para o catálogo 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/

A demonstração é implantada no GitHub Pages por ci.yml a cada push para main.

Status e upstream

Não há renderizador Angular de primeira parte no monorepo json-render, e nenhum no npm: 28 outros pacotes @json-render/* estão em 0.20.0, mas nenhum @json-render/angular (verificado em 2026-08-29). O PR da comunidade #244 está aberto desde março de 2026 sem uma decisão de mantenedor; #310 veio depois e foi fechado pelo próprio autor em 2026-08-03. Esta biblioteca espelha o contrato do renderizador base (React = Vue = Solid = Svelte) e é estruturada para que seu src/lib possa ser adaptado em um PR packages/angular upstream.

Licença

Apache-2.0 — correspondendo ao projeto upstream json-render.