← Back to Skills Marketplace
hollaugo

Mcp App Builder

by Prompt Circle · GitHub ↗ · v0.1.0
cross-platform ✓ Security Clean
607
Downloads
0
Stars
2
Active Installs
1
Versions
Install in OpenClaw
/install 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 s...
README (SKILL.md)

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

  1. Clarify requirements: what data to visualize, UI pattern (card, table, chart, dashboard, form), data source, and how many tools (start with 1-2).
  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.
  3. 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.
  4. Implement the server: use registerAppTool/registerAppResource, zod schemas directly, createServer() factory per request, and createMcpExpressApp with app.all("/mcp", ...).
  5. Implement the UI: use useApp + useHostStyles, parse tool results, handle loading/error/empty states, and apply safe-area insets.
  6. 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)
Usage Guidance
This appears to be a legitimate MCP App scaffolding template. Before installing or running it: (1) review and, if desired, pin/verify the npm dependencies in package.json (trust the @modelcontextprotocol packages used); (2) run builds and the server locally first — the template serves local HTML from the dist/ directory; (3) be cautious if you follow the instructions to expose your dev server with a tunnel (e.g., cloudflared) because that makes your local service publicly reachable; and (4) there are no secret env vars requested, but audit any added code or third-party packages you install from npm for supply-chain risk.
Capability Analysis
Type: OpenClaw Skill Name: mcp-app-builder Version: 0.1.0 The skill bundle provides a template and detailed instructions for building an MCP App. All code and documentation (including SKILL.md and references/mcp-app-spec.md) are aligned with this stated purpose. There is no evidence of intentional harmful behavior such as data exfiltration, malicious execution, persistence mechanisms, or prompt injection attempts against the agent. File system and network operations (e.g., `fs.readFile` for UI bundles, `app.listen` for the server) are standard for a web application and confined to the skill's legitimate function.
Capability Assessment
✓ Purpose & Capability
Name/description match the included assets and SKILL.md: a runnable MCP App template (server + single-file React UI) and an authoritative spec. Required files, dependencies, and patterns (registerAppTool/registerAppResource, createServer(), createMcpExpressApp, vite single-file) are coherent with the stated goal; no unrelated credentials, binaries, or config paths are requested.
ℹ Instruction Scope
Instructions are narrowly focused on scaffolding, implementing, building, and serving MCP Apps using the provided template and exact dependency versions. They read local project files (e.g., serving built HTML from dist/) and suggest optionally exposing the local server via a tunnel (cloudflared) for testing — that exposure is operationally risky if done insecurely but is not itself malicious. The SKILL.md does not instruct reading secrets or arbitrary host files.
✓ Install Mechanism
No install spec is included (instruction-only), and the template relies on standard npm/tsx tooling declared in package.json. There are no download URLs or archives that would write arbitrary code at install time.
✓ Credentials
The skill declares no required environment variables or credentials. The code uses non-secret env values (PORT and build INPUT) only. There are no requests for unrelated tokens/keys or access to other skill configs.
✓ Persistence & Privilege
always is false, the skill is user-invocable and may be invoked autonomously (platform default). It does not request permanent presence, nor does it modify other skills or system-wide settings.
How to Use
  1. Make sure OpenClaw is installed (local or Docker)
  2. Run the install command in chat: /install mcp-app-builder
  3. After installation, invoke the skill by name or use /mcp-app-builder
  4. Provide required inputs per the skill's parameter spec and get structured output
Version History
v0.1.0
Initial release of mcp-app-builder. - Provides a detailed workflow for scaffolding MCP Apps with React UI using @modelcontextprotocol/ext-apps and the MCP SDK. - Enforces strict requirements for dependency versions and server/UI structure following mcp-app-spec.md. - Includes guidance for server and UI implementation, testing, and theming. - Supplies reference templates and assets to speed up app development.
Metadata
Slug mcp-app-builder
Version 0.1.0
License —
All-time Installs 2
Active Installs 2
Total Versions 1
Frequently Asked Questions

What is Mcp App Builder?

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 s... It is an AI Agent Skill for Claude Code / OpenClaw, with 607 downloads so far.

How do I install Mcp App Builder?

Run "/install mcp-app-builder" in the OpenClaw or Claude Code chat to install it in one step — no extra setup required.

Is Mcp App Builder free?

Yes, Mcp App Builder is completely free (open-source). You can download, install and use it at no cost.

Which platforms does Mcp App Builder support?

Mcp App Builder is cross-platform and runs anywhere OpenClaw / Claude Code is available (cross-platform).

Who created Mcp App Builder?

It is built and maintained by Prompt Circle (@hollaugo); the current version is v0.1.0.

More Skills
self-improving agent
Captures learnings, errors, and corrections to enable continuous improvement. Use when: (1) A command or operation fails unexpectedly, (2) User corrects Clau...
⬇ 463283 · by pskoett
Skill Vetter
Security-first skill vetting for AI agents. Use before installing any skill from ClawdHub, GitHub, or other sources. Checks for red flags, permission scope, and suspicious patterns.
⬇ 259410 · by spclaudehome
Polymarket
Query Polymarket prediction markets. Check odds, find trending markets, search events, track price movements.
⬇ 232503 · by joelchance
Self-Improving + Proactive Agent
Self-reflection + Self-criticism + Self-learning + Self-organizing memory. Agent evaluates its own work, catches mistakes, and improves permanently. Use when...
⬇ 200423 · by ivangdavila
Github
Interact with GitHub using the `gh` CLI. Use `gh issue`, `gh pr`, `gh run`, and `gh api` for issues, PRs, CI runs, and advanced queries.
⬇ 191115 · by steipete
ontology
Typed knowledge graph for structured agent memory and composable skills. Use when creating/querying entities (Person, Project, Task, Event, Document), linkin...
⬇ 190156 · by oswalpalash

💬 Comments