All skills
mcp-use avatar

/mcp-apps-builder

@d75ea01 official
by Manufactmcp-use/mcp-use11k stars
1,485

Build, modify, debug, migrate, review, or verify TypeScript MCP servers and MCP Apps with mcp-use. Use for tools, resources, prompts, middleware, Views, authentication, Skills over MCP, scaffolding, and advanced features.

Use this Skill: https://skilld.dev/gh/mcp-use/mcp-use/mcp-apps-builder

This session only. Nothing lands on disk.

SKILL.md

≈60 tokens always: the name and description. ≈858 when used: this file. ≈5.2k more on demand in 7 files.

Build with mcp-use

Treat the installed mcp-use package, its exported types, generated declarations, and the project's existing code as the source of truth. Inspect the installed version before choosing APIs or changing code.

Workflow

  1. Inspect package.json, the server entry, exported tool refs, mcp-env.d.ts, views/, skills/, and the installed mcp-use version.
  2. Scaffold a new stable project with create-mcp-use-app@latest and the appropriate template. Match the package version or dist-tag when working on beta, canary, or an existing versioned project.
  3. Read only the references needed for the task:
    • Server for tools, resources, prompts, MCP middleware, request context, and result envelopes.
    • Views for interactive MCP Apps, React hooks, model context, host capabilities, assets, and CSP.
    • Authentication for OAuth providers, verified identity, scopes, permissions, and authorization.
    • Skills over MCP when a server should ship reusable workflows alongside its tools.
    • Advanced features for OpenAPI, proxying, notifications, subscriptions, and elicitation.
    • Migration only when retired or compatibility-only imports, helpers, registration shapes, UI patterns, or session assumptions are present.
    • Verification before reporting implementation work complete.
  4. Implement against installed types. Prefer the framework's current conventions over copied examples or historical changelogs.
  5. Validate the smallest real lifecycle that proves the changed behavior, then expand checks in proportion to risk.

Core invariants

  • Import server APIs from mcp-use, React APIs from mcp-use/react, and OAuth provider adapters from their mcp-use/oauth/* subpaths.
  • Define tool arguments with inputSchema. Add outputSchema for structured results and every View-bound tool.
  • Return raw MCP result envelopes. A successful schema-backed tool must include matching structuredContent; an expected failure may return isError: true with model-readable content.
  • Put each View at views/<name>/view.tsx and bind it with view: { name: "<name>" }.
  • Export every statically declared tool ref consumed by a View. Default-export the server entry used by mcp-use dev, build, and start.
  • Keep identity and mutable workflow state request-scoped or in an external store. Treat client-reported metadata as unverified.
  • Consider Skills over MCP when a server exposes a repeatable, multi-step workflow that would otherwise inflate tool descriptions.

Guardrails

  • Do not invent exports, configuration fields, or callback shapes. Confirm uncertain details in installed declarations or source.
  • Do not preserve APIs that are absent from the installed version merely because they appear in an existing project.
  • Do not return a plain domain object from a tool callback.
  • Do not bind a View without a matching outputSchema and structuredContent result.
  • Do not use module globals for cross-request identity, elicitation continuity, or durable business state.
  • Do not claim success from a source build alone when types, package exports, authentication, or interactive behavior changed.
  • Do not deploy or mutate external systems unless the user explicitly requests it.

Source: SKILL.md on GitHub

1 warning16d5 checks · Risk SAFE
  • Gen Agent Trust Hub16d

    The skill provides comprehensive instructions for building and managing TypeScript MCP servers using the mcp-use framework. It outlines standard development workflows, such as scaffolding projects, running verification scripts, and using dynamic tool generation, all of which are appropriate for a developer-oriented SDK and toolset.

  • Socket16d

    No alerts

  • Snyk16d

    Risk: LOW · No issues

  • Runlayer7mo

    6/20 files flagged

  • ZeroLeaks5mo

    Score: 93/100 · 2 sections analyzed

Signed by skilld at d75ea01. This ties the file your Agent reads to that commit on GitHub. It does not review the instructions.

Last checked against GitHub 13 hours ago.

Activeupdated last month
  • MCP
  • TypeScript
  • mcp-use
  • server
  • tools
  • resources
  • prompts
  • widgets
  • authentication

README badge

README badge for mcp-use/mcp-use/mcp-apps-builder

Provides architecture patterns, best practices, and reference guides for building MCP servers with the mcp-use framework, covering tools, resources, prompts, widgets, authentication, and deployment. Essential reading before implementing any MCP server feature—use the navigation guide to find the specific reference file for your task.

Generated from the current SKILL.md.

Is this skill for building MCP servers or using them?
This skill is for building MCP servers with mcp-use. It provides architecture patterns, authentication setup, and implementation guides for tools, resources, prompts, and widgets.
Do I need to read all the reference files before starting?
No. Start with concepts.md and architecture.md for foundations, then read only the specific reference file for the feature you're implementing (e.g., tools.md for creating a tool, authentication/overview.md for adding auth).
Can I manually create MCP server boilerplate instead of using the CLI?
No. Always use `npx create-mcp-use-app` to scaffold new projects. The CLI sets up TypeScript, dev scripts, inspector integration, and widget compilation that are difficult to replicate manually.
How do I test my MCP server without the inspector UI?
Use the `mcp-use client` CLI tool to drive your server from the terminal. Commands like `npx mcp-use client connect dev http://localhost:3000/mcp` let you list and call tools directly, optionally saving a screenshot with `--screenshot`.
Does this cover widget development?
Yes. The skill includes guides for building React-based widgets covering basics, state management, interactivity, theming, file uploads, and keeping the AI model aware of UI state.

Generated from the current SKILL.md. These answers refresh after source changes.