Guide · Agent skill
How to use the MCP App Builder Guide agent skill (mcp-apps-builder)
Updated · written with AI from the project's own documentation and checked against our catalogue data
The mcp-apps-builder skill is a set of instructions and reference files that teaches an AI agent how to build MCP (Model Context Protocol) servers with the mcp-use TypeScript framework. Once installed, the agent checks your project, scaffolds one if needed, and reads the matching reference file before writing code. This guide covers what the skill does, how to install it, how to trigger it, and what to check before you trust its output.
MCP App Builder GuideShubhamsaboo/awesome-llm-apps · Apache-2.0 Download the skill Quick start
- 1Download the ZIP. Get the mcp-apps-builder skill ZIP from this page.
- 2Unzip the skill. Unzip it into ~/.claude/skills/ for personal use, or into a project's .claude/skills/ folder.
- 3Or upload it in the Claude apps. Go to Settings → Capabilities → Skills and upload the skill there.
- 4Check your environment. Make sure Node.js and npm are installed, since the skill uses npx for new projects.
- 5Make an MCP request. Ask the agent in plain language to create or change an MCP server using mcp-use.
- 6Review the output. Read the code and commands the agent proposes, especially any auth or env var changes, before running them.
What the skill makes the agent do
The skill is a navigation guide and reference library. Its main file, SKILL.md, tells the agent to read it first, then open the specific reference file for the feature being built. The skill covers tools, resources, prompts, authentication, deployment and widgets.
Before writing code, the agent checks whether you are inside an existing mcp-use project by looking for a package.json that lists "mcp-use" as a dependency, or a .ts file that imports from "mcp-use/server". If there is no project, it scaffolds one. If you are in an unrelated project, the skill says the agent should ask where to create the server.
- Checks for an existing mcp-use project before doing anything else
- Scaffolds a new project when none exists
- Reads the matching reference file (for example tools.md, workos.md or widgets) before implementing a feature
- Follows the patterns in those files rather than writing MCP boilerplate by hand
Install the skill from the ZIP
Download the ZIP for this skill from this page and unzip it. The skill folder must end up in one of two places: your personal skills folder at ~/.claude/skills/, or a project-level .claude/skills/ folder inside the project where you want it used.
Alternatively, you can upload the skill in the Claude apps under Settings → Capabilities → Skills.
- Personal install: unzip into ~/.claude/skills/
- Project install: unzip into the project's .claude/skills/ folder
- Claude apps: Settings → Capabilities → Skills, then upload the skill
How to trigger the skill with natural requests
You do not need a special command. The skill's description says it applies to any MCP server work, so ordinary requests should load it. Name the MCP task clearly so the agent knows the scope.
Requests that match the skill include creating a new MCP server, adding or changing a tool, resource, prompt or widget, debugging an MCP server error, reviewing MCP server code, and asking questions about mcp-use patterns.
- "Create a new MCP server with mcp-use that exposes a weather tool."
- "Add a tool called send-invoice to my MCP server."
- "Add WorkOS OAuth to my MCP server so the tools know who the user is."
- "Why is my server.resource() call failing?"
- "Review my MCP server for security issues in the auth code."
Scaffold a new project
When the agent creates a new server, the skill directs it to run the create-mcp-use-app scaffolding tool rather than writing package.json and TypeScript config by hand. The skill notes that the CLI sets up TypeScript config, dev scripts, inspector integration, hot reload and widget compilation. You need Node.js and npm installed for this step.
- Requires Node.js and npm
- The skill runs the CLI through npx
- The quickstart reference covers full scaffolding details and CLI flags
npx create-mcp-use-app my-server
cd my-server
npm run devUse it for authentication
For OAuth, the skill points to an overview file and then a provider-specific file. The source recommends WorkOS and Supabase, which it says have been fully tested with the MCP Inspector and support Dynamic Client Registration. A custom provider option covers other OIDC-compliant providers, but the source warns that providers without Dynamic Client Registration need a pre-registered client_id, or the OAuth flow can stall silently.
Auth needs developer review. The agent handles tokens and environment variables, and those details should be checked by hand.
- WorkOS: setup, env vars, roles and permissions
- Supabase: setup, env vars, HS256 vs ES256, RLS-aware API calls
- Custom: any other provider such as GitHub, Okta, Azure AD or Google
Safety notes: scripts and network access
This skill runs scripts and uses the network. The scaffolding step executes npx create-mcp-use-app, and authentication setup involves provider accounts and API keys. Read the commands the agent proposes before approving them, and keep secrets out of source files.
The skill is licensed under Apache-2.0, and its LICENSE.txt is included in the package.
- Review every npx and npm command before it runs
- Keep API keys and tokens in environment variables, not in code
- Have a developer check auth, token and env var handling before production use
Tips for getting good results
Ask the agent to read the relevant reference file first, since the skill's own examples are minimal. Start with a small server and a mock-data version of each tool before connecting real services. The skill's core principles favour tools for actions, resources for read-only data, prompts for templates and widgets for UI.
- Name the feature you want, such as tools, OAuth or widgets, so the right reference loads
- Start with mock data, as the skill recommends, then connect real services
- Use the deployment reference when you are ready to host the server
What people use it for
- Scaffolding a new mcp-use TypeScript server with a first tool
- Adding WorkOS, Supabase or custom OAuth to an existing MCP server
- Adding a read-only resource or a reusable prompt template to a server
- Building an interactive widget that a tool can display
- Debugging or reviewing an MCP server for consistent mcp-use patterns
Frequently asked questions
How do I install the mcp-apps-builder skill?
Download the ZIP from this page and unzip it into ~/.claude/skills/ for personal use, or into a project's .claude/skills/ folder. You can also upload it in the Claude apps under Settings → Capabilities → Skills.
What do I need to use this skill?
The source lists Node.js and npm, since the skill runs npx create-mcp-use-app for new projects, plus the mcp-use framework. Optional accounts for WorkOS, Supabase or another identity provider are needed only for authentication.
Is the mcp-apps-builder skill free?
The skill is licensed under Apache-2.0, and its LICENSE.txt is included in the files. The source does not list prices, so check this page for any other terms.
Does this skill work with other MCP SDKs?
No. The source says the patterns and APIs target the mcp-use framework specifically, so projects using a different MCP SDK will not get accurate guidance.
Why won't the agent scaffold my project?
The skill only scaffolds when no mcp-use project is found. If you are already inside an mcp-use project, the agent adds features to it. If you are inside an unrelated project, the skill says the agent should ask where to create the server.
Is the code it writes safe to deploy?
The source warns that the agent may follow the reference patterns imperfectly. Auth, tokens and env vars should be checked by a developer before production use.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Use this skill if you are building MCP servers with the mcp-use TypeScript framework and want an agent to follow consistent patterns for tools, resources, widgets and OAuth. Pick something else if you use a different MCP SDK, or if you need a general coding assistant for unrelated work.
Download the skill