UI Hub 是一个每日更新的免费 UI 资源目录,给设计师、前端开发者和做界面的 AI Agent 用:共 2,395 条资源,其中 133 个组件库、1,929 个带明暗预览的组件样式示例,另有设计 skill 与 AI 设计技巧文章。UI Hub 是一個每日更新的免費 UI 資源目錄,給設計師、前端開發者和做介面的 AI Agent 用:共 2,395 條資源,其中 133 個元件庫、1,929 個附明暗預覽的元件樣式示例,另有設計 skill 與 AI 設計技巧文章。UI Hub is a free, daily-updated directory of UI resources for designers, front-end developers and AI agents that build interfaces: 2,395 resources, including 133 component libraries and 1,929 component style demos with light/dark previews, plus design skills and AI design articles.UI Hub は、デザイナー・フロントエンド開発者・UI を作る AI エージェント向けの、毎日更新される無料の UI リソース集です。全 2,395 件(コンポーネントライブラリ 133 件、ライト/ダーク対応のスタイルデモ 1,929 件)に加え、デザインスキルと AI デザイン記事を掲載しています。UI Hub는 디자이너, 프론트엔드 개발자, 인터페이스를 만드는 AI 에이전트를 위한 매일 업데이트되는 무료 UI 리소스 디렉터리입니다. 총 2,395개 리소스(컴포넌트 라이브러리 133개, 라이트/다크 미리보기가 있는 스타일 데모 1,929개)와 디자인 스킬, AI 디자인 글을 제공합니다.UI Hub ialah direktori sumber UI percuma yang dikemas kini setiap hari untuk pereka, pembangun front-end dan ejen AI yang membina antara muka: 2,395 sumber, termasuk 133 pustaka komponen dan 1,929 demo gaya komponen dengan pratonton terang/gelap, serta kemahiran reka bentuk dan artikel reka bentuk AI.UI Hub là danh mục tài nguyên UI miễn phí, cập nhật hằng ngày, dành cho nhà thiết kế, lập trình viên front-end và AI agent dựng giao diện: 2,395 tài nguyên, gồm 133 thư viện component và 1,929 mẫu phong cách component có xem trước sáng/tối, cùng skill thiết kế và bài viết về thiết kế với AI.UI Hub est un annuaire gratuit de ressources UI, mis à jour chaque jour, pour designers, développeurs front-end et agents IA qui construisent des interfaces : 2,395 ressources, dont 133 bibliothèques de composants et 1,929 démos de styles avec aperçus clair/sombre, plus des skills de design et des articles sur le design avec l’IA.UI Hub es un directorio gratuito de recursos de UI, actualizado a diario, para diseñadores, desarrolladores front-end y agentes de IA que construyen interfaces: 2,395 recursos, incluidas 133 bibliotecas de componentes y 1,929 demos de estilos con vista clara/oscura, además de skills de diseño y artículos de diseño con IA.UI Hub ist ein kostenloses, täglich aktualisiertes Verzeichnis von UI-Ressourcen für Designer, Frontend-Entwickler und KI-Agents, die Oberflächen bauen: 2,395 Ressourcen, darunter 133 Komponentenbibliotheken und 1,929 Komponenten-Stildemos mit Hell/Dunkel-Vorschau, dazu Design-Skills und Artikel zu KI-Design.

← 百科百科Encyclopedia百科백과EnsiklopediaBách khoaEncyclopédieEnciclopediaEnzyklopädie · SkillSkillSkillスキル스킬KemahiranSkillSkillSkillSkill · engineering · full-text

Skill: mcp-builder

原始 Markdown原始 MarkdownRaw Markdown生Markdown원본 MarkdownMarkdown mentahMarkdown gốcMarkdown brutMarkdown en brutoRohes Markdown

本条目正文为英文,作为 AI Agent 上下文使用。

本條目正文為英文,作為 AI Agent 上下文使用。

この項目の本文は英語です(AIエージェントの文脈用)。

이 항목의 본문은 영어입니다(AI 에이전트 컨텍스트용).

Kandungan entri ini dalam bahasa Inggeris (untuk konteks ejen AI).

Nội dung mục này bằng tiếng Anh (dùng làm ngữ cảnh cho AI agent).

Le contenu de cette entrée est en anglais (contexte pour agents IA).

El contenido de esta entrada está en inglés (contexto para agentes de IA).

Der Inhalt dieses Eintrags ist auf Englisch (Kontext für KI-Agents).

Guide for creating high-quality MCP (Model Context Protocol) servers that enable LLMs to interact with external services through well-designed tools. Use when building MCP servers to integrate external APIs or services, whether in Python (FastMCP) or Node/TypeScript (MCP SDK).

Licence: Apache-2.0 · Upstream: https://github.com/anthropics/skills · Redistributed unmodified below.

MCP Server Development Guide

Overview

Create MCP (Model Context Protocol) servers that enable LLMs to interact with external services through well-designed tools. The quality of an MCP server is measured by how well it enables LLMs to accomplish real-world tasks.


Process

🚀 High-Level Workflow

Creating a high-quality MCP server involves four main phases:

Phase 1: Deep Research and Planning

1.1 Understand Modern MCP Design

