Skip to main content
skillsSource-backedReview first Safety Privacy

mcp-use MCP Apps Builder Skill

Agent Skill from mcp-use for building production MCP servers and MCP Apps with tools, resources, prompts, widgets, authentication, deployment, inspector testing, and framework-specific guardrails.

HarnessClaude CodeCodexWindsurfGeminiCursorCLI
Level:expertType:capability-packVerified:validated
Review first review before installing

Open the source and read safety notes before installing.

Safety notes

  • This skill guides agents through MCP server work that can expose tools, resources, prompts, widgets, middleware, auth flows, and remote deployment surfaces.
  • MCP tools can call external APIs, read or mutate local data, proxy other MCP servers, or trigger side effects depending on implementation.
  • Widget and MCP Apps work can render user-provided data in interactive UI surfaces; validate data and avoid trusting client-side state.
  • Authentication examples may involve OAuth, Supabase, Clerk, Auth0, WorkOS, Keycloak, custom auth, API keys, and session handling. Keep secrets in environment variables.
  • Deployment guidance can make a server reachable by external clients; review tool authority, CORS, auth, logging, rate limits, and observability before publishing.

Privacy notes

  • MCP Apps and servers may process prompts, tool arguments, API responses, user identity, OAuth scopes, logs, widget props, resources, and generated UI state.
  • The skill's reference files can lead agents to inspect local source, configs, package metadata, auth providers, deployment logs, and connected MCP server definitions.
  • Do not paste API keys, OAuth secrets, cookies, session tokens, production customer data, or private server URLs into prompts, examples, generated docs, issues, or PRs.
  • When using hosted deployment or inspector tools, review the retention policies for mcp-use, Manufact, MCP clients, model providers, and connected services.

Prerequisites

  • Node.js, npm or pnpm, and a workspace where an MCP server or MCP App can be scaffolded or edited.
  • A coding agent or skill host that can install Agent Skills from GitHub.
  • For TypeScript projects, familiarity with `mcp-use/server`, Zod schemas, resources, prompts, widgets, and the project package manager.
  • For Python projects, familiarity with the mcp-use Python SDK and the target transport.
  • For deployment work, an approved deployment target such as Manufact/mcp-use cloud, plus any required secrets, domains, OAuth clients, and environment variables.

Schema details

Install type
package
Reading time
8 min
Difficulty score
82
Troubleshooting
Yes
Breaking changes
No
Source repository stats
Scope
Source repo
Skill and platform metadata
Skill type
capability-pack
Skill level
expert
Verification
validated
Verified at
2026-06-18
Retrieval sources
https://github.com/mcp-use/mcp-usehttps://raw.githubusercontent.com/mcp-use/mcp-use/main/README.mdhttps://raw.githubusercontent.com/mcp-use/mcp-use/main/skills/mcp-apps-builder/SKILL.mdhttps://raw.githubusercontent.com/mcp-use/mcp-use/main/skills/mcp-apps-builder/references/foundations/architecture.mdhttps://raw.githubusercontent.com/mcp-use/mcp-use/main/skills/mcp-apps-builder/references/server/tools.mdhttps://raw.githubusercontent.com/mcp-use/mcp-use/main/skills/mcp-apps-builder/references/widgets/basics.mdhttps://www.skills.sh/mcp-use/mcp-use/mcp-apps-builder
Tested platforms
Claude CodeCodexCursorGeneric Agent Skills hosts
PlatformSupportInstall path
claude-codeNative.claude/skills/<skill-name>/SKILL.md
codexNative.agents/skills/<skill-name>/SKILL.md
windsurfNative.windsurf/skills/<skill-name>/SKILL.md
geminiNative.gemini/skills/<skill-name>/SKILL.md or .agents/skills/<skill-name>/SKILL.md
cursorAdapter.cursor/rules/<skill-name>.mdc
cliManualAGENTS.md or tool-specific context file
Full copyable content
npx skills add https://github.com/mcp-use/mcp-use --skill mcp-apps-builder

# Update installed skills
npx skills update

About this resource

mcp-use MCP Apps Builder Skill

mcp-use/mcp-use publishes mcp-apps-builder, an Agent Skill for building production-ready MCP servers and MCP Apps. It is written as a navigation guide: the skill tells coding agents which reference files to read before implementing tools, resources, prompts, widgets, authentication, deployment, or framework changes.

This is useful for Claude Code, Codex, Cursor, and other coding agents because MCP Apps work is easy to get subtly wrong: tool schemas, resource wiring, widget state, auth, deployment, and client compatibility all affect whether the final server is safe and usable.

