Back to Details

mcp-app-builder

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Creating MCP Apps

创建MCP应用

Those are conversational experiences that extend AI assistants through tools and custom UI widgets. They're built as MCP servers invoked during conversations.
⚠️ The app is consumed by two users at once: the human and the AI Assistant LLM. They collaborate through the widget—the human interacts with it, the LLM sees its state. Internalize this before writing code: the widget is your shared surface.
SPEC.md keeps track of the app's requirements and design decisions. Keep it up to date as you work on the app.
No SPEC.md? Stop. → Read discover.md first. Nothing else until SPEC.md exists.
这些是通过工具和自定义UI组件扩展AI助手能力的对话式体验应用，以MCP服务器的形式构建，在对话过程中被调用。
⚠️ 应用会同时供两类用户使用：人类用户和AI助手大语言模型（LLM）。他们通过组件协作——人类用户与组件交互，LLM则能感知组件的状态。在编写代码前请牢记这一点：组件是双方共享的交互界面。
SPEC.md文件用于记录应用的需求和设计决策。在开发应用过程中请持续更新该文件。
还没有SPEC.md？请先暂停。 → 先阅读discover.md。在SPEC.md创建完成前，不要进行其他操作。

Setup

环境搭建

  1. Copy template → copy-template.md: when starting a new project with ready SPEC.md
  2. Run locally → run-locally.md: when ready to test, need dev server or ChatGPT/Claude connection
  1. 复制模板 → copy-template.md：适用于已有完善SPEC.md的新项目初始化场景
  2. 本地运行 → run-locally.md：适用于准备测试、需要启动开发服务器或连接ChatGPT/Claude的场景

Architecture

架构设计

Design or evolve UX flows and API shape → architecture.md
设计或优化UX流程与API结构 → architecture.md

Implementation

开发实现

  • Fetch and render data → fetch-and-render-data.md: when implementing server handlers and widget data fetching
  • State and context → state-and-context.md: when persisting widget UI state and updating LLM context
  • Prompt LLM → prompt-llm.md: when widget needs to trigger LLM response
  • UI guidelines → ui-guidelines.md: display modes, layout constraints, theme, device, and locale
  • External links → open-external-links.md: when redirecting to external URLs or setting "open in app" target
  • OAuth → oauth.md: when tools need user authentication to access user-specific data
  • CSP → csp.md: when declaring allowed domains for fetch, assets, redirects, or iframes
  • 数据获取与渲染 → fetch-and-render-data.md：适用于实现服务器处理器和组件数据获取逻辑的场景
  • 状态与上下文管理 → state-and-context.md：适用于持久化组件UI状态并更新LLM上下文的场景
  • 调用LLM生成响应 → prompt-llm.md：适用于组件需要触发LLM生成响应的场景
  • UI设计指南 → ui-guidelines.md：包含显示模式、布局约束、主题、设备适配和区域设置相关内容
  • 外部链接处理 → open-external-links.md：适用于重定向到外部URL或设置“应用内打开”目标的场景
  • OAuth认证 → oauth.md：适用于工具需要用户认证以访问用户特定数据的场景
  • 内容安全策略（CSP） → csp.md：适用于声明允许的获取资源、静态资源、重定向或嵌入iframe的域名的场景

Deploy

部署上线

  • Ship to production → deploy.md: when ready to deploy via Alpic
  • Publish to ChatGPT/Claude Directories → publish.md: when ready to submit for review
Full API docs: https://docs.skybridge.tech/api-reference.md
  • 部署到生产环境 → deploy.md：适用于准备通过Alpic进行部署的场景
  • 发布到ChatGPT/Claude应用商店 → publish.md：适用于准备提交审核的场景
完整API文档：https://docs.skybridge.tech/api-reference.md