skills.rest
SebastienGt
SebastienGtCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

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/SebastienGt/LivingMargin-Google-Deepmind-Hackathon --skill mcp-apps-builder-sebastiengt
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: mcp-apps-builder
Source: https://github.com/SebastienGt/LivingMargin-Google-Deepmind-Hackathon/tree/main/.cursor/skills/mcp-apps-builder
Command: npx skills add https://github.com/SebastienGt/LivingMargin-Google-Deepmind-Hackathon --skill mcp-apps-builder-sebastiengt

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill 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 library of mcp-use framework best practices so AI agents implement MCP servers correctly on the first attempt. ## Core Features & Use Cases - Decision Trees & Navigation: Routes any MCP task (new project scaffolding, adding tools, OAuth, widgets, deployment) to the correct reference file before implementation. - Server Backend Patterns: Covers tool definition with Zod schemas, response helpers (text, object, widget, error), resources, prompts, proxying, and Hono-based middleware. - Interactive Widgets: Documents React widget development including useWidget(), useCallTool(), theming, state management, model context, and file uploads. - Use Case: When asked to add an OAuth-protected tool with a visual product-list widget to an MCP server, the agent consults the authentication and widget references to produce type-safe, production-ready code. ## Quick Start Ask the agent to create a new MCP server with a weather tool and widget, and it will scaffold the project with create-mcp-use-app and follow the reference patterns.

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 a tool to an MCP server?▼

Use server.tool() with a name, description, and Zod schema where every field has a .describe() call. Return responses with helpers like text(), object(), or error() instead of raw objects or thrown exceptions.

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

Use a widget when users browse, compare, or interactively select data, such as product lists or dashboards. Use a plain tool when the output is simple text or a single value where visual representation adds nothing.

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 Azure AD. Authenticated user context is available via ctx.auth in handlers and middleware.

Why is my widget props object undefined or untyped?▼

Widgets render before the tool completes, so props is empty while isPending is true; always check isPending first. For typing, define the Zod schema in a separate constant, infer Props with z.infer, and pass it to useWidget<Props>().

Can I add custom HTTP endpoints alongside MCP tools?▼

Yes, mcp-use is built on Hono, so you can add routes via server.app.get() for health checks, webhooks, or admin APIs. MCP tools and HTTP endpoints coexist on the same server.

Related Skills

Explore More Software Engineering Skills→
michelvemichelve
1

setup

Verify development environment setup, environment variables, tools, and MCP server accessibility.

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
1

mcp-oauth21-scalekit

Add OAuth 2.1 token validation middleware to MCP servers using Scalekit.

Official
Advanced
mirzadhammirzadham

mcp-server-patterns

Implements MCP servers with tools, resources, prompts, and stdio or HTTP transports.

Community
Intermediate