在实际使用 Workbuddy 这类 AI 应用搭建平台时最容易混淆的一对概念就是“连接器”和“MCP”。很多人以为连接器就是 MCPMCP 就是连接器结果在做“一键设计稿变 APP”的时候数据读不出来、页面生成不了、数据库又连不上问题出在哪一层都说不清楚。作为 Workbuddy 入门系列第 34 篇这里围绕一个核心场景展开连接器和 MCP 到底是什么关系以及如何用它们完成从设计稿到可运行 APP 的最小闭环。读完可以理解两者的分工边界跑通一条完整链路并且知道常见报错应该从哪一层开始查。1. 先搞清楚 Workbuddy、连接器和 MCP 各自的角色1.1 Workbuddy 解决什么问题Workbuddy 是一个面向应用开发场景的 AI 搭建平台具体能力以你安装的版本和官方文档为准。它把需求描述、设计稿导入、页面生成、外部系统对接、预览发布压缩到一条流水线里。使用者的核心诉求是不需要从零手写全部代码也能快速得到一个带界面的应用原型甚至直接产出正式业务系统。它做的事情可以拆成三层界面生成层根据设计稿或文字描述生成页面代码。数据接入层通过连接器访问数据库、第三方 API、文件服务。智能编排层通过 MCP 让 AI 模型读取外部数据、调用工具从而生成更准确的代码。后面两个层就是连接器和 MCP 各自的领域。很多人把“能生成页面”和“能访问数据”当成同一件事实际上这是两条独立的链路只是最终被拼在同一个应用里。1.2 连接器是运行时的数据通道连接器Connector在 Workbuddy 里指的是“生成后的应用在运行时访问外部系统”的预置集成组件。它解决的是应用上线之后的数据链路问题也就是 APP 跑起来之后列表页的数据从哪来、表单提交的内容写到哪去。常见连接器类型如下类型典型目标使用场景数据库连接器MySQL、PostgreSQL、SQL Server页面直接读写业务表API 连接器REST、GraphQL 接口通过后端网关获取数据第三方服务连接器对象存储、短信、支付接入云服务和外部能力连接器的典型配置包括连接地址、端口、账号、密码、连接池大小、超时时间。配置生效后Workbuddy 会把连接器编译进生成的应用成为应用运行时的一部分。也就是说连接器是“应用和外部系统之间常驻的数据通道”。1.3 MCP 是构建时的模型上下文通道MCPModel Context Protocol模型上下文协议是一个开放协议用于让 AI 模型在构建应用的过程中以标准化方式访问外部数据和工具。它解决的核心问题是AI 生成代码时根本看不到你的数据库表结构也不知道你的接口字段名只能靠猜。在 Workbuddy 场景里MCP 的作用集中在构建期读取数据库的表和字段让 AI 生成与真实数据模型匹配的页面。读取设计稿平台的文件信息让 AI 按设计稿还原界面。调用外部 API 查询帮助 AI 获得业务数据生成列表、详情、统计页面。一个 MCP 系统由三部分组成MCP Server负责提供具体数据和工具能力的服务端进程。MCP Client在 Workbuddy 或 AI 客户端内部运行负责与 Server 通信。协议层定义请求、响应、工具调用、资源读取的标准格式。简单理解MCP 是“AI 的眼睛和手”连接器是“APP 的血管和神经”。两者都跟数据有关但服务对象不同。1.4 两者结合后一键设计稿变 APP 的完整链路“一键设计稿变 APP”并不是一个魔法而是一条分阶段链路。理解这条链路后面配置参数和排查问题就有了依据。完整链路如下设计稿准备在 Figma、蓝湖或本地图片中准备界面稿。设计稿接入Workbuddy 通过设计工具 MCP 读取设计文件或直接上传静态图片。数据模型读取通过数据库 MCP Server 读取表结构AI 获得字段、类型、主外键信息。页面生成AI 结合设计稿和数据结构生成页面代码和交互逻辑。运行时接入在生成的 APP 里配置连接器让页面在运行时真正读写数据库或调用接口。预览与发布本地预览、真机调试、发布到目标环境。在这条链路里分工非常清楚MCP 负责“生成前”的信息获取和“生成中”的工具调用连接器负责“生成后”应用与外部系统的运行时通信。两者在时间上前后衔接在职责上一个偏构建期、一个偏运行期。这也是它们最核心的区别。2. 环境准备账号、依赖和前置条件2.1 最小环境清单开始之前先确认环境。下面这个最小清单用于学习环境生产环境的要求在后面的章节里单独补充。项目学习环境要求说明Workbuddy最新稳定版客户端或网页端以官方下载页面为准设计稿Figma 文件或 1080x1920 的 PNG/JPEG 图页面尺寸影响生成效果数据库本机 MySQL 8.0 或 Docker 里的 MySQL用于演示 MCP 和连接器Node.js18 或 20 LTS本地运行 MCP Server 通常需要数据库客户端mysql 命令行或图形客户端用来验证连通性2.2 MCP Server 的典型配置方式以数据库 MCP Server 为例常见的配置格式是一个 JSON 文件里面声明每个 MCP Server 的启动命令、参数和环境变量。下面示例用于说明思路实际项目要结合自己选择的 MCP Server 包名和版本调整。{ mcpServers: { order_mysql: { command: npx, args: [ -y, 你的-mcp-server-包名 ], env: { MYSQL_HOST: 127.0.0.1, MYSQL_PORT: 3306, MYSQL_USER: app_user, MYSQL_PASSWORD: replace_with_real_password, MYSQL_DATABASE: order_app } } } }这段配置的意义是告诉 Workbuddy 里的 MCP Client启动一个名为 order_mysql 的 MCP Server用它读取 order_app 数据库的表结构。配置里的 env 是注入给 MCP Server 进程的环境变量不是给 Workbuddy 用的系统变量。注意不同 MCP Server 的包名、启动参数和环境变量差异很大落地前必须到对应项目的文档里确认。如果原始材料没有给出明确版本不要盲目复制别人的命令。2.3 连接器的典型配置方式连接器配置通常在 Workbuddy 项目的“数据接入”或“资源”面板里完成保存后会进入应用运行环境。以数据库连接器为例配置项一般是{ connector: { name: order_db, type: mysql, host: 10.0.0.8, port: 3306, database: order_app, username: app_user, password: replace_with_real_password, poolSize: 10, connectTimeoutMs: 3000 } }这里要区分清楚MCP Server 配置里的 MYSQL_HOST 是给“构建期 AI 读表结构”用的连接器配置里的 host 是给“运行期 APP 读写数据”用的。虽然可能指向同一个数据库但用途、生效阶段、所在配置文件都不同。很多初学者把两者混在一起改排查时就会迷失方向。3. 实操从设计稿到可运行 APP 的最小闭环3.1 准备设计稿设计稿的质量直接决定 AI 生成页面的还原度。推荐准备一份包含 3 到 5 个页面的简单设计稿登录页。首页列表页。详情页。表单新增页。画板命名建议使用英文或有意义的中文例如 login、home、detail、create-form。如果设计稿里每个页面有多套状态在画板命名里标注出来例如 home_empty、home_loading、home_normal。画板名会对应到 MCP 读取设计文件时的节点命名越规范生成越稳定。3.2 在 Workbuddy 中创建项目并接入设计来源创建项目后在资源面板里添加设计源。接入方式通常有两种通过设计工具 MCP选择对应设计工具的 MCP 服务例如 Figma MCP输入 token 或文件链接Workbuddy 会读取设计稿里的画板、字体、图层和文本信息。上传静态图片直接把设计稿导出为 PNG 或 JPEG 后上传。设计稿导出时注意保持图层分组和自动布局完整。自动布局在 AI 生成页面代码时非常关键因为 AI 需要理解元素之间的间距、对齐和排列关系。如果设计稿里全是绝对定位的散落图层生成出来的页面很可能在不同屏幕尺寸下错乱。3.3 通过 MCP 读取数据源并生成业务页面设计稿接入之后下一步是让 AI 知道数据库长什么样这一步才用到数据库 MCP Server。典型操作顺序如下在 MCP 配置里添加数据库 MCP Server确认连接成功。在 Workbuddy 的 AI 对话输入框里发送类似指令“读取 order_app 数据库中的 orders 表结构并根据设计稿生成订单列表页和数据新增表单。”AI 调用 MCP 工具返回表结构、字段注释、字段类型。AI 结合设计稿和表结构生成页面代码。如果数据库里还没有合适的表可以先创建一张订单表用于演示。下面是一份简单的建表 SQLCREATE TABLE orders ( id BIGINT PRIMARY KEY AUTO_INCREMENT, order_no VARCHAR(32) NOT NULL COMMENT 订单号, customer_name VARCHAR(64) NOT NULL COMMENT 客户名称, amount DECIMAL(12, 2) NOT NULL COMMENT 订单金额, status TINYINT NOT NULL DEFAULT 0 COMMENT 状态0新建 1已确认 2已取消, created_at DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT 创建时间 ) ENGINE InnoDB DEFAULT CHARSET utf8mb4 COMMENT 订单表;这张表包含常用字段类型主键、字符串、金额、状态枚举、时间。AI 在生成列表、详情和表单时会依据字段自动映射输入控件例如 amount 映射为数字输入框status 映射为下拉框。3.4 配置连接器让 APP 在运行时访问数据库页面生成只是第一步。预览时如果页面里的数据是写死的说明还没有接上连接器。要让 APP 真正读取数据库必须添加运行时连接器。操作路径一般是打开项目的数据接入或连接器面板。新建一个 MySQL 连接器填写 host、port、database、username、password。在生成的页面代码里把数据请求方法绑定到这个连接器。运行预览确认列表数据来自数据库而不是模拟数据。如果是云端数据库需要确认网络访问权限。如果是本机数据库需要确认 Workbuddy 运行环境能访问 3306 端口。3.5 预览、调试和发布在 Workbuddy 里预览和调试通常在同一个界面完成。遇到问题时的检查顺序看页面是否正常渲染排除前端代码错误。看网络请求是否返回数据确认连接器是否生效。看数据库日志有没有收到查询确认连接器和数据库之间是否连通。查看 AI 生成的日志或运行日志定位是构建期 MCP 问题还是运行期连接器问题。确认预览没有问题后再进入发布流程。发布到测试环境时连接器配置要改成测试环境的数据库地址不能继续用本机 127.0.0.1。4. 关键参数和配置项说明4.1 MCP Server 参数速查表参数含义常见值错误配置表现command启动 MCP Server 的可执行命令npx、node、pythonAI 无法调用工具报 command not foundargs传给命令的参数-y、包名MCP Server 启动失败env进程环境变量数据库账号、token连接被拒、权限不足transport传输方式stdio 或 http/sse连接超时或握手失败需要说明的是transport 参数不是所有配置格式都默认出现。有的客户端默认使用 stdio有的默认使用 HTTP 或 SSE。如果你在远程环境里运行 MCP Server就需要显式配置 HTTP 传输否则本地工具能通、远程环境不通。4.2 连接器参数速查表参数含义影响poolSize连接池大小太小并发高时排队太大会耗尽数据库连接connectTimeoutMs连接超时时间过短导致慢网络误判失败readTimeoutMs读取超时时间过短导致大查询被截断ssl是否启用 SSL 加密必须与数据库服务端配置一致参数调优不是越大越好。连接池从 10 改成 100并不能解决慢查询问题反而可能把数据库连接数打满。正确做法是先通过日志和监控确认瓶颈在连接数、SQL 性能还是网络延迟再决定调哪个参数。4.3 设计稿导入命名规范项目推荐做法不推荐做法画板命名login、home_detail页面1、未命名、副本(2)图层结构分组清晰使用自动布局大量绝对定位和散落图层字体使用系统字体或明确字体变量特殊字体导致生成后字体缺失颜色使用设计令牌或统一色板每个图层单独硬编码颜色5. 常见问题和排查链路5.1 现象、原因和解决方案对照表问题现象常见原因检查方式处理建议所有连接器都无法使用认证过期、网络变化或 MCP Server 崩溃查看连接器状态和日志重新授权、重启 MCP Server、确认网络生成页面数据全部是模拟数据连接器尚未绑定到页面数据请求检查页面代码里的数据源把数据请求方法切换到连接器AI 说读不到数据库表MCP Server 未启动或 env 配置错误查看 MCP Server 启动日志核对 host、端口、账号、数据库名设计稿导入后页面错乱图层命名混乱或缺少自动布局回到设计工具检查图层整理图层、统一命名后再导入预览时接口超时连接池太小或数据库负载高查看慢查询和连接池监控调大 poolSize、优化 SQL、增加索引5.2 从现象到根因的排查顺序排查时不要一开始就改代码按顺序检查输入是否正确设计稿命名、数据库名、账号密码有没有写错。配置是否生效MCP Server 配置有没有保存并重新加载。依赖版本是否匹配Node 版本、MCP Server 包版本、Workbuddy 版本。网络和权限本机能访问数据库端口吗云端数据库白名单包含当前 IP 吗。日志MCP Server 日志、Workbuddy 运行日志、数据库日志分别有没有明确报错。最后才怀疑代码和配置逻辑本身。5.3 至少要注意的三个坑坑一把 MCP 当成运行时连接器来用。MCP 是构建期 AI 获取上下文和调用工具用的生成后的 APP 不会自带 MCP Client。运行期读写数据必须靠连接器。如果只配了 MCP 没配连接器页面生成没问题但运行时永远拿不到数据。坑二用本机地址连接远程数据库。学习环境中连接器用 127.0.0.1 没问题发布到云端后127.0.0.1 会指向 Workbuddy 运行环境本身连接必然失败。发布前要把 host 改成目标环境的数据库地址。坑三把数据库密码写死在连接器配置里并提交到共享仓库。连接器配置属于敏感信息学习环境无所谓生产环境必须走密钥管理或环境变量注入避免密码泄露到代码仓库。6. 学习环境与生产环境的差异6.1 学习环境怎么快速跑通学习阶段推荐这样做用 Docker 启动一个本地 MySQL避免污染本机数据库环境。使用 Workbuddy 的默认预览模式。设计稿用 3 到 5 页的简单原型不要一上来就导入复杂后台系统。连接器和 MCP Server 都指向同一个本地数据库方便对照验证。Docker 启动 MySQL 的参考命令docker run --name workbuddy-mysql \ -e MYSQL_ROOT_PASSWORDroot123 \ -e MYSQL_DATABASEorder_app \ -p 3306:3306 \ -d mysql:8.0启动后用下面的命令确认数据库可访问mysql -h 127.0.0.1 -P 3306 -u root -p root123 -e SHOW DATABASES;6.2 生产环境还要补哪些能力生产环境至少还要考虑配置外置化数据库地址、账号、密钥不能写死在项目文件里用环境变量或配置中心管理。日志和监控连接器调用量、失败率、延迟要有指标MCP Server 是否存活要有监控。权限和安全数据库使用最小权限账号应用账号只授予业务库的增删改查权限。异常处理连接器超时、重试、熔断要有明确策略。回滚方案发布前保留上一版本连接器配置变更后要能快速回退。6.3 可复用的上线前检查清单发布前按这份清单逐项确认设计稿生成页面是否已在目标分辨率或真机下验证。MCP Server 是否只在构建期可用运行环境里是否已关闭。连接器是否指向生产数据库而不是开发库。数据库账号是否为最小权限账号。数据库地址是否在目标网络可达范围内。连接池大小、超时时间是否根据压测调整过。数据库密码是否通过环境变量或密钥服务注入。日志里是否包含连接失败、慢查询等关键信息。是否保存了可回滚的上一个版本。注意不要只验证程序能启动还要验证输入、输出、异常分支和日志是否符合预期。连接器配置变了但页面没有重试逻辑网络抖动时用户看到的就是白屏或报错。7. 扩展方向与练习建议7.1 组合多个 MCP Server已经能跑通设计稿到 APP 的最小闭环后可以练习把多个 MCP Server 组合起来。比如同时挂数据库 MCP 和一个查询天气或查询快递的第三方 API MCP让 AI 生成一个既读数据库又调用外部接口的应用。MCP 的价值在于组合而不是单点接入。7.2 把固定页面改成动态路由设计稿里的列表页通常只有一版但真实应用里列表和详情页往往通过路由参数联动。可以在 AI 对话里补充“点击列表项跳转到详情页并传入订单 ID”这类业务约束观察生成的代码是否符合预期。这个练习能检验你是否真的理解了页面之间的数据流。7.3 用连接器对接 REST API很多团队的前端应用不直接访问数据库而是通过后端网关接口。练习时在连接器里新增一个 REST 类型配置 baseUrl 和鉴权方式让页面从接口拿数据。这个方向更接近真实团队的技术架构也更适合后续接入统一鉴权和限流。7.4 给新手的核心建议不要把“一键设计稿变 APP”理解成不需要理解数据流。恰恰相反能把这个流程跑得越稳越说明你理解构建期和运行期的边界。连接器和 MCP 的差异本质上就是这两条链路的分界点MCP 决定 AI 能不能把活干对连接器决定应用能不能把数据跑通。把这层关系想清楚比记住任何按钮的位置都重要。