skills.rest
franciscogar94
franciscogar94COMMUNITY
Explore all skills by this author →
GitHub

mcp-builder

Build Model Context Protocol servers with tools, resources, prompts, and React widgets using mcp-use.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve? Building a Model Context Protocol (MCP) server requires coordinating tools, resources, prompts, and interactive UI widgets, and developers often struggle to decide what needs a visual widget versus a plain text tool. This Skill guides the design and implementation of MCP servers with the mcp-use TypeScript framework, from architecture decisions to working code. Note: This Skill is deprecated and has been replaced by mcp-app-builder. If available, install and use mcp-app-builder instead (npx skills install mcp-use/mcp-use --skill mcp-app-builder). ## Core Features & Use Cases - Architecture Guidance: Decompose user requests into tools, widget tools, resources, and prompts, with clear rules for when visual UI improves the experience. - Server Implementation Patterns: Reference documentation for server.tool(), server.resource(), server.resourceTemplate(), server.prompt(), and server.proxy() with Zod schema best practices and error handling. - Interactive Widgets: Build React TSX widgets in resources/ using useWidget, McpUseProvider, persistent state, and callTool for tool-to-widget interactivity. - Use Case: A user asks for a weather app. The Skill directs creating a get-weather widget tool that renders a styled weather card with mock data, plus a get-forecast tool returning text, all wired through response helpers like widget(), text(), and object(). ## Quick Start Ask the assistant to build an MCP server for your use case, for example: create a weather MCP server with a widget showing temperature and conditions for a given city.

Frequently Asked Questions about mcp-builder

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

FAQPage Schema
How do I create a tool in an MCP server with mcp-use?▼

Use server.tool() with a name, description, and a Zod schema where every field has .describe(). The callback returns a response helper such as text(), object(), or error(), and you can add annotations like readOnlyHint or destructiveHint.

When should an MCP tool use a widget instead of plain text?▼

Use a widget when visual output meaningfully improves the experience, such as browsing search results, charts, or interactive pickers. Use a plain tool for simple text outputs like translations or calculations. When in doubt, prefer a widget.

Why does my MCP widget show undefined for prop values?▼

Widgets render before the tool finishes executing, so props are initially empty. Check the isPending flag from useWidget() first and render a loading state, then access props only after isPending is false.

How do I fix a duplicate tool registration error for a widget?▼

The error occurs when widgetMetadata sets exposeAsTool: true while a custom tool also references the widget via widget: { name }. Remove exposeAsTool: true since it defaults to false and the custom tool handles registration.

Can one MCP server proxy multiple other MCP servers?▼

Yes, server.proxy() composes multiple child servers into one aggregator with namespaced tools, such as database_query or weather_get_forecast. It supports local processes, remote HTTP servers, schema translation, and progress forwarding.

Is the mcp-builder skill still maintained?▼

No, this skill is deprecated and replaced by mcp-app-builder. Install it with npx skills install mcp-use/mcp-use --skill mcp-app-builder and use that skill for new MCP development work.

Related Skills

Explore More Software Engineering Skills→
CopilotKitCopilotKit
7

mcp-builder

Build Model Context Protocol servers with tools, resources, prompts, and React widgets using mcp-use.

Official
Advanced
qruiqaiqruiqai

qruiq-mcp-init

Integrates an MCP server into a Next.js app with OAuth2 and Streamable HTTP.

Official
Advanced
joshsmithxrmjoshsmithxrm
5

mcp-verify

Verify MCP tools against a running server via inspector and JSON-RPC calls.

Community
Advanced
hollaugohollaugo
22

openai-apps-sdk-builder

Generate OpenAI Apps SDK projects with MCP servers and React widgets.

Community
Advanced