Can I use this for production APIs?

Yes, it scaffolds a production-ready Express server using the official MCP SDK and supports secure tunneling for deployment.

What is the difference between an MCP Server and an MCP App?

A standard MCP Server returns text or JSON data, while an MCP App includes visual UI components (React/HTML) that render interactively within the AI interface.

Does the generated UI support dark mode?

Yes, the scaffolded apps use host CSS variables that automatically adapt the UI to the user's current theme (light or dark) in Claude or ChatGPT.

Why is a specific version of Zod required?

This skill requires Zod ^4.1.13 to ensure compatibility with the specific asynchronous schema parsing methods used by the MCP extension apps SDK.

How does bundling work for the frontend components?

It utilizes Vite with the 'vite-plugin-singlefile' to compile the entire React application into a single HTML file, making it compatible with the MCP resource system.

MCP App Scaffolder

Name: MCP App Scaffolder
Author: hollaugo

byhollaugo

•

API 开发

Scaffolds full-stack Model Context Protocol (MCP) applications featuring interactive React-based visual UIs and Tailwind CSS styling.

This skill streamlines the creation of 'MCP Apps'—specialized MCP servers that render rich, interactive React components directly within AI interfaces like Claude and ChatGPT. It automates the complex setup of critical dependencies, Zod-based tool schemas, and Vite single-file bundling required for visual tool outputs. By providing a standardized structure for both the Express server and the frontend visualization layer, it enables developers to quickly build data dashboards, interactive charts, and custom UI tools that go beyond simple text-based AI responses.

主要功能

011 GitHub stars

02Native integration with @modelcontextprotocol/ext-apps for visual UI rendering

03Pre-configured Vite setup for single-file HTML bundling of UI components

04Automated project scaffolding with TypeScript, React, and Tailwind CSS

05Built-in support for host-aware CSS variables to match AI theme styles

06Zod-driven tool definitions for robust type safety and input validation

使用场景

01Building custom form-based tools for structured data entry within an LLM chat

02Creating interactive data visualization dashboards for real-time AI analysis

03Developing domain-specific visual explorers for APIs, databases, or metrics

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add hollaugo/prompt-circle-marketplace new-mcp-app

For use in Claude.ai and ChatGPT

Download Skill