mcp-apps-builder

โดย mcp-use

คู่มืออ้างอิงบังคับสำหรับการสร้างเซิร์ฟเวอร์ MCP ระดับโปรดักชันพร้อมเครื่องมือ ทรัพยากร พรอมต์ และวิดเจ็ต ครอบคลุมแนวคิดพื้นฐาน (Tool, Resource, Prompt, Widget primitives), สถาปัตยกรรมเซิร์ฟเวอร์, รูปแบบการตรวจสอบสิทธิ์ (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.

Skills เพิ่มเติมจาก mcp-use

mcp-builder
mcp-use
สร้างเซิร์ฟเวอร์ MCP ที่พร้อมใช้งานจริงด้วยเฟรมเวิร์ก mcp-use และการลงทะเบียนวิดเจ็ตอัตโนมัติ เริ่มต้นด้วย npx create-mcp-use-app และเลือกจากสามเทมเพลต: starter (ฟีเจอร์ครบ), mcp-apps (ปรับให้เหมาะกับ ChatGPT), หรือ blank (ขั้นต่ำ) กำหนดเครื่องมือ ทรัพยากร และพร้อมต์โดยใช้สคีมา Zod พร้อมการตรวจสอบอัตโนมัติและคำอธิบายพารามิเตอร์ที่ชัดเจน ลงทะเบียนวิดเจ็ต React จากโฟลเดอร์ resources/ โดยอัตโนมัติเป็นเครื่องมือและทรัพยากร MCP พร้อมรองรับโปรโตคอลคู่สำหรับ MCP Apps และ...
chatgpt-app-builder
mcp-use
สร้างแอป ChatGPT ด้วยวิดเจ็ตแบบโต้ตอบโดยใช้ mcp-use และ OpenAI Apps SDK ใช้เมื่อสร้างแอป ChatGPT, สร้างเซิร์ฟเวอร์ MCP พร้อมวิดเจ็ต, กำหนด...
chatgpt-app-builder
mcp-use
เลิกใช้งานแล้ว: ให้ใช้ mcp-app-builder แทน สร้างแอป ChatGPT ด้วยวิดเจ็ตแบบโต้ตอบและการพัฒนา React ที่ไม่ต้องกำหนดค่าใดๆ ทักษะนี้เลิกใช้งานแล้ว โปรดย้ายไปใช้ mcp-app-builder เพื่อรับการสนับสนุนและการอัปเดตอย่างต่อเนื่อง ช่วยให้ผู้ใช้มนุษย์และ LLM ทำงานร่วมกันผ่านวิดเจ็ตแบบโต้ตอบที่ใช้ร่วมกัน มีตัวจัดการเซิร์ฟเวอร์ โครงสร้างวิดเจ็ต React การจัดการสถานะ และฮุคในตัวสำหรับการเรียกใช้เครื่องมือและข้อความติดตามผล ครอบคลุมโหมดการแสดงผล (แบบอินไลน์, เต็มหน้าจอ, ภาพซ้อนภาพ), การปรับแต่งธีม,...
mcp-builder
mcp-use
เลิกใช้งานแล้ว: สร้างเซิร์ฟเวอร์ MCP ด้วยเครื่องมือ ทรัพยากร พรอมต์ และวิดเจ็ตแบบโต้ตอบโดยใช้ mcp-use ทักษะนี้เลิกใช้งานแล้ว ให้ใช้ mcp-app-builder แทน รองรับการกำหนดเครื่องมือ ทรัพยากร พรอมต์ และวิดเจ็ต React แบบโต้ตอบภายในเซิร์ฟเวอร์ MCP เดียว รวมถึงตัวช่วยตอบกลับสำหรับจัดรูปแบบผลลัพธ์เป็นข้อความ มาร์กดาวน์ HTML รูปภาพ วัตถุ และวิดเจ็ตที่กำหนดเอง มีการประกอบเซิร์ฟเวอร์และการพร็อกซีเพื่อรวมเซิร์ฟเวอร์ MCP หลายตัวเป็นอินเทอร์เฟซเดียว
openapi-to-mcp
mcp-use
สร้างและปรับใช้เซิร์ฟเวอร์ MCP จากสเปก OpenAPI / Swagger โดยใช้ mcp-use TypeScript SDK ใช้ทักษะนี้เมื่อผู้ใช้ต้องการ "เปลี่ยน OpenAPI นี้…