devtools Skill (vercel-labs) for Claude Code: What It Does and How to Install It

Makes your coding agent add the json-render inspector panel to your app, so you can debug a generative UI at runtime.

Installs: 8.3K; on skills.sh
Stars: 18.9K; on GitHub
Updated: Nov 2026; last repo commit

This skill covers @json-render/devtools, a floating inspector for json-render apps. It tells your agent which npm packages to install for your framework, where to place the JsonRenderDevtools component, and how to set its props. The panel has five views: Spec, State, Actions, Stream and Catalog, plus an element picker.

It triggers on requests like "add devtools", "debug json-render" or "inspect the spec". It bundles no scripts. SKILL.md says the panel renders nothing when NODE_ENV is production. It also covers wiring one panel to several renderers in a chat and a server-side stream tap.

Good for

Developers building generative UIs with json-render in React, Vue, Svelte or Solid
Anyone asking why an element is not rendering in a json-render app
Developers who want to watch spec patches, state changes and dispatched actions live

Install devtools

Claude Code

1
Download the skill folder from https://github.com/vercel-labs/json-render/tree/HEAD/skills/devtools.
2
Put it at ~/.claude/skills/devtools/ so that SKILL.md sits directly inside.
3
Start a new session; the skill loads when its description matches the task.

Requires Node.js.

The README documents no skill install, so the folder and skills CLI routes are generated. The skill then asks your agent to run the npm install from SKILL.md for your framework: the core package plus one adapter. There is no Claude app tab because the skill edits a code project and runs npm.

Built from the package data we hold. Not yet tested by us.

What's in the skill

When it loads

Drop-in inspector panel for any json-render app. Use when the user wants to debug a generative UI, inspect the spec tree, edit state at runtime, see dispatched actions, follow stream patches live, browse a catalog, or pick DOM elements to find their spec keys. Triggers include "add devtools", "debug json-render", "inspect the spec", "why is this element not rendering", "see the state at runtime", or requests to tap streams / capture action logs for `@json-render/devtools`.

Sections in SKILL.md

Install
Drop-in usage
React
Vue
Svelte
Solid
Controls
Props
Panels
Picker (toolbar)
Reserved space & docking
Multiple renderers on one page (e.g. a chat)
Imperative API (React only)
Server-side stream tap
Under the hood

Key facts

Author: vercel-labs (repo owner of json-render; the README badges it as a Vercel Labs product)
License: Apache-2.0 (LICENSE file, README badge and the devtools package.json agree)
Installs on skills.sh: 8,343 (Nov 2, 2026)
GitHub stars: 18,872 for the whole vercel-labs/json-render repo (Nov 2, 2026)
Last repo commit: Nov 1, 2026
What it includes: 1 file: SKILL.md; no scripts
Needs: A json-render app, plus @json-render/devtools and the adapter for your framework from npm

What it includes

npm install the core package plus the React, Vue, Svelte or Solid adapter
Adds @json-render/devtools and one adapter to your project.
Try: “Add devtools to my json-render app”
Runs code · Install the packages
Place JsonRenderDevtools inside the existing JSONUIProvider
Examples are given for React, Vue, Svelte and Solid. No other wiring is required.
Write · Drop-in component
Spec, State, Actions, Stream and Catalog views
State supports inline edits through store.set. Stream shows patches, text chunks and token usage.
Panels
Click an element in the page to jump to its spec key
A toolbar button, not a tab. Esc cancels.
Element picker
Control position, hotkey, buffer size, reserved space and dock toggle
Default hotkey is Ctrl or Cmd plus Shift plus J. Dock position and drawer height persist in localStorage.
Props and docking
One panel can inspect many Renderer instances under one provider
The recipe says to namespace state per turn with a message ID.
Write · Multiple renderers
useJsonRenderDevtools gives open, toggle and recordEvent
Returns null in production or before mount.
Write · Imperative API (React)
tapJsonRenderStream and createEventStore capture patches at the API route
A YAML variant, tapYamlStream, is also named.
Write · Server-side stream tap

From the official docs

Permissions

Low risk

What it can do

Read your data
Create and change things
Delete things
Read-only mode

Watch out for

It installs npm packages
SKILL.md lists npm install commands for the core package and one adapter. Review the lockfile change. github.com
It edits your app code
The skill places a component in your provider tree and can add a server-side stream tap. Review the diff. github.com
The panel stores settings in localStorage
SKILL.md says the drawer height and the dock choice persist to localStorage. github.com

Security advisories

No published security advisories as of Nov 2, 2026.

Technical details

Talks to	npm registry (package install)
Scopes	Runs npm install for @json-render/devtools and a framework adapter Edits your app code to add the component and, if asked, a server stream tap

Questions

What does the devtools skill do?

It makes your coding agent add the @json-render/devtools inspector to a json-render app. The agent installs the right npm packages, places the component and sets the props you ask for.

How do I install it?

Use the install box above. The README does not document a skill install route, so the box gives the skills CLI command and folder routes. The skill itself then tells your agent to run the npm install for your framework.

Will it show up in my production build?

SKILL.md says the component renders no devtools UI when process.env.NODE_ENV is production, including when a bundler replaces that expression in a browser without a process global. Unbundled environments without process.env keep development behaviour.

Which frameworks does it support?

React, Vue, Svelte and Solid. SKILL.md names one adapter package for each. The imperative hook is React only.

Why is my page layout pushed up by the panel?

By default the panel adds padding to the body to reserve space. SKILL.md says to dock it on the right for layouts that use 100vh or fixed bottom bars, or to pass reserveSpace={false} for a pure overlay.

Is it official?

It lives in vercel-labs/json-render, which the README badges as a Vercel Labs product. It is not Vercel's main product line.

What is json-render?

Per its README, a Generative UI framework where AI generates interfaces from prompts, constrained to the components you define in a catalog. This skill only covers the devtools panel.

Is it safe?

It installs npm packages and edits your app code. Our advice: review the diff, and note the panel writes its height to localStorage. Check that the production behaviour above holds in your bundler before you ship.

Information

updated Nov 2, 2026

Repository: vercel-labs/json-render
Folder: skills/devtools

vercel-labs/json-render skills.sh

Sources

Docs, issue trackers and discussions this page is built from.

Show all 3

SKILL.md · github.com
README.md · github.com
package.json · github.com