Knowledge Freshness

The upstream repository is active and the skill is tied to current mcp-use SDK patterns. MCP Apps, ChatGPT Apps, Claude MCP clients, widget APIs, transport support, OAuth behavior, inspector behavior, and Manufact/mcp-use cloud deployment can change quickly.

Use the skill for workflow structure and mcp-use-specific guardrails, then check the current repository README, docs, SDK package versions, and reference files before generating or modifying production MCP code.

Retrieval Sources

This listing is grounded in:

  • The mcp-use/mcp-use repository README.
  • The upstream skills/mcp-apps-builder/SKILL.md file.
  • Representative reference files for architecture, tool implementation, and widget basics.
  • The public skills.sh listing for mcp-apps-builder.
  • Current GitHub repository metadata for mcp-use/mcp-use.

Core Workflow

Install the skill from the mcp-use repository:

npx skills add https://github.com/mcp-use/mcp-use --skill mcp-apps-builder

Update installed skills:

npx skills update

Then invoke it before MCP server work:

Use the mcp-use MCP Apps Builder Skill before modifying this MCP server.

The skill's first rule is to determine whether the workspace is already an mcp-use project. If a package imports from mcp-use/server or depends on mcp-use, it tells the agent to modify the existing project rather than scaffold a fresh app.

Capability Scope

The skill covers mcp-use MCP server and MCP Apps development:

Area What the skill routes agents to check
Project detection Existing mcp-use dependency/imports vs greenfield scaffold
Architecture Server structure, primitives, lifecycle, and production boundaries
Tools server.tool(), schemas, annotations, validation, and side effects
Resources Static resources, dynamic resources, resource templates, and references
Prompts Prompt templates, variables, and discovery behavior
Widgets MCP Apps UI resources, widget metadata, props, state, files, and theming
Responses Text, markdown, structured objects, widgets, mixed content, and errors
Proxying Composing or proxying MCP servers through mcp-use
Authentication OAuth and provider-specific patterns such as Supabase, Clerk, Auth0, WorkOS, Keycloak, and custom auth
Deployment Local inspector testing and production deployment through mcp-use/Manufact workflows
Anti-patterns Missing validation, excessive tool surfaces, state mistakes, unsafe auth, and poor error handling

Production Rules

Use this skill with MCP-specific change control:

  • Read the relevant reference files before editing server.tool(), server.resource(), server.prompt(), widget code, auth middleware, or deployment configuration.
  • Keep one tool per capability and give each tool a clear schema, description, and side-effect boundary.
  • Validate user input at the tool boundary with Zod or equivalent schema logic.
  • Keep widget state owned by the widget and pass only necessary props from tool responses.
  • Do not expose secrets, private URLs, OAuth client secrets, cookies, or tokens in generated config, docs, examples, prompts, screenshots, logs, or PR text.
  • Test locally with the mcp-use inspector before deployment.
  • Treat deployment as a security boundary: review auth, CORS, rate limits, logging, observability, and public tool authority before publishing.

Use Cases

  • Ask Codex to scaffold a new mcp-use server without mixing up tools, resources, prompts, and widgets.
  • Use Claude Code to add a widget-backed MCP App tool to an existing project.
  • Ask Cursor to review an MCP server for schema, validation, auth, and widget state mistakes.
  • Use an agent to convert a local prototype into a production-deployable MCP App with inspector testing and deployment notes.
  • Guide a code review for unsafe MCP tool surfaces, proxying behavior, auth gaps, or over-broad side effects.

Source Review

  • The repository README describes mcp-use as a fullstack MCP framework for building MCP Apps for ChatGPT and Claude, plus MCP servers for AI agents.
  • The README links directly to the mcp-apps-builder skill on skills.sh.
  • The skills.sh page provides the install command and identifies the repository as mcp-use/mcp-use.
  • The SKILL.md file states that agents should read it before creating, modifying, debugging, reviewing, or answering questions about MCP server work.
  • The skill routes agents to detailed reference files instead of relying on short examples in the entrypoint.
  • The architecture, tools, and widget reference files document production patterns beyond a generic prompt snippet.

Duplicate Review

Checked current content/skills/, content/mcp/, content/agents/, content/tools/, open pull requests, and repository-wide content for mcp-use/mcp-use, mcp-apps-builder, MCP Apps Builder Skill, mcp-use skill, mcp-builder, and openapi-to-mcp. Existing MCP capability-pack skills cover OAuth hardening, Streamable HTTP migration, server authoring security, and other general MCP topics, but no dedicated mcp-use MCP Apps Builder Skill entry, exact source URL duplicate, target file, or open duplicate PR was found.

