mcpField
M
mcp

mcp

github.com/vercel-labs开发18.8k5.8k 次安装4 天前更新
代码仓库

关于 mcp

@json-render/mcp 将 json-render UI 作为交互式 MCP Apps 提供，供 Claude、ChatGPT、Cursor、VS Code 等兼容客户端使用。它创建注册渲染工具和 UI 资源的 MCP 服务，并通过 iframe 中的 React 应用呈现规范。

主要功能

  1. 01创建完整 MCP 服务
  2. 02注册 json-render 工具与 UI 资源
  3. 03生成自包含 iframe HTML
  4. 04通过 React Hook 获取 UI 规范与连接状态
  5. 05支持调用服务端工具

适用场景

  1. 01在 MCP 客户端中呈现交互式 json-render UI
  2. 02为 LLM 提供生成有效规范所需的目录提示
  3. 03在 iframe 应用中连接宿主并显示规范

MCP 相关

它创建 MCP 服务，向客户端注册 `render-ui` 工具和 `ui://` HTML 资源。iframe 应用通过 `postMessage` 与宿主连接并渲染 UI 规范。

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/vercel-labs/json-render --skill mcp

安装后在 Claude Code 中输入/mcp确认已加载。

详细介绍

@json-render/mcp

MCP Apps 集成，可在 Claude、ChatGPT、Cursor、VS Code 和其他支持 MCP 的客户端中，将 json-render UI 作为交互式 MCP Apps 提供。

快速开始

服务端（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());
客户端（React，位于 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>
  );
}

架构

  1. createMcpApp() 创建一个 McpServer，并注册 render-ui 工具和 ui:// HTML 资源
  2. 工具描述包含目录提示词，让 LLM 知道如何生成有效的规范
  3. HTML 资源是由 Vite 打包的单文件 React 应用，包含 json-render 渲染器
  4. 在 iframe 内部，useJsonRenderApp() 通过 postMessage 连接到宿主并渲染规范

服务端 API

  • createMcpApp(options) - 主入口，用于创建完整的 MCP 服务
  • registerJsonRenderTool(server, options) - 在现有服务上注册 json-render 工具
  • registerJsonRenderResource(server, options) - 注册 UI 资源

客户端 API（@json-render/mcp/app）

  • useJsonRenderApp(options?) - React Hook，返回 { spec, loading, connected, error, callServerTool }
  • buildAppHtml(options) - 根据打包后的 JS/CSS 生成 HTML

构建 iframe HTML

使用 Vite + vite-plugin-singlefile 将 React 应用打包为单个自包含的 HTML 文件：

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

客户端配置

Cursor（.cursor/mcp.json）
{
  "mcpServers": {
    "my-app": {
      "command": "npx",
      "args": ["tsx", "server.ts", "--stdio"]
    }
  }
}
Claude Desktop
{
  "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

评论

支持 Markdown