by vercel-labs/json-render

[ PORTABLE SKILL ]

json-render-devtools

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`.

PART OF

MCP →

Install the complete plugin to include its agents, hooks, commands, and runtime context.

Claude pluginCodex pluginGrok BuildOpenCode + portable skills

PUBLISHER: vercel-labs
RELATIONSHIP: vendored
VERSION: 1.0.0
BENCHMARK: unknown

[ INSTALL ]

Install json-render-devtools

Fastest path: hand this line to the coding agent doing the setup. It reads this page and installs the MCP plugin, which ships this skill with everything it relies on.

PROMPTPASTE INTO YOUR AGENT

Click anywhere on the prompt to copy.

[ MANUAL SETUP ]

Choose a runtime, then follow its setup steps. This installs the complete MCP plugin.

COMPLETE PLUGIN

View an example

Example installation for MCP

Example session using the verified commands above.

CLAUDE CODE

EXAMPLE SESSION~/dev/project

/plugin install mcp-dev@b-open-io

Plugin(MCP)Installed MCP for Claude Code

Claude Code is ready to use.

[ ADVANCED ] INSTALL ONLY THIS SKILL

The portable SKILL.md on its own, without the plugin’s hooks, agents, commands, and companion skills. Use it only when you intentionally want the narrower path.

Skills CLI

Grok Bot

[ PROVENANCE ]

Trace it to the source.

DISTRIBUTED SOURCE: modules/mcp-dev/.agents/skills/json-render-devtools/SKILL.md ↗
UPSTREAM SOURCE: vercel-labs/json-render
DISTRIBUTED DIGEST: sha256:88e0134f6a5b211b127b27753d6424d65dfaf21ea605fd6beb90beb5edb907ea
LOCK HASH: 6fcfb1f4db31e1299ca64f2fbddc54d02c14968c6a9fa5b15b864dd0da09f7d0

Companion skills

No required companion skills are declared.

Agents using this skill

Orbit

MCP specialist. Use this agent when the user asks to "set up an MCP server", "build an MCP App", "connect Claude Code to my database via MCP", "fix this MCP connection error", or "publish my MCP server to npm". Covers MCP Apps, JSON Render, PostgreSQL/Redis/MongoDB/GitHub/Vercel servers, and the Tool Search Tool. Not for general third-party API integrations (use integration-expert) or agent tool-calling logic (use agent-builder).

[ SOCIAL SHARE ]

Share this skill.

Pass the canonical page to a teammate or keep it close for later.

SHARE TO X LINKEDIN