skills.rest
23wj1a0541
23wj1a0541COMMUNITY
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#server#widgets#mcp-use
One-click install
npx skills add https://github.com/23wj1a0541/L.E.N.S --skill mcp-apps-builder-23wj1a0541
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: mcp-apps-builder
Source: https://github.com/23wj1a0541/L.E.N.S/tree/main/.cursor/skills/mcp-apps-builder
Command: npx skills add https://github.com/23wj1a0541/L.E.N.S --skill mcp-apps-builder-23wj1a0541

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 structured guidance. ## Core Features & Use Cases - Project Scaffolding & Foundations: Detects existing mcp-use projects, scaffolds new ones with create-mcp-use-app, and explains server architecture, middleware, and deployment. - Server Primitive Guidance: Provides reference patterns for tools, resources, prompts, response helpers, proxying, and OAuth authentication via WorkOS, Supabase, or custom providers. - Widget Development: Covers React-based widgets including state management, interactivity with useCallTool, theming, model context, file uploads, and advanced performance patterns. - Use Case: When asked to add a new tool with an interactive UI to an MCP server, the skill directs you to the tools and widget references so you implement typed schemas, isPending handling, and McpUseProvider correctly. ## Quick Start Ask the agent to create a new MCP server with a weather tool and an interactive widget using the mcp-use framework.

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?▼

Run npx create-mcp-use-app my-server, then cd into the directory and run npm run dev. The CLI sets up TypeScript config, dev scripts, inspector integration, hot reload, and widget compilation, so you should never hand-write boilerplate.

How do I add an interactive widget to an MCP tool?▼

Define a tool with a widget config pointing to a component in the resources directory, return widget() with props from the handler, and export widgetMetadata with a Zod props schema. Always check isPending before accessing props and wrap the root in McpUseProvider with autoSize.

Does mcp-use support OAuth authentication?▼

Yes, mcp-use supports OAuth through the oauth server config with providers like WorkOS AuthKit and Supabase, plus custom providers such as GitHub, Okta, or Google. Authenticated user context is available via ctx.auth in tools and middleware.

Why is my widget props type inferred as unknown in TypeScript?▼

Type inference fails when the Zod schema is defined inline inside widgetMetadata, because WidgetMetadata is generic. Extract the schema into a separate constant, reference it in widgetMetadata, then use z.infer on that constant and pass the type to useWidget<Props>().

When should I use a tool versus a resource versus a widget?▼

Use tools for backend actions the AI can call, resources for read-only data clients fetch, prompts for reusable message templates, and widgets for visual interfaces when browsing, comparing, or selecting data benefits from UI.

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

The skill's deployment reference covers deploying to Manufact Cloud, self-hosting, and Docker. For production, configure CORS, use environment variables for secrets instead of hardcoding keys, and add error handling in tool handlers.

Related Skills

Explore More Software Engineering Skills→
rebyteai-templaterebyteai-template
15

nextjs-supabase

Set up a Next.js application with Supabase authentication and database.

Official
Intermediate
Lubu-LabsLubu-Labs
101

langsmith-deployment

Deploy LangGraph agents via LangSmith Deployment across cloud, hybrid, and standalone environments.

Official
Advanced
Hashzin-0Hashzin-0

tool-creator

Create secure MCP tools with Pydantic validation, sanitization, rate limiting, and audit logging.

Community
Advanced
AvaTar-ArTsAvaTar-ArTs

build-mcp-app

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

Community
Advanced