devtools — Skills — getagentictools

What it does

Floating toggle appears bottom-right.

Hotkey: Ctrl/Cmd + Shift + J (configurable via hotkey prop).

Drawer is resizable; height persists to localStorage.

spec (Spec | null) — current spec.

catalog (Catalog | null) — catalog definition; required for the Catalog panel.

messages (UIMessage[]) — AI SDK useChat messages; scanned for spec data parts.

initialOpen (boolean) — start open.

Requirements & configuration

Stream — spec patches, text chunks, token usage, lifecycle markers grouped by generation.

3. Namespace state per turn — when the source is an AI stream, hand the agent a unique messageId and require every element key (<id>-root) and state path (/<id>/count) to be prefixed with it.

Configuration: NODE_ENV

devtools

Source

Repository: https://github.com/vercel-labs/json-render

devtools FAQ

What does the devtools skill do?

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`. Floating toggle appears bottom-right. Hotkey: Ctrl/Cmd + Shift + J (configurable via hotkey prop).

What does devtools require?

Stream — spec patches, text chunks, token usage, lifecycle markers grouped by generation. 3. Namespace state per turn — when the source is an AI stream, hand the agent a unique messageId and require every element key (<id>-root) and state path (/<id>/count) to be prefixed with it. Configuration keys: NODE_ENV.

How do I install devtools?

Run: npx -y skills add https://github.com/vercel-labs/json-render --skill devtools --agent claude-code — the source lives at github.com/vercel-labs/json-render.

Maintain devtools?

Let people know it's listed here — add the badge (live metrics, light/dark aware) or a plain link to your README or docs.

[![devtools on getagentictools](https://getagentictools.com/badge/skills/vercel-labs-json-render-devtools.svg)](https://getagentictools.com/skills/vercel-labs-json-render-devtools?ref=badge)

npx agentictools info skills/vercel-labs-json-render-devtools

The second line is the CLI lookup for this page — handy in READMEs and docs.