skills.rest
diegoc1005
diegoc1005COMMUNITY
Explore all skills by this author →
GitHub

mcp-apps-builder

Guides building MCP servers with tools, resources, prompts, and React widgets using mcp-use.

Updated May 9, 2026
Search Tags:#typescript#react#oauth#mcp#mcp server#widgets#mcp-use
One-click install
npx skills add https://github.com/diegoc1005/hackAI --skill mcp-apps-builder-diegoc1005
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: mcp-apps-builder
Source: https://github.com/diegoc1005/hackAI/tree/main/.cursor/skills/mcp-apps-builder
Command: npx skills add https://github.com/diegoc1005/hackAI --skill mcp-apps-builder-diegoc1005

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires mcp-use, zod, and includes references (resource) components.

What problem does it solve? Building production-ready MCP servers with the mcp-use framework involves many architectural decisions, security patterns, and common pitfalls that are easy to get wrong without guidance. ## Core Features & Use Cases - Structured Navigation: A decision tree and quick navigation map route you to the right reference file for tools, resources, prompts, widgets, authentication, middleware, and deployment. - Best Practices & Anti-Patterns: Codified golden rules (one tool per capability, widgets own their state, response helpers) plus common mistakes to avoid in tool definitions, widget development, and production security. - Widget Development Guidance: Detailed references for React-based widgets covering useWidget(), isPending handling, theming, interactivity via useCallTool(), and advanced patterns like virtualization and error boundaries. - Use Case: When asked to add an OAuth-protected tool with an interactive product-list widget to an MCP server, consult this skill to scaffold correctly, apply Zod schema typing, and follow security guidelines. ## Quick Start Ask the AI to create a new MCP server with a weather tool and widget using the mcp-apps-builder skill.

Frequently Asked Questions about mcp-apps-builder

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a new MCP server with mcp-use?▼

Scaffold a new project with npx create-mcp-use-app my-server, then run npm run dev. Never hand-write MCPServer boilerplate or package.json, since the CLI configures TypeScript, hot reload, inspector integration, and widget compilation.

How do I add a widget to an MCP tool in mcp-use?▼

Define the tool with a widget config naming a component in resources/, return widget({ props, output }) from the handler, and create a React component exporting widgetMetadata with a Zod props schema. Wrap the widget in McpUseProvider and check isPending before accessing props.

Why is my mcp-use widget props undefined or throwing errors?▼

Widgets render before the tool finishes, so props is an empty object while isPending is true. Always return a loading state when isPending is true before accessing any props fields.

Does mcp-use support OAuth authentication for MCP servers?▼

Yes, mcp-use supports OAuth via WorkOS AuthKit, Supabase, or custom providers like GitHub, Okta, and Google. Configure the oauth option on the server and access user context through ctx.auth in handlers and middleware.

When should I use a tool versus a widget in MCP server development?▼

Use tools for backend actions and data operations, and add widgets when users benefit from browsing, comparing, or interactively selecting data visually. Widgets manage their own UI state with useState rather than separate state tools.

How do I deploy an mcp-use MCP server to production?▼

Deploy to Manufact Cloud, self-host, or use Docker as covered in the deployment reference. Configure CORS, store secrets in environment variables, and add error handling and caching before going live.

Related Skills

Explore More Software Engineering Skills→
shareAI-labshareAI-lab
73.6k

mcp-builder

Create Python or TypeScript MCP servers exposing tools, resources, and prompts.

Official
Intermediate
CopilotKitCopilotKit
7

mcp-apps-builder

Guides building MCP servers with tools, resources, prompts, and React widgets using mcp-use.

Official
Advanced
luxuialuxuia

editor-ui

Create Unity Editor interfaces with reusable themed UI components.

Community
Intermediate
AvaTar-ArTsAvaTar-ArTs

build-mcp-app

Build MCP servers that serve interactive UI widgets rendered inline in chat hosts.

Community
Advanced