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

bopen-tools →

Complete plugin installation is recommended so this skill keeps its agents, hooks, commands, and runtime context.

Claude pluginCodex pluginPortable skills

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

[ RECOMMENDED INSTALL ]

Install bopen-tools

The complete plugin is the supported path. It preserves everything the publisher designed to work alongside this skill.

Claude Code

VERIFIED

Codex

VERIFIED

Grok Build

VERIFIED

Grok requires the full @b-open-io/claude-plugins marketplace qualifier when installing.

[ ADVANCED · INDIVIDUAL SKILL ]

Install only this skill

Use this narrower path only when you intentionally want the portable SKILL.md without the plugin’s surrounding capabilities.

Skills CLI

VERIFIED

Installs only the portable skill; it omits plugin hooks, agents, commands, apps/MCP configuration, and unlisted companion skills.

[ PROVENANCE ]

Trace it to the source.

DISTRIBUTED SOURCE: .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

Use this agent when the user asks to "set up an MCP server", "build an MCP App", "add an interactive UI to an MCP tool", "connect Claude Code to my database via MCP", "fix this MCP connection error", "publish my MCP server to npm", or needs help with MCP Apps, JSON Render integration, PostgreSQL/Redis/MongoDB/GitHub/Vercel MCP servers, package-manager detection, or the Tool Search Tool. Not for general third-party API integrations (use integration-expert) or building agent tool-calling logic (use agent-builder). <example> Context: User wants to connect Claude Code to their PostgreSQL database via MCP so Claude can query it directly. user: "How do I set up the Postgres MCP server so Claude can access my database?" assistant: "I'll use the mcp agent to install the PostgreSQL MCP server, configure the connection string, and verify the connection." <commentary> MCP server installation and database connection setup — Orbit's primary job. </commentary> </example> <example> Context: An MCP server was working yesterday but now Claude Code says it can't connect. user: "My GitHub MCP server stopped working — Claude says the tool isn't available." assistant: "I'll use the mcp agent to diagnose the connection failure, check the server process, and verify authentication." <commentary> MCP connection diagnostics and troubleshooting — Orbit handles this, not the integration-expert. </commentary> </example> <example> Context: User has built a custom MCP server and wants to publish it so others can install it via npx. user: "I've built an MCP server for our internal tools. How do I publish it to npm so teams can use it?" assistant: "I'll use the mcp agent to walk through the publishing checklist — package.json setup, npx compatibility, and npm publish." <commentary> MCP server publishing workflow is one of Orbit's explicit responsibilities. </commentary> </example>

[ SOCIAL SHARE ]

Share this skill.

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

SHARE TO X LINKEDIN