mcp-builder

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

Updated May 9, 2026
One-click install
npx skills add https://github.com/SebastienGt/LivingMargin-Google-Deepmind-Hackathon --skill mcp-builder-sebastiengt
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: mcp-builder
Source: https://github.com/SebastienGt/LivingMargin-Google-Deepmind-Hackathon/tree/main/.cursor/skills/mcp-builder
Command: npx skills add https://github.com/SebastienGt/LivingMargin-Google-Deepmind-Hackathon --skill mcp-builder-sebastiengt

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve? Building MCP servers requires coordinating tools, resources, prompts, and interactive UI widgets with correct schemas and response formats. This Skill guides the design and implementation of MCP servers using the mcp-use TypeScript framework, from architecture decisions to working code. Note: this Skill is deprecated and directs users to the mcp-app-builder skill when available. ## Core Features & Use Cases - Architecture Guidance: Decompose user requests into tools, widget tools, resources, and prompts, with 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 schemas 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 recipe finder app. The Skill guides creating a search-recipes widget tool returning recipe cards, with mock data and a text summary for the model. ## Quick Start Ask the agent to build an MCP server for your app idea, such as a weather widget or todo list, using the mcp-use framework.

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 Zod schema where every field has .describe(). The callback returns a response helper like text(), object(), or error(). Add a widget config if the tool should render visual UI.

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

Use a widget when browsing multiple items, displaying visual data like charts or colors, or enabling interactive selection. Use tool-only responses for simple text output like translations or calculations where visual UI adds nothing.

Why does my MCP widget show undefined for props?▼

Widgets render before tool execution completes, 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 duplicate tool registration errors with widgets?▼

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

Can mcp-use combine multiple MCP servers into one endpoint?▼

Yes, server.proxy() composes multiple servers into a unified aggregator with namespaced tools. It supports local TypeScript and Python servers plus remote HTTP servers, with schema translation and progress forwarding.

Is the mcp-builder skill still maintained?▼

No, this skill is deprecated and replaced by mcp-app-builder. The frontmatter directs users to install mcp-app-builder via npx skills install mcp-use/mcp-use --skill mcp-app-builder when available.