skills.rest
hasnaxyz
hasnaxyzOFFICIAL
Explore all skills by this author →
GitHub

mcp

Serve json-render specs and HTML resources from a Node.js MCP server.

Updated Jun 24, 2026
Search Tags:#vscode#mcp#claude desktop#cursor#interactive apps#json-render
One-click install
npx skills add https://github.com/hasnaxyz/open-render --skill mcp-hasnaxyz
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: mcp
Source: https://github.com/hasnaxyz/open-render/tree/main/skills/mcp
Command: npx skills add https://github.com/hasnaxyz/open-render --skill mcp-hasnaxyz

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill removes the complexity of exposing rich, interactive json-render interfaces through the Model Context Protocol so AI clients can present usable UIs instead of plain text.

Core Features & Use Cases

  • MCP App Hosting: Serve json-render specs and HTML resources from a Node.js MCP server for use in Claude, ChatGPT, Cursor, and VS Code.
  • Interactive Client Rendering: Render and synchronize UI state inside an iframe-based React client using a host-connected app hook.
  • Use Case: Build a support assistant, dashboard, or workflow tool that lets users interact with structured actions and components directly inside their MCP client.

Quick Start

Create an MCP server with createMcpApp, bundle a single-file React app with buildAppHtml, and render the received spec in the client using useJsonRenderApp.

Frequently Asked Questions about mcp

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I render interactive UI components inside an MCP client like Claude Desktop or Cursor?▼

To render interactive UI inside an MCP client, you serve json-render specs from a Node.js server and synchronize state via postMessage between the host and an embedded iframe using a host-connected app hook.

Can I build a custom interactive dashboard in VS Code using the Model Context Protocol?▼

Yes, you can build interactive dashboards in VS Code using the Model Context Protocol by creating a server-side app with createMcpApp and bundling React HTML resources that render structured actions directly inside the editor.

How do I host json-render interfaces for ChatGPT workflows through an MCP server?▼

You host json-render interfaces for ChatGPT workflows by exposing spec resources from a Node.js MCP server, bundling a single-file React app with buildAppHtml, and rendering the spec client-side using useJsonRenderApp.

What is the best way to synchronize UI state between an MCP host and an embedded React iframe?▼

The best way to synchronize UI state between an MCP host and an embedded React iframe is through client-side postMessage synchronization, ensuring rendered interfaces stay aligned with host-connected app data.

Do I need a Node.js server to expose interactive MCP apps to AI clients?▼

Yes, you need a Node.js server to expose interactive MCP apps, because the workflow requires server-side app creation with createMcpApp and bundled HTML delivery to render interactive json-render UIs inside AI clients.

Why do my MCP tools only show plain text instead of interactive interfaces in Claude?▼

MCP tools show only plain text without interactive interfaces when you lack server-side app hosting and bundled HTML delivery, which are required to expose rich json-render specs through the Model Context Protocol.

Related Skills

Explore More Software Engineering Skills→
inpinitiinpiniti

mcp

Render json-render UIs inside MCP-enabled clients via Node.js server.

Community
Advanced
vercel-labsvercel-labs
15.9k

mcp

Render json-render UIs inside MCP-capable clients via createMcpApp and useJsonRenderApp.

Official
Intermediate
mrkhachaturovmrkhachaturov

create-mcp-app

Guide development of interactive MCP Apps linking tool execution to host-rendered HTML resources.

Community
Advanced
xztxyxztxy

mcp

Expose an MCP server and UI bundle to render json-render UIs in MCP clients.

Community
Advanced