Vercel Launches json-render Devtools to Debug and Inspect Generative UI

VercelVercel

· Updated

Vercel released a dedicated devtools suite for its json-render framework, allowing developers to inspect AI-generated interface specs and state in real time. By adding these tools as an agent skill, coding agents can now autonomously observe and debug the interfaces they build.

Vercel, a frontend cloud platform and creator of the AI SDK, launched json-render devtools for its Generative UI framework. The framework lets AI build interfaces by generating structured JSON specs constrained to a component catalog. The devtools include an inspector panel with tabs for specs, state, actions, and streams.

This update follows the launch of generative interfaces, which previously lacked a way to map AI hallucinations to specific UI errors. The new DOM picker maps screen clicks directly to JSON spec keys. It builds on the agent-generated web by making non-deterministic UI output predictable.

Integrate the tools by dropping the JsonRenderDevtools component into React, Vue, Svelte, or Solid applications. This release extends Vercel's work on agent-driven web terminals by allowing coding agents to autonomously verify their own UI generations via the devtools skill. The package is open-source, supports Shadow-DOM for isolation, and tree-shakes in production.

View the full update on github.com
Chris Tate
Chris Tate
@ctatedev
X

Introducing json-render devtools Inspect Generative UI in real time → Spec, State, Actions, Stream tabs → DOM picker maps clicks to spec keys → Catalog browser for your components → Shadow-DOM, tree-shakes in prod Drop in <JsonRenderDevtools /> React, Vue, Svelte, Solid https://t.co/ihZzMXrqFN

10retweets320likes
View on X

Still wondering? A few quick answers below.

json-render is an open-source framework from Vercel Labs designed for Generative UI. It allows AI models to build user interfaces by generating structured JSON specifications instead of raw code. These specifications are then rendered into a UI using a predefined catalog of safe, predictable components that developers define, ensuring the AI stays within specific design guardrails.

The devtools suite provides a real-time inspector panel for debugging generative interfaces. It includes dedicated tabs to view the JSON specification, current UI state, action logs, and incoming data streams. A key feature is the DOM picker, which allows developers to click a UI element on the screen and automatically highlight its corresponding key within the JSON spec.

Developers can equip AI agents with the ability to use these tools by adding the devtools skill. This is done using the command npx skills add vercel-labs/json-render --skill devtools. Once integrated, coding agents like Claude Code or Cursor can autonomously inspect and debug the state and specifications of the interfaces they generate during the development process.

The json-render devtools are framework-agnostic and support several popular frontend libraries. Developers can use the tools with React, Vue, Svelte, and Solid. Each framework has a specific adapter, such as the JsonRenderDevtools component for React, which can be dropped directly into an application to enable the inspector panel and real-time debugging features across different web environments.

Yes, the json-render framework and its associated devtools are open source and released under the Apache-2.0 license. The tools are designed for production safety, featuring Shadow-DOM support for style isolation and automatic tree-shaking. This ensures that the devtools code is removed from the final production bundle, preventing any unnecessary performance overhead for end users of the application.

Every HeadsUpAI update is written based on its original source and reviewed before it's published. Read our editorial standards →

Vercel

See all AI news & updates from Vercel →

Share this update