json-render is a framework where AI produces user interfaces as structured JSON constrained by a developer-defined component catalogue. It is for building dynamic interfaces from natural-language prompts across web and mobile frameworks.
Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx skills add vercel-labs/json-render --skill coregit clone --depth 1 https://github.com/vercel-labs/json-renderWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/vercel-labs/json-render/core)<a href="https://agentmods.dev/skills/vercel-labs/json-render/core"><img src="https://agentmods.dev/badge/skills/vercel-labs/json-render/core/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/vercel-labs/json-render/core"><img src="https://agentmods.dev/badge/skills/vercel-labs/json-render/core.svg" alt="Reviewed on agentmods" width="80" height="20"></a>- Socket pass
- Snyk pass
- NVIDIA SkillSpector pass
What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00042 | $0.03444 |
| Opus 5.5 | $0.00017 | $0.01378 |
| Sonnet 5.5 | $0.00008 | $0.00689 |
| Haiku 4.5 | $0.00004 | $0.00344 |
Grade A, and why
core scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 24d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 296 lines — stays where its author put it; the contents beside it link to each section on GitHub.
@json-render/core
Core package for schema definition, catalog creation, and spec streaming.
Key Concepts
- Schema: Defines the structure of specs and catalogs (use
defineSchema) - Catalog: Maps component/action names to their definitions (use
defineCatalog) - Spec: JSON output from AI that conforms to the schema
- SpecStream: JSONL streaming format for progressive spec building
Experimental Decision-Model Composition
For decision-model composition, import experimental_composeSpec and experimental_createEvaluator from @json-render/core. These APIs are unreleased; use a source build until published, then pin exact versions. Experimental exports and Experimental_ types can change in any release.
- Run the Gateway evaluator server-side with
{ model: "typesafe-ai/jev", apiKey: process.env.AI_GATEWAY_API_KEY! }. A plain model identifier is required; Jev is the current example; do not import a provider constructor. - Call
experimental_composeSpec({ catalog, candidates, prompt, evaluate, initialState, signal }). It is an async generator; streamstep.specsnapshots to your existing renderer and inspectcomplete.stopReason(finish,limit,unavailable). Errors and cancellation throw; retain the last snapshot as partial UI. - New trees default to
strategy: "batch": one evaluation selects root/membership, then a second arranges the selected elements when needed. The first snapshot contains selected content in catalog order under the root's default/first slot. Resource variants share one exclusive question; repeated counts include the root. Root selection takes precedence over conflicting speculative membership for that recipe/resource. Equal sibling positions retain catalog order. Combined layouts are validated before publication; cycles or excessive depth throw.maxElementscaps batched creation (default 32). Limit-truncated selections or a missing required layout call returnlimit. Usestrategy: "sequential"for legacynext/parentadapters or sequential creation. Edits stay sequential. - Batched trace steps use
choice: "select" | "layout"and ananswersrecord. Count each trace as one evaluation, including its tokens and latency once. Custom evaluators must answer every offered question; names/choices are opaque and includeroot/select_*, thenparent_*/order_*for batches. - For follow-up edits, pass the selected version as
initialSpec. It is cloned and validated; the evaluator may add, replace, remove non-root subtrees, or move/reorder them. Unchanged IDs, bindings, and state are preserved. OptionalelementDescriptionsshares identifying descriptions without exposing raw props/state.initialStateoverrides the seed state. Seeds must be valid trees within the catalog, expression subset, and depth limit. Matching recipes consume usage/resource limits; removals/replacements release them. Replacements/moves use two evaluations (select target, then recipe/destination), each counted against the budget. Treat operation and position keys as opaque. - Supply atomic candidates with
{ id, description, element: { type, props, on?, visible? }, root?, maxUses?, resource? }. Catalog alone is insufficient: the app must supply values and binding recipes. Jev chooses elements and parent slots, never free-form text or code. It never executes actions. - Candidates are configured component instances, not page templates. Build them from current app records/operations or bind props to
initialState; offer explicit alternatives for chart types, field configurations, and layout variants. The model chooses grouping and order within those options. Name required sections in prompts; structural validity does not imply semantic completeness. - V1 supports flat Spec catalogs, named slots, literals,
$state,$bindState, and state visibility. No prebuilt children, repeat/watch, computed/template/conditional props, or custom directives. Success/error callbacks must reference allowed actions. Events must be declared in the component catalog. - Props and action params are validated against initial state without applying schema transforms/defaults. Supply valid initial values and validate/authorize action calls at runtime. Built-ins without parameter schemas get name validation only.
rootdefaults true,maxUsesdefaults one, sharedresourcevalues make alternatives mutually exclusive. Defaults: 32 evaluations (terminal calls included; no extra finish call for batches), depth eight, 10-second Gateway timeout per call. Supply an overall abort signal.- Candidate descriptions, prompt, instructions, topology, and explicit
contextare sent to the evaluator. Initial state and raw props/binding values are not sent automatically. - For custom providers implement
Experimental_CompositionEvaluator: accept{ state, questions, signal }, return{ answers: { [question]: { choice, confidence? } }, usage?: { inputTokens? } }. Only return offered criteria keys.
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 24d ago Changed · +4 lines d0e8a8a3c419
- 29d ago Changed · +19 lines 6e96b93caf06
- 1mo ago First seen · 273 lines · 42 tokens per session scan A 1b4dd1f33e03
core is a skill published in the GitHub repository vercel-labs/json-render (18,711 stars, last pushed 4d ago), licensed Apache-2.0. It adds 42 tokens to every session and 3,444 once invoked, about $0.0002 per session on Opus 5.5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.
Other skills, from other repositories
agent-platform-model-registry
Agent Platform Model Registry Management. Use when you need to upload, list, describe, update, or delete machine learning models (and their versions) in the Agent Platform Model Registry. Don't use for model training, model deployment to endpoints, or managing non-Agent Platform models.
foundry-config-setup
Resolve missing setup caused by a hardcoded Foundry project endpoint or model in a sample. Use when a sample fails because it uses a placeholder/hardcoded projectendpoint (for example "https://your-project.services.ai.azure.com") or a hardcoded model instead of reading them from the environment.
google-cloud-solution-agentic-analytics-spark-knowledge-catalog
Discovers requirements and designs an end-to-end governed agentic analytics solution using Knowledge Catalog and Managed Service for Apache Spark (Lightning Engine). Use when designing data science and analytics workflows across structured and unstructured distributed data (including in S3, Azure Blob, AlloyDB, and…
training-check
Interactively monitor training metrics from the current Codex session, periodically checking WandB or fallback logs for NaN, divergence, plateaus, and broken runs.
nemo-automodel-launcher-config
Configure NeMo AutoModel job launches for interactive runs, Slurm clusters, and SkyPilot cloud execution.
finetuning
Fine-tune models on Microsoft Foundry using SFT (supervised), DPO (preference), or RFT (reinforcement with graders). Covers dataset preparation, training job submission, deployment, and evaluation. USE FOR: fine-tune, SFT, DPO, RFT, training data, grader, distillation, fine-tuned model, training job, large file…