← 返回 Skills 市场
Mcp App Builder
作者
Prompt Circle
· GitHub ↗
· v0.1.0
607
总下载
0
收藏
2
当前安装
1
版本数
在 OpenClaw 中安装
/install 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...
使用说明 (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
- 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. Ensurepackage.jsonuses the exact versions, plustsconfig.json,vite.config.ts, Tailwind + PostCSS, and per-tool build scripts. - Implement the server: use
registerAppTool/registerAppResource, zod schemas directly,createServer()factory per request, andcreateMcpExpressAppwithapp.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, thennpm 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/registerAppResourceand zod schemas directly (not JSON Schema objects). - Create a new
McpServerinstance per request viacreateServer(). - Use
createMcpExpressAppandapp.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)
安全使用建议
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.
功能分析
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.
能力评估
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.
如何使用
- 确保已安装 OpenClaw（本地或 Docker 部署）
- 在对话框中输入安装命令：
/install mcp-app-builder - 安装完成后，直接呼叫该 Skill 的名称或使用
/mcp-app-builder触发 - 根据 Skill 的参数说明提供必要输入，即可获得结构化输出
版本历史
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.
元数据
常见问题
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... 它是一个面向 Claude Code / OpenClaw 的 AI Agent Skill 插件，目前累计下载 607 次。
如何安装 Mcp App Builder？
在 OpenClaw 或 Claude Code 对话框中运行命令「/install mcp-app-builder」即可一键安装，无需额外配置。
Mcp App Builder 是免费的吗？
是的，Mcp App Builder 完全免费（开源免费），可自由下载、安装和使用。
Mcp App Builder 支持哪些平台？
Mcp App Builder 跨平台运行，可在任意部署了 OpenClaw / Claude Code 的环境中使用（cross-platform）。
谁开发了 Mcp App Builder？
由 Prompt Circle（@hollaugo）开发并维护，当前版本 v0.1.0。
推荐 Skills