---
id: gh-mcp
name: "mcp"
url: https://skills.yangsir.net/skill/gh-mcp
author: vercel-labs
domain: ai-backend-engineering
tags: ["mcp", "json-render", "ui-components", "react", "integration"]
install_count: 5800
rating: 4.40 (120 reviews)
github: https://github.com/vercel-labs/json-render/tree/main/skills/mcp
---

# mcp

> 用于构建 MCP 服务器，在 Claude、ChatGPT、Cursor 等客户端中通过 JSON 规范渲染交互式 UI。该 Skill 封装了 json-render 核心和 MCP 协议，开发者只需定义界面结构和组件，即可快速集成动态 UI，大幅降低 MCP 应用的前端开发成本。

**Stats**: 5,800 installs · 4.4/5 (120 reviews)

## Before / After 对比

### 开发 MCP UI 的效率

**Before**:

在没有此技能前，开发者需要手动编写 HTML、CSS 和 JavaScript 来创建交互式 UI，并在多个 MCP 客户端中测试集成，流程繁琐，平均耗时 120 分钟。

**After**:

使用此技能后，只需定义 JSON 规范，即可自动生成完整 UI，并直接嵌入 MCP 客户端，开发时间缩短至 15 分钟。

| Metric | Before | After | Change |
|---|---|---|---|
| 开发时间 | 120分钟 | 15分钟 | -87.5% |

## Readme

# @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)

```typescript
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)

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

1. `createMcpApp()` creates an `McpServer` that registers a `render-ui` tool and a `ui://` HTML resource
2. The tool description includes the catalog prompt so the LLM knows how to generate valid specs
3. The HTML resource is a Vite-bundled single-file React app with json-render renderers
4. 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

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

- `useJsonRenderApp(options?)` - React hook, returns `{ spec, loading, connected, error, callServerTool }`
- `buildAppHtml(options)` - generate HTML from bundled JS/CSS

## Building the iframe HTML

Bundle the React app into a single self-contained HTML file using Vite + `vite-plugin-singlefile`:

```typescript
// 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" },
});
```

## Client Configuration

### Cursor (`.cursor/mcp.json`)

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

### Claude Desktop

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

## Dependencies

```bash
# 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
```


---
*Source: https://skills.yangsir.net/skill/gh-mcp*
*Markdown mirror: https://skills.yangsir.net/api/skill/gh-mcp/markdown*