Disclosure

Editorial listing. No paid placement or affiliate link is used. The skill lives in the mcp-use/mcp-use repository. The repository metadata reports MIT license for mcp-use, while this skill folder includes Apache-2.0 license text; verify the exact license file if redistributing bundled skill artifacts.

Source citations

Add this badge to your README

Show that mcp-use MCP Apps Builder Skill is listed on HeyClaude. Paste this Markdown into your README — it renders the badge and links back to this page.

Listed on HeyClaude
[![Listed on HeyClaude](https://heyclau.de/badge/skills/mcp-use-mcp-apps-builder-skill.svg)](https://heyclau.de/entry/skills/mcp-use-mcp-apps-builder-skill)

How it compares

mcp-use MCP Apps Builder Skill side by side with 3 alternatives on trust, install, platform support, and disclosed safety notes — all from reviewed registry metadata.

Fieldmcp-use MCP Apps Builder Skill

Agent Skill from mcp-use for building production MCP servers and MCP Apps with tools, resources, prompts, widgets, authentication, deployment, inspector testing, and framework-specific guardrails.

Open dossier
Anthropic Agent Skills

Anthropic's public Agent Skills repository for Claude, with example skills, document skills, the Agent Skills specification pointer, a template skill, Claude Code plugin installation, Claude.ai usage guidance, and Claude API skill creation references.

Open dossier
Dart Agent Skills

Official Dart team Agent Skills for AI coding agents working on Dart unit tests, CLI apps, coverage, runtime errors, mocks, package conflicts, static analysis, Native Assets, FFI, ffigen, and pattern matching.

Open dossier
Flutter Agent Skills

Official Flutter team Agent Skills for AI coding agents building Flutter apps, fixing layout issues, adding widget and integration tests, creating widget previews, applying layered architecture, routing, localization, JSON serialization, and HTTP workflows.

Open dossier
Trust
Install riskReview firstReview firstReview firstReview first
Notes Safety Privacy Safety Privacy Safety Privacy Safety Privacy
Categoryskillsskillsskillsskills
Sourcesource-backedsource-backedsource-backedsource-backed
Authormcp-useAnthropicDart TeamFlutter Team
Added2026-06-182026-06-182026-06-182026-06-18
Platforms
Claude CodeCodexWindsurfGeminiCursorCLI
Claude CodeCodexWindsurfGeminiCursorCLI
Claude CodeCodexWindsurfGeminiCursorCLI
Claude CodeCodexWindsurfGeminiCursorCLI
Source repo
Safety notesThis skill guides agents through MCP server work that can expose tools, resources, prompts, widgets, middleware, auth flows, and remote deployment surfaces. MCP tools can call external APIs, read or mutate local data, proxy other MCP servers, or trigger side effects depending on implementation. Widget and MCP Apps work can render user-provided data in interactive UI surfaces; validate data and avoid trusting client-side state. Authentication examples may involve OAuth, Supabase, Clerk, Auth0, WorkOS, Keycloak, custom auth, API keys, and session handling. Keep secrets in environment variables. Deployment guidance can make a server reachable by external clients; review tool authority, CORS, auth, logging, rate limits, and observability before publishing.The repository is explicitly presented as demonstration and educational material; behavior available in Claude products can differ from repository examples. Document skills can read, transform, and create files such as PDFs, Word documents, PowerPoint decks, and spreadsheets, so review generated artifacts before sharing or publishing them. The MCP builder skill guides agents through creating MCP servers and evaluations; generated servers still need security review, least-privilege tool design, authentication review, and transport testing. The skill creator workflow can generate instructions, scripts, references, and assets; review all generated resources before installing them into an agent host.Dart skills can modify source code, tests, pubspec dependencies, analysis options, generated mocks, coverage output, native hooks, FFI bindings, and package constraints. `dart fix --apply`, formatter runs, mock generation, build_runner, ffigen, and Native Assets hooks can create broad mechanical diffs; inspect changes before committing. Native Assets and FFI workflows may compile C/C++ code, run local toolchains, download precompiled binaries, and link dynamic or static libraries. Downloaded binaries should use cryptographic hash validation and offline fallbacks as the skill describes. Package conflict fixes can upgrade or downgrade dependencies and affect transitive package behavior across Dart and Flutter projects.Flutter skills can modify application code, tests, pubspec dependencies, routing, localization files, serialization code, architecture boundaries, and app entry points. Integration-test workflows may enable Flutter Driver extensions, add keys to widgets, launch apps through MCP tools, interact with running UI, and create driver scripts. Do not run device, emulator, browser, Firebase Test Lab, or network-backed integration tests against production services without explicit approval and test credentials. Architecture and routing changes can alter navigation, state management, API access, caching, offline behavior, and user-visible app flows. Use project-local conventions and Flutter version constraints before applying generated examples.
Privacy notesMCP Apps and servers may process prompts, tool arguments, API responses, user identity, OAuth scopes, logs, widget props, resources, and generated UI state. The skill's reference files can lead agents to inspect local source, configs, package metadata, auth providers, deployment logs, and connected MCP server definitions. Do not paste API keys, OAuth secrets, cookies, session tokens, production customer data, or private server URLs into prompts, examples, generated docs, issues, or PRs. When using hosted deployment or inspector tools, review the retention policies for mcp-use, Manufact, MCP clients, model providers, and connected services.Skill usage can expose documents, spreadsheets, slide decks, prompts, company workflows, brand guidelines, MCP designs, API details, and generated artifacts to Claude or the configured model/runtime. Do not upload or commit customer documents, regulated data, private brand assets, secrets, credentials, or unreleased business plans unless the environment and account policy allow that data. When creating custom skills, check bundled scripts, references, and assets for private data before sharing a repository, plugin, or ZIP archive.Dart projects may contain private package names, API schemas, service URLs, test fixtures, generated mocks, coverage paths, stack traces, native library names, and build logs. Runtime-error workflows can expose stack traces, local paths, active app state, logs, and user-input data from the running program. FFI and Native Assets workflows may include proprietary C/C++ source, platform-specific build settings, binary hashes, and downloaded artifact URLs. Keep credentials, private package registries, source paths when sensitive, proprietary native code, test data, and generated coverage reports out of public prompts, issues, PRs, and examples.Flutter projects may contain API URLs, Firebase project IDs, mobile bundle IDs, analytics keys, user fixtures, screenshots, test traces, device logs, crash output, and integration-test artifacts. MCP app exploration can expose widget trees, screen text, test data, typed inputs, navigation paths, and screenshots from the running app. HTTP, JSON, localization, and repository-layer work may touch private API schemas, user data models, translations, product copy, and backend payloads. Keep credentials, private endpoints, screenshots with user data, device logs, Firebase tokens, and proprietary UI flows out of public prompts, issues, PRs, and examples.
Prerequisites
  • Node.js, npm or pnpm, and a workspace where an MCP server or MCP App can be scaffolded or edited.
  • A coding agent or skill host that can install Agent Skills from GitHub.
  • For TypeScript projects, familiarity with `mcp-use/server`, Zod schemas, resources, prompts, widgets, and the project package manager.
  • For Python projects, familiarity with the mcp-use Python SDK and the target transport.
  • Claude Code for plugin marketplace installation, Claude.ai paid plan access for built-in/example skill usage, or Claude API access for programmatic skill creation.
  • A target task where a demonstration skill, document skill, MCP builder workflow, skill creator workflow, or custom skill template is appropriate.
  • Review of the repository disclaimer and license/source-availability notes before relying on a skill in production.
  • Local testing for any copied or customized skill before using it on sensitive documents, production workflows, or customer data.
  • Dart SDK and project-local tooling installed for the package being edited.
  • An AI coding assistant or skill host compatible with Agent Skills, preferably using the standard `.agents/skills` install target.
  • Project `pubspec.yaml`, `analysis_options.yaml`, test structure, package constraints, and platform targets available before modifying code.
  • For FFI or Native Assets work, compatible host compiler toolchains, package hooks, native source, binding generation configuration, and platform targets.
  • Flutter SDK and Dart tooling installed for the target project.
  • An AI coding assistant or skill host compatible with Agent Skills, preferably using the standard `.agents/skills` install target.
  • Project-specific Flutter targets, devices, emulators, browsers, test commands, and package constraints available before modifying app code.
  • For MCP-assisted testing or UI exploration, access to the Dart/Flutter MCP server or equivalent app interaction tools.
Install
npx skills add https://github.com/mcp-use/mcp-use --skill mcp-apps-builder
/plugin marketplace add anthropics/skills
npx skills add dart-lang/skills --skill '*' --agent universal --yes
npx skills add flutter/skills --skill '*' --agent universal --yes
Config
Citations
ClaimUnclaimedUnclaimedUnclaimedUnclaimed

Signals

Loading live community signals…

More like this, weekly

A short, calm digest of reviewed Claude resources. Unsubscribe any time.