mcp-apps-builder

작성자: mcp-use

프로덕션 MCP 서버 구축을 위한 필수 참조 가이드로, 도구, 리소스, 프롬프트 및 위젯을 다룹니다. 기본 개념(도구, 리소스, 프롬프트, 위젯 프리미티브), 서버 아키텍처, 인증 패턴(OAuth, Supabase, 커스텀) 및 배포 전략을 포함하며, 도구, 리소스, 프롬프트, 응답 포맷팅 및 상태 관리와 테마를 포함한 위젯 기반 UI 구현을 위한 상세 가이드를 제공합니다. 일반적인 안티 패턴(검증 누락, 부적절한 오류 처리 등)을 문서화합니다.

npx skills add https://github.com/mcp-use/mcp-use --skill mcp-apps-builder

Build with mcp-use

Treat the installed mcp-use package, its exported types, generated declarations, and the project's existing code as the source of truth. Inspect the installed version before choosing APIs or changing code.

Workflow

  1. Inspect package.json, the server entry, exported tool refs, mcp-env.d.ts, views/, skills/, and the installed mcp-use version.
  2. Scaffold a new stable project with create-mcp-use-app@latest and the appropriate template. Match the package version or dist-tag when working on beta, canary, or an existing versioned project.
  3. Read only the references needed for the task:
    • Server for tools, resources, prompts, MCP middleware, request context, and result envelopes.
    • Views for interactive MCP Apps, React hooks, model context, host capabilities, assets, and CSP.
    • Authentication for OAuth providers, verified identity, scopes, permissions, and authorization.
    • Skills over MCP when a server should ship reusable workflows alongside its tools.
    • Advanced features for OpenAPI, proxying, notifications, subscriptions, and elicitation.
    • Migration only when retired or compatibility-only imports, helpers, registration shapes, UI patterns, or session assumptions are present.
    • Verification before reporting implementation work complete.
  4. Implement against installed types. Prefer the framework's current conventions over copied examples or historical changelogs.
  5. Validate the smallest real lifecycle that proves the changed behavior, then expand checks in proportion to risk.

Core invariants

  • Import server APIs from mcp-use, React APIs from mcp-use/react, and OAuth provider adapters from their mcp-use/oauth/* subpaths.
  • Define tool arguments with inputSchema. Add outputSchema for structured results and every View-bound tool.
  • Return raw MCP result envelopes. A successful schema-backed tool must include matching structuredContent; an expected failure may return isError: true with model-readable content.
  • Put each View at views/<name>/view.tsx and bind it with view: { name: "<name>" }.
  • Export every statically declared tool ref consumed by a View. Default-export the server entry used by mcp-use dev, build, and start.
  • Keep identity and mutable workflow state request-scoped or in an external store. Treat client-reported metadata as unverified.
  • Consider Skills over MCP when a server exposes a repeatable, multi-step workflow that would otherwise inflate tool descriptions.

Guardrails

  • Do not invent exports, configuration fields, or callback shapes. Confirm uncertain details in installed declarations or source.
  • Do not preserve APIs that are absent from the installed version merely because they appear in an existing project.
  • Do not return a plain domain object from a tool callback.
  • Do not bind a View without a matching outputSchema and structuredContent result.
  • Do not use module globals for cross-request identity, elicitation continuity, or durable business state.
  • Do not claim success from a source build alone when types, package exports, authentication, or interactive behavior changed.
  • Do not deploy or mutate external systems unless the user explicitly requests it.

mcp-use의 다른 스킬

mcp-builder
mcp-use
생산 준비가 완료된 MCP 서버를 mcp-use 프레임워크와 자동 위젯 등록 기능으로 구축하세요. npx create-mcp-use-app으로 부트스트래핑하고 세 가지 템플릿 중에서 선택하세요: starter(전체 기능), mcp-apps(ChatGPT 최적화), blank(최소). Zod 스키마를 사용하여 도구, 리소스, 프롬프트를 정의하며 자동 검증과 명확한 매개변수 설명을 제공합니다. resources/ 폴더에서 React 위젯을 자동으로 MCP 도구 및 리소스로 등록하고 MCP 앱을 위한 이중 프로토콜 지원을 제공합니다...
chatgpt-app-builder
mcp-use
mcp-use와 OpenAI Apps SDK를 사용하여 대화형 위젯으로 ChatGPT 앱을 구축합니다. ChatGPT 앱을 만들거나 위젯이 포함된 MCP 서버를 구축하거나 정의할 때 사용합니다.
chatgpt-app-builder
mcp-use
사용 중단됨: 대신 mcp-app-builder를 사용하세요. 대화형 위젯과 제로 구성 React 개발로 ChatGPT 앱을 빌드합니다. 이 스킬은 사용 중단되었습니다. 지속적인 지원과 업데이트를 위해 mcp-app-builder로 마이그레이션하세요. 공유 대화형 위젯을 통해 인간 사용자와 LLM 간의 협업 UI를 가능하게 합니다. 서버 핸들러, React 위젯 스캐폴딩, 상태 관리, 도구 호출 및 후속 메시지를 위한 내장 훅을 제공합니다. 디스플레이 모드(인라인, 전체 화면, 화면 속 화면), 테마 등을 다룹니다.
mcp-builder
mcp-use
DEPRECATED: mcp-use를 사용하여 도구, 리소스, 프롬프트 및 대화형 위젯으로 MCP 서버를 구축합니다. 이 스킬은 더 이상 사용되지 않습니다. 대신 mcp-app-builder를 사용하세요. 단일 MCP 서버 내에서 도구, 리소스, 프롬프트 및 대화형 React 위젯을 정의할 수 있습니다. 출력을 텍스트, 마크다운, HTML, 이미지, 객체 및 사용자 정의 위젯으로 포맷팅하기 위한 응답 헬퍼를 포함합니다. 여러 MCP 서버를 통합 인터페이스로 집계하기 위한 서버 구성 및 프록시를 제공합니다.
openapi-to-mcp
mcp-use
OpenAPI / Swagger 스펙에서 mcp-use TypeScript SDK를 사용하여 MCP 서버를 빌드하고 배포합니다. 사용자가 "이 OpenAPI를 변환…"하려고 할 때마다 이 스킬을 사용하세요.