API Coverage vs. Workflow Tools: Balance comprehensive API endpoint coverage with specialized workflow tools. Workflow tools can be more convenient for specific tasks, while comprehensive coverage gives agents flexibility to compose operations. Performance varies by client—some clients benefit from code execution that combines basic tools, while others work better with higher-level workflows. When uncertain, prioritize comprehensive API coverage.

Tool Naming and Discoverability: Clear, descriptive tool names help agents find the right tools quickly. Use consistent prefixes (e.g., github_create_issue, github_list_repos) and action-oriented naming.

Context Management: Agents benefit from concise tool descriptions and the ability to filter/paginate results. Design tools that return focused, relevant data. Some clients support code execution which can help agents filter and process data efficiently.

Actionable Error Messages: Error messages should guide agents toward solutions with specific suggestions and next steps.

1.2 Study MCP Protocol Documentation

Navigate the MCP specification:

Start with the sitemap to find relevant pages: https://modelcontextprotocol.io/sitemap.xml

Then fetch specific pages with .md suffix for markdown format (e.g., https://modelcontextprotocol.io/specification/draft.md).

Key pages to review: - Specification overview and architecture - Transport mechanisms (streamable HTTP, stdio) - Tool, resource, and prompt definitions

1.3 Study Framework Documentation

Recommended stack: - Language: TypeScript (high-quality SDK support and good compatibility in many execution environments e.g. MCPB. Plus AI models are good at generating TypeScript code, benefiting from its broad usage, static typing and good linting tools) - Transport: Streamable HTTP for remote servers, using stateless JSON (simpler to scale and maintain, as opposed to stateful sessions and streaming responses). stdio for local servers.

Load framework documentation:

For TypeScript (recommended): - TypeScript SDK: Use WebFetch to load https://raw.githubusercontent.com/modelcontextprotocol/typescript-sdk/main/README.md - ⚡ TypeScript Guide - TypeScript patterns and examples

For Python: - Python SDK: Use WebFetch to load https://raw.githubusercontent.com/modelcontextprotocol/python-sdk/main/README.md - 🐍 Python Guide - Python patterns and examples

1.4 Plan Your Implementation

Understand the API: Review the service's API documentation to identify key endpoints, authentication requirements, and data models. Use web search and WebFetch as needed.

Tool Selection: Prioritize comprehensive API coverage. List endpoints to implement, starting with the most common operations.


Phase 2: Implementation

2.1 Set Up Project Structure

See language-specific guides for project setup: - ⚡ TypeScript Guide - Project structure, package.json, tsconfig.json - 🐍 Python Guide - Module organization, dependencies

2.2 Implement Core Infrastructure

Create shared utilities: - API client with authentication - Error handling helpers - Response formatting (JSON/Markdown) - Pagination support

2.3 Implement Tools

For each tool:

Input Schema: - Use Zod (TypeScript) or Pydantic (Python) - Include constraints and clear descriptions - Add examples in field descriptions

Output Schema: - Define outputSchema where possible for structured data - Use structuredContent in tool responses (TypeScript SDK feature) - Helps clients understand and process tool outputs

Tool Description: - Concise summary of functionality - Parameter descriptions - Return type schema

Implementation: - Async/await for I/O operations - Proper error handling with actionable messages - Support pagination where applicable - Return both text content and structured data when using modern SDKs

Annotations: - readOnlyHint: true/false - destructiveHint: true/false - idempotentHint: true/false - openWorldHint: true/false


Phase 3: Review and Test

3.1 Code Quality

Review for: - No duplicated code (DRY principle) - Consistent error handling - Full type coverage - Clear tool descriptions

3.2 Build and Test

TypeScript: - Run npm run build to verify compilation - Test with MCP Inspector: npx @modelcontextprotocol/inspector

Python: - Verify syntax: python -m py_compile your_server.py - Test with MCP Inspector

See language-specific guides for detailed testing approaches and quality checklists.


Phase 4: Create Evaluations

After implementing your MCP server, create comprehensive evaluations to test its effectiveness.

Load ✅ Evaluation Guide for complete evaluation guidelines.

4.1 Understand Evaluation Purpose

Use evaluations to test whether LLMs can effectively use your MCP server to answer realistic, complex questions.

4.2 Create 10 Evaluation Questions

To create effective evaluations, follow the process outlined in the evaluation guide:

  1. Tool Inspection: List available tools and understand their capabilities
  2. Content Exploration: Use READ-ONLY operations to explore available data
  3. Question Generation: Create 10 complex, realistic questions
  4. Answer Verification: Solve each question yourself to verify answers

4.3 Evaluation Requirements

Ensure each question is: - Independent: Not dependent on other questions - Read-only: Only non-destructive operations required - Complex: Requiring multiple tool calls and deep exploration - Realistic: Based on real use cases humans would care about - Verifiable: Single, clear answer that can be verified by string comparison - Stable: Answer won't change over time

4.4 Output Format

Create an XML file with this structure:

<evaluation>
  <qa_pair>
    <question>Find discussions about AI model launches with animal codenames. One model needed a specific safety designation that uses the format ASL-X. What number X was being determined for the model named after a spotted wild cat?</question>
    <answer>3</answer>
  </qa_pair>
<!-- More qa_pairs... -->
</evaluation>

Reference Files

📚 Documentation Library

Load these resources as needed during development:

Core MCP Documentation (Load First)

SDK Documentation (Load During Phase 1/2)

Language-Specific Implementation Guides (Load During Phase 2)

Evaluation Guide (Load During Phase 4)