skills.rest
franciscogar94
franciscogar94COMMUNITY
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#oauth#mcp#model context protocol#server development#widgets#mcp-use
One-click install
npx skills add https://github.com/franciscogar94/CrisisOS --skill mcp-apps-builder-franciscogar94
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: mcp-apps-builder
Source: https://github.com/franciscogar94/CrisisOS/tree/main/.cursor/skills/mcp-apps-builder
Command: npx skills add https://github.com/franciscogar94/CrisisOS --skill mcp-apps-builder-franciscogar94

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve? Building Model Context Protocol (MCP) servers involves many architectural decisions—choosing between tools, resources, prompts, and widgets, handling authentication, structuring middleware, and avoiding common pitfalls. This Skill provides a navigation guide and reference documentation so AI agents implement MCP servers correctly with the mcp-use framework instead of producing broken or insecure boilerplate. ## Core Features & Use Cases - Project Scaffolding Guidance: Detects existing mcp-use projects and directs scaffolding via npx create-mcp-use-app instead of manual boilerplate. - Reference Documentation: Covers foundations (concepts, architecture, quickstart, deployment), authentication (WorkOS, Supabase, custom OAuth), server primitives (tools, resources, prompts, proxy, response helpers), and React widgets (state, interactivity, theming, model context, files). - Best Practices & Anti-Patterns: Enforces golden rules like one tool per capability, Zod schema descriptions, isPending checks, McpUseProvider wrapping, and proper exposeAsTool typing. - Use Case: When asked to add a new tool or interactive widget to an MCP server, the agent consults the relevant reference file first, then implements typed, theme-aware, error-handled code. ## Quick Start Ask the agent to create a new MCP server with a weather tool and 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` to scaffold the project, then start it with `npm run dev`. The CLI sets up TypeScript config, hot reload, inspector integration, and widget compilation, so you should never create the boilerplate manually.

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

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

Does mcp-use support OAuth authentication?▼

Yes, mcp-use supports OAuth through WorkOS AuthKit, Supabase, or custom providers like GitHub, Okta, and Google. When configured, unauthenticated requests receive a 401 with a WWW-Authenticate header, and user context is available via `ctx.auth`.

What is the difference between tools, resources, and prompts in MCP?▼

Tools are executable backend actions the AI can call, resources expose read-only data clients can fetch, and prompts are reusable message templates. Widgets add visual React interfaces on top of tools for browsing or comparing data.

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

Type inference fails when the Zod schema is defined inline inside `widgetMetadata`. Extract the schema into a separate constant, reference it in the metadata, infer the type with `z.infer<typeof propsSchema>`, and pass it to `useWidget<Props>()`.

When should I not use a widget for an MCP tool?▼

Skip widgets when the output is simple text or a single value and no visual representation adds value. Widgets are best for browsing multiple items, comparing data side-by-side, or interactive selection workflows.

Related Skills

Explore More Software Engineering Skills→
cericocerico

mcp

Implement MCP servers with Node.js, PNPM, and the MCP SDK.

Community
Intermediate
CopilotKitCopilotKit
7

mcp-apps-builder

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

Official
Advanced
scalekit-incscalekit-inc

mcp-oauth-fastmcp

Enable OAuth 2.1 authentication for FastMCP servers via Scalekit.

Official
Intermediate
AvaTar-ArTsAvaTar-ArTs

build-mcp-app

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

Community
Advanced