mcp skill | PlugMCP

mcp

vercel-labs5.9kstars

MCP Apps integration for json-render. Use when building MCP servers that render interactive UIs in Claude, ChatGPT, Cursor, or VS Code, or when integrating json-render with the Model Context Protocol.

Install GitHub

1---2name: mcp3description: MCP Apps integration for json-render. Use when building MCP servers that render interactive UIs in Claude…4---56# skills/mcp/SKILL.md

SKILL.mdAgent skill

Transport: File
Status: Listed

SKILL.md

Install

The skill file stays in the publisher's repository.

Paste the copied command in a terminal. It installs this SKILL.md into that agent.

shterminal

1npx skills add vercel-labs/json-render --skill mcp -a cursor -y

Paste the copied command in a terminal. It installs this SKILL.md into that agent.

shterminal

1npx skills add vercel-labs/json-render --skill mcp -a claude-code -y

Paste the copied command in a terminal. It installs this SKILL.md into that agent.

shterminal

1npx skills add vercel-labs/json-render --skill mcp -a codex -y

Paste the copied command in a terminal. It installs this SKILL.md into that agent.

shterminal

1npx skills add vercel-labs/json-render --skill mcp -a grok -y

Send the copied message in a Grok Bot chat. The Bot fetches this SKILL.md from GitHub and adds it to the skills all your Bots share.

txtGrok Bot chat

1Install this skill: https://github.com/vercel-labs/json-render/tree/HEAD/skills/mcp

Download skill skills/mcp/SKILL.md on GitHub

skills/mcp/SKILL.mdMarkdown · UTF-8

Skill facts

Agent skill

File: skills/mcp/SKILL.md
Publisher: vercel-labs
Hosting: Publisher

FAQ

Questions

From the publisher

SKILL.md

name: mcp
description: MCP Apps integration for json-render. Use when building MCP servers that render interactive UIs in Claude, ChatGPT, Cursor, or VS Code, or when integrating json-render with the Model Context Protocol.

@json-render/mcp

MCP Apps integration that serves json-render UIs as interactive MCP Apps inside Claude, ChatGPT, Cursor, VS Code, and other MCP-capable clients.

Quick Start

Server (Node.js)

import { createMcpApp } from "@json-render/mcp";
import { defineCatalog } from "@json-render/core";
import { schema } from "@json-render/react/schema";
import { shadcnComponentDefinitions } from "@json-render/shadcn/catalog";
import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
import fs from "node:fs";

const catalog = defineCatalog(schema, {
  components: { ...shadcnComponentDefinitions },
  actions: {},
});

const server = createMcpApp({
  name: "My App",
  version: "1.0.0",
  catalog,
  html: fs.readFileSync("dist/index.html", "utf-8"),
});

await server.connect(new StdioServerTransport());

Client (React, inside iframe)

import { useJsonRenderApp } from "@json-render/mcp/app";
import { JSONUIProvider, Renderer } from "@json-render/react";

function McpAppView({ registry }) {
  const { spec, loading, error } = useJsonRenderApp();
  if (error) return <div>Error: {error.message}</div>;
  if (!spec) return <div>Waiting...</div>;
  return (
    <JSONUIProvider registry={registry} initialState={spec.state ?? {}}>
      <Renderer spec={spec} registry={registry} loading={loading} />
    </JSONUIProvider>
  );
}

Architecture

createMcpApp() creates an McpServer that registers a render-ui tool and a ui:// HTML resource
The tool description includes the catalog prompt so the LLM knows how to generate valid specs
The HTML resource is a Vite-bundled single-file React app with json-render renderers
Inside the iframe, useJsonRenderApp() connects to the host via postMessage and renders specs

Server API

createMcpApp(options) - main entry, creates a full MCP server
registerJsonRenderTool(server, options) - register a json-render tool on an existing server
registerJsonRenderResource(server, options) - register the UI resource

// vite.config.ts
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import { viteSingleFile } from "vite-plugin-singlefile";

export default defineConfig({
  plugins: [react(), viteSingleFile()],
  build: { outDir: "dist" },
});

{
  "mcpServers": {
    "my-app": {
      "command": "npx",
      "args": ["tsx", "server.ts", "--stdio"]
    }
  }
}

{
  "mcpServers": {
    "my-app": {
      "command": "npx",
      "args": ["tsx", "/path/to/server.ts", "--stdio"]
    }
  }
}

# Server
npm install @json-render/mcp @json-render/core @modelcontextprotocol/sdk

# Client (iframe)
npm install @json-render/react @json-render/shadcn react react-dom

# Build tools
npm install -D vite @vitejs/plugin-react vite-plugin-singlefile

mcp

Install

Skill facts

Questions

How do I install mcp?

Where does mcp live?

Which agents can use mcp?

SKILL.md

@json-render/mcp

Quick Start

Server (Node.js)

Client (React, inside iframe)

Architecture

Server API

Client API (`@json-render/mcp/app`)

Building the iframe HTML

Client Configuration

Cursor (`.cursor/mcp.json`)

Claude Desktop

Dependencies

Install

Skill facts

Questions

How do I install mcp?

Where does mcp live?

Which agents can use mcp?

SKILL.md

@json-render/mcp

Quick Start

Server (Node.js)

Client (React, inside iframe)

Architecture

Server API

Client API (@json-render/mcp/app)

Building the iframe HTML

Client Configuration

Cursor (.cursor/mcp.json)

Claude Desktop

Dependencies

Client API (`@json-render/mcp/app`)

Cursor (`.cursor/mcp.json`)