Skip to main content
skill Claude Code CX Codex Cursor GitHub Copilot

mcp-apps-builder — Claude Code skill: what it does, install

Build, modify, debug, migrate, review, and verify TypeScript MCP servers and MCP Apps with mcp-use. Use it for tools, Views, OAuth, and Skills over MCP.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓
npx skills add mcp-use/mcp-use --skill mcp-apps-builder -a claude-code
Open on GitHub

What mcp-apps-builder does

This skill guides work on TypeScript MCP servers and MCP Apps built with mcp-use, from scaffolding through migration, review, and verification. It starts by inspecting package.json, the server entry, exported tool refs, mcp-env.d.ts, the views/ and skills/ directories, and the installed package version.

The workflow covers tools, resources, prompts, middleware, React Views, model context, host capabilities, OAuth, permissions, OpenAPI, proxying, notifications, subscriptions, and elicitation. New projects use create-mcp-use-app@latest; implementation details should come from installed types and declarations. For an existing project, check the mcp-use version before choosing APIs, since the skill does not preserve imports or registration shapes that are absent from that version.

Verification follows the smallest real lifecycle that proves the changed behavior. A View needs a matching outputSchema and structuredContent; server APIs come from mcp-use, React APIs from mcp-use/react, and OAuth adapters from mcp-use/oauth/*. Request identity and durable state must stay request-scoped or in an external store, rather than in module globals.

What it helps with

  • scaffold a TypeScript MCP server
  • add tools, resources, and prompts
  • bind a View to an MCP tool
  • migrate a project to its installed mcp-use version
  • verify OAuth and interactive behavior

Example prompts for the agent

  • Create a TypeScript MCP server with `create-mcp-use-app@latest`, matching the installed `mcp-use` version and template.
  • Review `views/<name>/view.tsx` and its bound tool. Check `outputSchema` and `structuredContent`, then fix any lifecycle issues.
  • Audit this MCP server for current imports, exported tool refs, request-scoped state, and OAuth configuration.

How to install mcp-apps-builder

1Skills CLI (Vercel)

npx skills add mcp-use/mcp-use --skill mcp-apps-builder -a claude-code

2Manually: put the files in place

~/.claude/skills/mcp-apps-builder/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/mcp-apps-builder/

Similar

gws-events-subscribe official googleworkspace The skill subscribes to Google Workspace events and streams them as NDJSON. Useful when an agent has to watch chats or other resources. Claude Code CX Codex Cursor +1 30,700installs gws-admin-reports official googleworkspace A skill that gives your agent the Admin SDK Reports API: audit logs and usage reports for a Google Workspace account. Claude Code CX Codex Cursor +1 30,600installs gws-script official googleworkspace A skill that gives coding agents the gws CLI for Google Apps Script. Create projects, read code, check metrics and run scripts. Claude Code CX Codex Cursor +1 26,300installs find-docs upstash Pulls up-to-date documentation, API references and code examples for any library through the Context7 CLI. Useful when the model's training data lags behind the API. Claude Code CX Codex Cursor +1 9,400installs gemini-api-dev official google-gemini Guides coding agents to write Gemini API code in Python and TypeScript using current SDKs, interaction endpoints, and active models. Claude Code CX Codex Cursor +1 25,100installs hindsight-docs vectorize-io This skill gives AI agents Hindsight documentation for architecture, APIs, configuration, and SDKs. Use it when adding Hindsight memory to an agent. Claude Code CX Codex Cursor +1 9,100installs mcp-builder official anthropics This skill walks through building an MCP server in TypeScript or Python, from reading the protocol spec to writing tests and evaluation questions. Claude Code Claude.ai 130,949installs google-agents-cli-adk-code official Google A reference skill for building ADK agents with tools, callbacks, state, and workflows. Use it when an agent project needs concrete API patterns or code examples. Claude Code CX Codex Cursor +1 511,400installs

Questions about mcp-apps-builder

How do I install `mcp-apps-builder` in Claude Code?

Run npx skills add mcp-use/mcp-use --skill mcp-apps-builder -a claude-code, run npx skills add mcp-use/mcp-use --skill mcp-apps-builder -a claude-code again, then check ~/.claude/skills/mcp-apps-builder/SKILL.md.

What does `mcp-apps-builder` do?

It helps build, modify, debug, migrate, review, and verify TypeScript MCP servers and MCP Apps with mcp-use. Its workflow covers tools, Views, OAuth, middleware, and Skills over MCP.

What should I check before choosing a `mcp-use` API?

Inspect the installed package version, exported types, and generated declarations first. The skill follows the current project APIs and does not retain imports that the installed version no longer provides.

Source text

SKILL.md · Apache-2.0
---
name: mcp-apps-builder
description: 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.
---

# 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](references/server.md) for tools, resources, prompts, MCP middleware, request context, and result envelopes.
   - [Views](references/views.md) for interactive MCP Apps, React hooks, model context, host capabilities, assets, and CSP.
   - [Authentication](references/auth.md) for OAuth providers, verified identity, scopes, permissions, and authorization.
   - [Skills over MCP](references/skills-over-mcp.md) when a server should ship reusable workflows alongside its tools.
   - [Advanced features](references/advanced-features.md) for OpenAPI, proxying, notifications, subscriptions, and elicitation.
   - [Migration](references/migration.md) only when retired or compatibility-only imports, helpers, registration shapes, UI patterns, or session assumptions are present.
   - [Verification](references/verification.md) 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.

© mcp-use · Apache-2.0 · mcp-use/mcp-use

See also

Project sponsors

Companies that keep this analytics open
Gold sponsor

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor