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-use 框架與自動化元件註冊功能,建構可投入生產環境的 MCP 伺服器。透過 npx create-mcp-use-app 啟動專案,並從三種範本中選擇:starter(功能完整)、mcp-apps(針對 ChatGPT 最佳化)或 blank(精簡版)。利用 Zod 架構定義工具、資源與提示,具備自動驗證與清晰的參數說明。自動從 resources/ 資料夾註冊 React 元件為 MCP 工具與資源,並支援 MCP Apps 的雙協定...
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
已棄用:使用 mcp-use 構建具備工具、資源、提示與互動式元件的 MCP 伺服器。此技能已棄用,請改用 mcp-app-builder。支援在單一 MCP 伺服器中定義工具、資源、提示與互動式 React 元件。包含回應輔助工具,可將輸出格式化為文字、Markdown、HTML、圖片、物件與自訂元件。提供伺服器組合與代理功能,可將多個 MCP 伺服器聚合為統一介面。
openapi-to-mcp
mcp-use
根據 OpenAPI / Swagger 規格,使用 mcp-use TypeScript SDK 建置並部署 MCP 伺服器。當使用者想要「將此 OpenAPI…