Token导航 LogoToken导航TokenDH.com
中转站排行榜
开发external-serviceclawhub未标认证来源可访问clear审计通过

mcp-app-builder（MCP 应用构建器）

Agent Skill

mcp-app-builder 用于辅助前端页面、组件、样式和交互逻辑开发，适合在 OpenClaw 中需要维护前端项目、生成组件或检查界面实现时使用。可结合来源仓库、安装命令和原始 README 继续核验具体用法。安装前建议确认权限范围、维护状态，以及是否会触发联网、命令执行或文件读写。

总安装

18,438

周安装

792

GitHub Stars

公开资料未说明

下载量

6,463
OpenClaw

安装说明

本站只整理中文说明和来源信息，不托管安装包，也不代用户安装。

GitHub

来源数

2

许可证

MIT-0

最后核验

2026-05-01

来源状态

来源可访问

安装方式

通过对话安装

复制提示词发给支持本地命令或 Skills 的 AI 助手，先确认命令和权限，再让它执行。

请帮我安装这个 Agent Skill：mcp-app-builder（MCP 应用构建器）
来源仓库：https://github.com/hollaugo/mcp-app-builder
安装命令：
openclaw skills install mcp-app-builder
安装前请先检查当前环境是否支持对应 CLI，并向我确认将要执行的命令、安装目录、联网范围和文件读写权限；确认后再执行。

命令行安装

复制命令到本机终端执行。该命令会通过 OpenClaw 从第三方来源获取 Skill；本站只展示命令，不托管安装包，也不自动执行。

ClawHubOpenClaw
openclaw skills install mcp-app-builder

简介

基于React UI构建MCP服务器的开发辅助工具。

  • 集成@modelcontextprotocol/ext-apps快速搭建应用。
  • 适合需要自定义工具链的开发者使用。mcp-app-builder 属于开发类 Skill，可作为该场景下的辅助能力补充。
  • 需具备Node.js环境与基础前端知识。
  • 生成的项目结构遵循MCP SDK规范要求。

SKILL.md

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

  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)

适合场景

01

OpenClaw 用户查找和安装 Skill 时

02

用户想查找某类 Agent Skill 时

03

需要根据任务场景推荐可安装能力包时

04

需要对比不同来源的安装命令和来源信息时

能力概览

能力 1

按任务关键词查找相关 Skills

能力 2

展示可复制的安装命令

能力 3

保留来源站点、仓库和原始说明，方便继续核验

能力 4

补充不同宿主或平台的使用分布数据

能力 5

展示第三方安全扫描或审计结果

安装后应在对应宿主中按原始 README 的触发条件使用；具体调用方式请以来源页面和 README 为准。

平台分布

OpenClaw

82.61%
按下载量换算5,339

安全审计

VirusTotal

通过

ClawScan

通过

Static analysis

未展示

权限和风险

external-service

该 Skill 可能调用第三方服务、云服务或外部模型 API，使用前需要确认账号、额度、数据发送范围和服务条款。

安装前确认

本站仅展示第三方公开信息，不托管安装包，不提供自动安装或运行环境。安装前应自行审查源码、依赖和命令行为。当前只有一个来源，正式发布前建议补源仓库或其他目录站核验。

来源信息

GitHub 仓库

github.com

/hollaugo/mcp-app-builder

SKILL.md 来源

clawhub.ai

/hollaugo/mcp-app-builder

继续浏览同类 Skills

更多开发 Skills（21,746）返回 Skills 目录

上一个 Skill

mcp-api-key-auth（MCP API KEY auth 文档）

用于辅助 API 设计、接口文档、请求响应结构和服务集成说明。它适合让 Agent 梳理 endpoint、生成 OpenAPI 草稿、检查字段命名、整理错误码或辅助前后端联调。使用时需要确认真实业务语义、鉴权方式、分页和错误处理规则；涉及生成接口文档时，应避免凭空补字段，最好从现有代码、schema 或接口样例中提取事实。

下一个 Skill

mcp-architecture-expert（MCP 架构 expert）

mcp-architecture-expert 用于处理 GitHub 仓库、Issue、Pull Request 和代码协作信息，适合在 Codex、Claude、Cursor、Gemini CLI 中需要围绕仓库状态、代码变更或协作事项进行整理时使用。可结合来源仓库、安装命令和原始 README 继续核验具体用法。安装前建议确认权限范围、维护状态，以及是否会触发联网、命令执行或文件读写。