Run any Skill in Manus with one click

mcp-app-builder

Stars0

Forks1

UpdatedFebruary 16, 2026 at 03:29

Build new MCP Apps (MCP servers with React UI output) using @modelcontextprotocol/ext-apps and the MCP SDK. Use when asked to scaffold or implement MCP App servers, add UI-rendering tools/resources, or migrate a standard MCP server to an MCP App with Vite single-file UI bundles.

Installation

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

Run Skill in Manus

Source

hollaugo

hollaugo/prompt-circle-skills

View GitHub Repository View Creator Repositories

Download

Run Skill in Manus

Related occupationsSOC

Based on SOC occupation classification

Software DevelopersComputer and Mathematical Occupations·SOC 15-1252

File Explorer

14 files

SKILL.md

readonly

name	mcp-app-builder
description	Build new MCP Apps (MCP servers with React UI output) using @modelcontextprotocol/ext-apps and the MCP SDK. Use when asked to scaffold or implement MCP App servers, add UI-rendering tools/resources, or migrate a standard MCP server to an MCP App with Vite single-file UI bundles.

MCP App Builder

Overview

Create MCP Apps that expose tools with visual React UIs for ChatGPT or Claude. Follow the exact dependency versions and server/UI patterns in references/mcp-app-spec.md.

Workflow

Clarify requirements: what data to visualize, UI pattern (card, table, chart, dashboard, form), data source, and how many tools (start with 1-2).
Design tools and UI mapping: define tool names, zod input schemas, output shape, and UI resource URIs (ui://.../app.html). Map each tool to one React entrypoint and one HTML file.
Scaffold the project: start from assets/mcp-app-template/ when possible, then customize tool names, schemas, and UI. Ensure package.json uses the exact versions, plus tsconfig.json, vite.config.ts, Tailwind + PostCSS, and per-tool build scripts.
Implement the server: use registerAppTool/registerAppResource, zod schemas directly, createServer() factory per request, and createMcpExpressApp with app.all("/mcp", ...).
Implement the UI: use useApp + useHostStyles, parse tool results, handle loading/error/empty states, and apply safe-area insets.
Build and test: run npm run build, then npm run serve, then verify via a tunnel if needed.

Hard Requirements

Use the exact dependency versions listed in references/mcp-app-spec.md.
Use registerAppTool/registerAppResource and zod schemas directly (not JSON Schema objects).
Create a new McpServer instance per request via createServer().
Use createMcpExpressApp and app.all("/mcp", ...).
Bundle UI into single-file HTML via vite-plugin-singlefile.
Use host CSS variables for theme compatibility.

References

references/mcp-app-spec.md (authoritative spec, patterns, code templates, gotchas)

Assets

assets/mcp-app-template/ (ready-to-copy MCP App skeleton with one tool + UI)

More from this repository

same repository

website-manager

hollaugo/prompt-circle-skills

Create, recreate, redesign, publish, and operate websites managed from Notion, including blogs, CMS-driven sections, widgets, filtering/search interactions, SEO/AEO/GEO improvements, and lightweight deployment workflows. Use when a user wants one skill that can both build and manage a website over time, with OpenClaw-friendly automation but no hard dependency on OpenClaw-specific tooling.

2026-04-010

shopify-pilot

hollaugo/prompt-circle-skills

Connect OpenClaw to the Shopify Admin API and run agent-driven store workflows. Covers authentication setup (client credentials grant), token management, and eight ready-to-run use cases: PDP rewrite, weekly store digest, competitive intelligence, abandoned cart recovery, flash sale planner, low stock alert, customer VIP report, and product launch prep. Use this skill when the user asks about connecting OpenClaw to Shopify, automating any Shopify store task, setting up Shopify API credentials, or running any of the eight use cases.

2026-03-180

business-flow-diagrams

hollaugo/prompt-circle-skills

Create professional, presentation-ready Excalidraw diagrams for business flows, system architectures, pipelines, and process maps using the official excalidraw/excalidraw-mcp server. Use this skill whenever the user asks to draw, diagram, visualize, map, or create any kind of flowchart, architecture, process flow, pipeline, or workflow. Default output is the interactive Excalidraw MCP result and a shareable/openable Excalidraw link when the server or client surfaces one.

2026-03-070

accounting-reconciliation

hollaugo/prompt-circle-skills

Reusable accounting and tax-prep workflow for OpenClaw that performs weekly invoice reconciliation from email, monthly Stripe income reconciliation, jurisdiction-aware tax preparation support, Supabase data persistence, external file storage with Google Drive as the recommended backend, and on-demand reporting without hardcoded business identifiers.

2026-03-070

crm-inbound-orchestrator

hollaugo/prompt-circle-skills

Hourly CRM inbound orchestrator for three inboxes using Notion-synced SOP, strict business-lead filtering, Supabase persistence, and actionable-only Slack reporting.

2026-02-280

openclaw-manager

hollaugo/prompt-circle-skills

Deploy, harden, and operate OpenClaw across local and hosted environments (Fly.io, Render, Railway, Hetzner, GCP) with secure defaults, channel setup guidance, integration onboarding, and troubleshooting workflows grounded in official OpenClaw documentation. Use when users need install/deploy help, migration support, runtime hardening, memory/agent operations tuning, or incident response.

2026-02-270

name	mcp-app-builder
description	Build new MCP Apps (MCP servers with React UI output) using @modelcontextprotocol/ext-apps and the MCP SDK. Use when asked to scaffold or implement MCP App servers, add UI-rendering tools/resources, or migrate a standard MCP server to an MCP App with Vite single-file UI bundles.

MCP App Builder

Overview

Create MCP Apps that expose tools with visual React UIs for ChatGPT or Claude. Follow the exact dependency versions and server/UI patterns in references/mcp-app-spec.md.

Workflow

Clarify requirements: what data to visualize, UI pattern (card, table, chart, dashboard, form), data source, and how many tools (start with 1-2).
Design tools and UI mapping: define tool names, zod input schemas, output shape, and UI resource URIs (ui://.../app.html). Map each tool to one React entrypoint and one HTML file.
Scaffold the project: start from assets/mcp-app-template/ when possible, then customize tool names, schemas, and UI. Ensure package.json uses the exact versions, plus tsconfig.json, vite.config.ts, Tailwind + PostCSS, and per-tool build scripts.
Implement the server: use registerAppTool/registerAppResource, zod schemas directly, createServer() factory per request, and createMcpExpressApp with app.all("/mcp", ...).
Implement the UI: use useApp + useHostStyles, parse tool results, handle loading/error/empty states, and apply safe-area insets.
Build and test: run npm run build, then npm run serve, then verify via a tunnel if needed.

Hard Requirements

Use the exact dependency versions listed in references/mcp-app-spec.md.
Use registerAppTool/registerAppResource and zod schemas directly (not JSON Schema objects).
Create a new McpServer instance per request via createServer().
Use createMcpExpressApp and app.all("/mcp", ...).
Bundle UI into single-file HTML via vite-plugin-singlefile.
Use host CSS variables for theme compatibility.

References

references/mcp-app-spec.md (authoritative spec, patterns, code templates, gotchas)

Assets

assets/mcp-app-template/ (ready-to-copy MCP App skeleton with one tool + UI)