skills.rest
CopilotKit
CopilotKitOFFICIAL
Explore all skills by this author →
WebsiteGitHub

mcp-builder

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

7|3|Updated May 8, 2026
Search Tags:#typescript#mcp#model context protocol#chatgpt apps#widgets#server tools#mcp-use
One-click install
npx skills add https://github.com/CopilotKit/Generative-UI-Global-Hackathon-Starter-Kit --skill mcp-builder-copilotkit
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: mcp-builder
Source: https://github.com/CopilotKit/Generative-UI-Global-Hackathon-Starter-Kit/tree/main/.cursor/skills/mcp-builder
Command: npx skills add https://github.com/CopilotKit/Generative-UI-Global-Hackathon-Starter-Kit --skill mcp-builder-copilotkit

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 requires coordinating tools, resources, prompts, and interactive UI widgets, and developers often struggle to decide what needs a visual widget versus a plain tool and how to structure the server code correctly. ## Core Features & Use Cases - Server Scaffolding Guidance: Provides architecture patterns for decomposing user requests into tools, widget tools, resources, and prompts with the mcp-use TypeScript SDK. - Widget Development: Covers creating React TSX widgets in the resources folder with widgetMetadata, useWidget hooks, McpUseProvider, and the widget() response helper. - Reference Documentation: Includes detailed references for response helpers, resource URI templates, server proxying and composition, and error handling patterns. - Use Case: A user asks to build a weather app for ChatGPT; the Skill guides creating a get-weather widget tool with a styled weather card, mock data, and proper isPending loading states. - Deprecation Notice: This Skill is deprecated and replaced by mcp-app-builder, which should be installed via npx skills install mcp-use/mcp-use --skill mcp-app-builder. ## Quick Start Ask the agent to build an MCP server with a weather widget tool using mcp-use, and it will read the design references before writing the server and widget code.

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(), then return a response helper like text() or object() from the async callback. Add a widget config if the tool should render visual UI.

How do I build an interactive widget for an MCP tool?▼

Create a React TSX file in the resources folder exporting widgetMetadata with a zod props schema and a default component using useWidget and McpUseProvider. Then register a tool with widget: { name } matching the filename and return the widget() helper with props and output.

When should an MCP tool use a widget versus plain text output?▼

Use a widget when browsing multiple items, displaying visual data like charts or colors, or enabling interactive selection. Use a plain tool when output is simple text such as translations, calculations, or status checks.

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 before accessing props.

Is the mcp-builder skill still maintained?▼

No, this skill is deprecated and replaced by mcp-app-builder. Install the replacement with npx skills install mcp-use/mcp-use --skill mcp-app-builder and use it instead.

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. Remove exposeAsTool since it defaults to false and the custom tool handles registration.

Related Skills

Explore More Software Engineering Skills→
nexi-labnexi-lab
226

mcp-builder

Build MCP servers with Python FastMCP and Node/TypeScript SDKs.

Official
Advanced
jezwebjezweb
961

OpenAI Apps MCP

Deploy stateless MCP servers on Cloudflare Workers for ChatGPT extensions.

Community
Intermediate
AgentientAgentient
2

mcp-protocol-compliance-testing

Automate MCP protocol conformance testing and Pydantic schema validation for MCP servers.

Official
Advanced
hollaugohollaugo
22

openai-apps-sdk-builder

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

Community
Advanced