@lark-apaas/coding-steering 0.1.32-beta.0 → 0.1.32-dev.05acdd1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (65) hide show
  1. package/package.json +6 -6
  2. package/steering/design-html/skills/charts/SKILL.md +4 -0
  3. package/steering/design-html/skills/pptx-style-extract/SKILL.md +71 -26
  4. package/steering/design-html/skills/pptx-style-extract/font-fallback.yaml +3 -3
  5. package/steering/design-html/skills/pptx-style-extract/scripts/census.py +26 -14
  6. package/steering/design-html/skills/pptx-style-extract/scripts/check_v2.py +153 -8
  7. package/steering/design-html/skills/pptx-style-extract/scripts/draft.py +2831 -293
  8. package/steering/design-html/skills/pptx-style-extract/scripts/extract.py +544 -22
  9. package/steering/design-html/skills/pptx-style-extract/scripts/ooxml.py +19 -2
  10. package/steering/design-html/skills/pptx-style-extract/scripts/package.py +991 -165
  11. package/steering/design-html/skills/pptx-style-extract/scripts/parts.py +22 -3
  12. package/steering/design-html/skills/pptx-style-extract/scripts/query.py +4 -9
  13. package/steering/design-html/skills/pptx-style-extract/scripts/render_pages.py +20 -12
  14. package/steering/design-html/skills/pptx-style-extract/scripts/test_asset_judgment_package.py +556 -0
  15. package/steering/design-html/skills/pptx-style-extract/scripts/test_background_composite.py +364 -0
  16. package/steering/design-html/skills/pptx-style-extract/scripts/test_color_contract.py +60 -0
  17. package/steering/design-html/skills/pptx-style-extract/scripts/test_design_consumer_contract.py +76 -0
  18. package/steering/design-html/skills/pptx-style-extract/scripts/test_flow_layout_contract.py +528 -0
  19. package/steering/design-html/skills/pptx-style-extract/scripts/test_layout_css.py +1814 -0
  20. package/steering/design-html/skills/pptx-style-extract/scripts/test_logo_scope.py +600 -0
  21. package/steering/design-html/skills/pptx-style-extract/scripts/test_rounded_contract.py +112 -0
  22. package/steering/design-html/skills/pptx-style-extract/scripts/test_text_role_contract.py +315 -0
  23. package/steering/design-html/skills/pptx-style-extract/scripts/verify_layout_assets.py +421 -0
  24. package/steering/design-html/skills/pptx-style-extract/scripts/verify_logo_scope.py +12 -0
  25. package/steering/design-html/skills/pptx-style-extract/v2-format-spec.md +27 -15
  26. package/steering/design-html/skills/preflight/scripts/probe.sh +0 -0
  27. package/steering/nestjs-react-fullstack/skills/app-init-feasibility-guide/SKILL.md +1 -0
  28. package/steering/nestjs-react-fullstack/skills/authn-guide/SKILL.md +6 -0
  29. package/steering/nestjs-react-fullstack/skills/authz-guide/SKILL.md +5 -5
  30. package/steering/nestjs-react-fullstack/skills/authz-guide/references/dynamic-permission-guide.md +1 -1
  31. package/steering/nestjs-react-fullstack/skills/client-builtins-file-storage-service/SKILL.md +37 -113
  32. package/steering/nestjs-react-fullstack/skills/client-builtins-user-service/SKILL.md +13 -2
  33. package/steering/nestjs-react-fullstack/skills/code-fix/SKILL.md +7 -7
  34. package/steering/nestjs-react-fullstack/skills/coding-guide/SKILL.md +149 -24
  35. package/steering/nestjs-react-fullstack/skills/connections-sdk/SKILL.md +202 -0
  36. package/steering/nestjs-react-fullstack/skills/nestjs-cache/SKILL.md +265 -0
  37. package/steering/nestjs-react-fullstack/skills/plugin-guide/SKILL.md +158 -543
  38. package/steering/nestjs-react-fullstack/skills/plugin-guide/references/plugin-coding-guide.md +15 -1
  39. package/steering/nestjs-react-fullstack/skills/plugin-guide/references/table.md +30 -14
  40. package/steering/nestjs-react-fullstack/skills/raw-sql-boundary-audit/SKILL.md +63 -0
  41. package/steering/nestjs-react-fullstack/skills/server-builtins-file-storage-service/SKILL.md +1 -1
  42. package/steering/nestjs-react-fullstack/skills_common/mcp-guide/SKILL.md +77 -0
  43. package/steering/nestjs-react-fullstack/skills_common/mcp-guide/references/debugging.md +81 -0
  44. package/steering/nestjs-react-fullstack/skills_common/mcp-guide/references/mcp-apps.md +205 -0
  45. package/steering/nestjs-react-fullstack/skills_common/mcp-guide/references/tool-authoring.md +206 -0
  46. package/steering/nestjs-react-fullstack/skills_common/trigger-guide/SKILL.md +284 -12
  47. package/steering/nestjs-react-fullstack/skills_local/plugin-guide/SKILL.md +4 -0
  48. package/steering/vite-react/skills/plugin-guide/SKILL.md +3 -1
  49. package/steering/vite-react/skills/react-three-fiber/SKILL.md +4 -0
  50. package/steering/nestjs-react-fullstack/skills/client-add-aily-web-chat/SKILL.md +0 -139
  51. package/steering/nestjs-react-fullstack/skills/feishu/SKILL.md +0 -269
  52. package/steering/nestjs-react-fullstack/skills/feishu/references/approval.md +0 -214
  53. package/steering/nestjs-react-fullstack/skills/feishu/references/attendance.md +0 -163
  54. package/steering/nestjs-react-fullstack/skills/feishu/references/bitable.md +0 -311
  55. package/steering/nestjs-react-fullstack/skills/feishu/references/calendar.md +0 -190
  56. package/steering/nestjs-react-fullstack/skills/feishu/references/contacts.md +0 -160
  57. package/steering/nestjs-react-fullstack/skills/feishu/references/doc.md +0 -257
  58. package/steering/nestjs-react-fullstack/skills/feishu/references/drive.md +0 -104
  59. package/steering/nestjs-react-fullstack/skills/feishu/references/events.md +0 -199
  60. package/steering/nestjs-react-fullstack/skills/feishu/references/id-convert.md +0 -128
  61. package/steering/nestjs-react-fullstack/skills/feishu/references/messaging.md +0 -207
  62. package/steering/nestjs-react-fullstack/skills/feishu/references/oauth.md +0 -165
  63. package/steering/nestjs-react-fullstack/skills/feishu/references/perm.md +0 -91
  64. package/steering/nestjs-react-fullstack/skills/feishu/references/wiki.md +0 -165
  65. package/steering/nestjs-react-fullstack/skills_common/trigger-guide/references/trigger-lifecycle.md +0 -301
@@ -68,7 +68,9 @@
68
68
  ```markdown
69
69
  [Schema 摘录卡]
70
70
  - pluginInstanceId / actionKey / outputMode
71
- - input.required / output.fields / readme.constraints
71
+ - input.required: [字段名: 类型, ...]
72
+ - output.fields: [字段名: 类型, ...](每个字段必须在代码中被消费,未消费需注释说明原因)
73
+ - readme.constraints
72
74
  - 调用侧决策: Client | Server
73
75
  ```
74
76
 
@@ -339,6 +341,18 @@ this.somePluginInstanceSideEffect(input).catch(error => {
339
341
 
340
342
  ---
341
343
 
344
+ ### 调用错误分类与应对
345
+
346
+ | 错误类型 | 含义 | 应对策略 |
347
+ |----------|------|---------|
348
+ | `InputValidationError` | 入参不符合 schema | 修复参数后重试,不应出现在生产环境 |
349
+ | `RateLimitError` | 触发限流 | 指数退避重试(1s/2s/4s),最多 3 次 |
350
+ | `ExecutionError` | 插件执行失败 | 记录日志 + 降级方案(如规则计算)+ 通知用户 |
351
+ | `OutputValidationError` | 返回值不符合 schema | 记录异常返回 + 使用默认值或降级 |
352
+ | 网络超时 | 请求超时 | 重试 + 超时后降级 |
353
+
354
+ ---
355
+
342
356
  ### outputMode 与调用侧选择
343
357
 
344
358
  先通过 `get_plugin_ai_json(pluginInstanceId)` 获取 `actions[].outputMode`:
@@ -146,6 +146,20 @@
146
146
  ❌ searchRecords 拉全量 → find 找单条 → 必须用 getRecord
147
147
  ```
148
148
 
149
+ ## 数据架构选择(应用读取多维表格数据时)
150
+
151
+ 按**查询模式**选择架构:
152
+
153
+ | 查询模式 | 架构选择 | 实现方式 |
154
+ |---------|---------|---------|
155
+ | 展示/编辑单条记录 | 纯插件 | `getRecord` / `batchUpdateRecords` |
156
+ | 列表分页浏览 | 纯插件 | `searchRecords` + `pageToken` 游标分页 |
157
+ | 统计聚合(计数/求和/平均) | **纯插件 + aggregateQuery** | 禁止 searchRecords 全量拉取后内存计算 |
158
+ | 统计 + 明细下钻 | 纯插件 | 聚合用 `aggregateQuery`,下钻用 `searchRecords` + filter |
159
+ | 排行榜 / TOP N | 纯插件 | `searchRecords` + sort + pageSize=N |
160
+ | 复杂排序/多表关联/全文搜索 | 插件同步 + 本地数据库 | 定时/Webhook 同步到 postgres,复杂查询走数据库 |
161
+ | 高频写入 + 读取 | 本地数据库为主 | 多维表格仅作展示/备份 |
162
+
149
163
  ## 数据分析类Action补充说明
150
164
 
151
165
  `aggregateQuery` 用于分组聚合统计,支持 dimensions(分组维度)和 measures(聚合计算)。
@@ -301,23 +315,25 @@ const chartData =
301
315
 
302
316
  ## 推荐 UI 组件
303
317
 
304
- | BizType | 展示 | 录入 |
305
- | ---------------------------- | --------------------------------------------------------------------- | ------------------------------------------- |
306
- | `User` | `<UserDisplay users={ids.map(id => ({ user_id: id.toString() }))} />` | `<UserSelect multiple />` |
307
- | `Url` | `<Hyperlink value={val} readOnly />` | `<Hyperlink readOnly={false} />` |
308
- | `SingleSelect`/`MultiSelect` | 文本/标签 | `<Select>` 选项来自 enumValues |
309
- | `DateTime` | `new Date(ts).toLocaleDateString()` | `<Input type="date" />` |
310
- | `Checkbox` | `value ? '是' : '否'` | `<Checkbox />` |
311
- | `Currency` | `¥${value.toFixed(2)}` | `<Input type="number" />` |
312
- | `Progress` | `${value}%` 或进度条 | `<Input type="number" min={0} max={100} />` |
313
- | `Rating` | `'★'.repeat(value) + '☆'.repeat(5-value)` | `<Input type="number" min={0} max={5} />` |
318
+ | BizType | 展示 | 录入 |
319
+ | ---------------------------- | -------------------------------------------------------------------- | ------------------------------------------- |
320
+ | `User` | `<UserDisplay value={ids.map(id => id.toString())} />` | `<UserSelect multiple />` |
321
+ | `Url` | `<Hyperlink value={val} readOnly />` | `<Hyperlink readOnly={false} />` |
322
+ | `SingleSelect`/`MultiSelect` | 文本/标签 | `<Select>` 选项来自 enumValues |
323
+ | `DateTime` | `new Date(ts).toLocaleDateString()` | `<Input type="date" />` |
324
+ | `Checkbox` | `value ? '是' : '否'` | `<Checkbox />` |
325
+ | `Currency` | `¥${value.toFixed(2)}` | `<Input type="number" />` |
326
+ | `Progress` | `${value}%` 或进度条 | `<Input type="number" min={0} max={100} />` |
327
+ | `Rating` | `'★'.repeat(value) + '☆'.repeat(5-value)` | `<Input type="number" min={0} max={5} />` |
328
+
329
+ BizType 为 `User` 的字段展示必须使用 business-ui `UserDisplay`;不要直接渲染、拼接或 `join` 用户 ID 文本。
314
330
 
315
331
  ### 组件代码示例
316
332
 
317
333
  ```tsx
318
- // 人员展示
334
+ // 人员展示(business-ui UserDisplay 使用 value;不要传 users)
319
335
  <UserDisplay
320
- users={record['人员字段']?.map(userId => ({ user_id: userId.toString() })) || []}
336
+ value={record['人员字段']?.map(userId => userId.toString()) || []}
321
337
  size="small"
322
338
  showLabel={true}
323
339
  />
@@ -365,13 +381,13 @@ const chartData =
365
381
  const columns = [
366
382
  // 文本字段 - 注意读取格式是 { text: string }
367
383
  { title: '文本', dataIndex: ['record', '文本字段', 'text'], key: 'text' },
368
- // 人员字段 - 使用 UserDisplay 组件
384
+ // 人员字段 - 使用 business-ui UserDisplay 组件,传 value(用户 ID 字符串数组),不要传 users
369
385
  {
370
386
  title: '负责人',
371
387
  key: 'user',
372
388
  render: (_, record) => (
373
389
  <UserDisplay
374
- users={record.record['人员字段']?.map((id) => ({ user_id: id.toString() })) || []}
390
+ value={record.record['人员字段']?.map((id) => id.toString()) || []}
375
391
  size="small"
376
392
  />
377
393
  ),
@@ -0,0 +1,63 @@
1
+ ---
2
+ name: raw-sql-boundary-audit
3
+ description: >-
4
+ Use when editing or reviewing NestJS backend database code that contains Drizzle raw `sql` tagged templates,
5
+ db.execute(sql`...`), report/statistics/aggregation endpoints, filter (...), CASE WHEN, window functions,
6
+ or custom type / Date range parameters.
7
+ steering: true
8
+ steering-inclusion: always
9
+ steering-topic: raw_sql_boundary_audit
10
+ match-template-name: nestjs-react-fullstack
11
+ unavailable-agents:
12
+ - AppInit
13
+ - SpecDoc
14
+ ---
15
+
16
+ # Drizzle raw SQL 参数边界审计
17
+
18
+ 本 skill 只管一件事:改 NestJS 后端数据库代码时,raw `sql` 模板里的 `${...}` 参数必须是数据库 driver 可直接接收的标量。Drizzle helper 绑定 schema 列会按列 encoder 处理;raw `sql` 模板参数不会自动调用列的 `toDriver`。
19
+
20
+ ## 何时必须执行审计
21
+
22
+ 满足任一条件就执行:
23
+
24
+ - 正在修改 `server/**/*.service.ts` 或 repository 中的数据库查询;
25
+ - 文件里有 `sql\``、`db.execute(sql`、`filter (...)`、`CASE WHEN`、窗口函数或复杂 where;
26
+ - 需求涉及统计、报表、趋势、排行、周期范围、截止时间、创建/完成时间等后端汇总接口。
27
+
28
+ ## 审计步骤(写代码前和提交前各做一次)
29
+
30
+ 1. 先读 `server/database/schema.ts`,确认相关列类型和 custom type。
31
+ 2. 枚举当前 service/repository 里的 raw SQL 模板;不要只看刚新增的查询。可用搜索辅助,但结论以读代码为准:
32
+
33
+ ```bash
34
+ rg -n 'sql`|db\.execute\(sql|filter \(|CASE WHEN|OVER \(' server
35
+ ```
36
+
37
+ 3. 对每个 raw SQL 模板逐个检查 `${...}` 参数:
38
+ - 已是 string/number/boolean、ISO string、普通 ID、`sql.join(...)` 中逐个参数化的标量:可以保留;
39
+ - `user_profile` 是特殊 custom type,不适用“普通 ID 标量即可”的泛化判断;raw SQL 遇到 `user_profile` 列必须按 coding-guide 的三侧写法处理:读 `(col).user_id`,写 `ROW(${userId})::user_profile`,过滤 `(col).user_id = ${userId}`;禁止裸列 SELECT、`col = ${userId}`、`col::text = ${userId}` 或 `col = ROW(...)::user_profile` 比较;
40
+ - 是 `Date`、date/timestamptz/custom type 的运行时对象,或变量来源不明但表示时间/自定义结构:先转 driver-safe 标量再传入 raw SQL;日期时间用 `.toISOString()`;
41
+ - 如果能用 `gte(col, Date)` / `lt(col, Date)` / `eq(col, value)` / `insert().values()` / `update().set()` 等绑定 schema 列的 helper 表达,就优先改回 helper。
42
+ 4. 保留 helper 安全路径:不要把 `gte(col, Date)`、`lt(col, Date)` 这类绑定列的 Drizzle helper 当成坏边界。
43
+ 5. 改完后调用受影响的真实 API,至少覆盖一个会触发该 raw SQL 的范围/筛选参数;HTTP 200 且后端无参数序列化错误才算完成。
44
+
45
+ ## 写法示例
46
+
47
+ ```typescript
48
+ const rangeStart: Date = getRangeStart(range);
49
+ const rangeStartIso: string = rangeStart.toISOString();
50
+
51
+ // helper 绑定 schema 列,可以直接传 Date
52
+ where: gte(tasks.createdAt, rangeStart)
53
+
54
+ // raw SQL 参数先转 driver-safe 标量
55
+ total: sql<number>`
56
+ count(*) filter (where ${tasks.createdAt} >= ${rangeStartIso})
57
+ `
58
+
59
+ // 不要把 Date/custom type 运行时对象直接放进 raw SQL 模板参数
60
+ total: sql<number>`
61
+ count(*) filter (where ${tasks.createdAt} >= ${rangeStart})
62
+ `
63
+ ```
@@ -11,7 +11,7 @@ match-template-name: nestjs-react-fullstack
11
11
  在 NestJS 服务端代码中使用 `FileService` 进行文件上传、下载、删除和管理。
12
12
 
13
13
  > **使用注意**: 仅用于服务端文件处理场景,非必要文件上传下载场景请使用前端 `client-builtins-file-storage-service` skill。
14
- > CLI 调试场景请参考 `file-storage` skill。
14
+ > **入口边界**:本 SDK 是**服务端代码**读写应用存储的入口;Agent 在对话 / 开发中自己上传或调试文件,先加载应用文件存储操作 skill(按「应用文件存储 / 文件上传 / 文件下载」召回),用其 CLI 命令操作,具体命令一律以该 skill 为准。二者与本 SDK 操作同一个应用存储桶,但**该 CLI 命令只供 Agent 在沙箱终端使用,禁止写进服务端代码**。
15
15
 
16
16
  ## 使用场景
17
17
 
@@ -0,0 +1,77 @@
1
+ ---
2
+ name: mcp-guide
3
+ description: "Use when 用户要把应用能力开放给外部 Agent / 工作伙伴 / MCP 客户端调用,新增或修改 MCP 工具,给工具结果加界面(MCP Apps / ui:// 资源),维护应用 Skill(server/mcp/skills/<name>/SKILL.md,SDK 注册为 MCP Prompt),或要在开发态核对、调用、调试 MCP 工具。触发词:MCP, MCP Server, MCP 工具, MCP Apps, ui://, @McpTools, @McpTool, @McpUiResource, McpToolError, readMcpUiTemplate, miaoda-mcp validate, .spark/mcp/manifest.json, tools/list, tools/call, resources/read, prompts/list, prompts/get, mcp_call, 开放给 Agent, 工作伙伴调用, Agent 调用应用, 应用 Skill, server/mcp, server/mcp/ui, server/mcp/skills。不负责 HTTP 对外开放接口(走 openapi-guide)、自动化触发器(走 trigger-guide)。"
4
+ steering: true
5
+ steering-topic: mcp_guide
6
+ match-template-name: nestjs-react-fullstack
7
+ gate-tools:
8
+ - tool: mcp_call
9
+ ---
10
+
11
+ # MCP 开发与调试
12
+
13
+ 应用的 MCP Server 是全栈工程里多出来的一层出口:同仓、同域名、同版本。SDK(`@lark-apaas/fullstack-nestjs-core` 重导出 `@lark-apaas/nestjs-mcp`)已经内置端点 `POST /__innerapi__/mcp`、Streamable HTTP 协议、zod 校验、身份读取、清单导出、`ui://` 资源与应用 Skill(MCP Prompt)下发。你只写三种文件:工具类、界面入口、应用 Skill。
14
+
15
+ **真值顺序**:工程内 `node_modules/@lark-apaas/nestjs-mcp/` 的 `README.md` 与 `dist/index.d.ts` > 本文。装饰器选项、类型名、返回值形状以 `index.d.ts` 为准;本文与它冲突时按包改,不按本文改。
16
+
17
+ ## 固定路径(不探测)
18
+
19
+ | 路径 | 内容 |
20
+ |---|---|
21
+ | `server/mcp/tools/<域>.tools.ts` | 工具类:一个业务域一个文件,`@McpTools()` 类 + 多个 `@McpTool()` 方法 |
22
+ | `server/mcp/ui/<entry>/index.html`(+ `main.tsx`)、`server/mcp/ui/tsconfig.json` | MCP Apps 界面源码:独立的浏览器代码,Vite 预设自动打成 `dist/mcp-ui/<entry>.html` |
23
+ | `server/mcp/skills/<name>/SKILL.md` | 应用 Skill:一个业务流程一份,给消费方 Agent 看的用法说明,SDK 注册为同名 MCP Prompt |
24
+ | `.spark/mcp/manifest.json` | SDK 生成的离线清单,随代码提交,不手改 |
25
+
26
+ `server/mcp/` 不存在即为首次开通;开通只需建上述文件并把工具类注册为所属业务模块的 provider。`McpModule` 已由 `PlatformModule.forRoot()` 引入,SDK 启动时自动发现工具类——`app.module.ts` 不动,不写注册表,不写 `tools/index.ts`。
27
+
28
+ 三份 Markdown 别混:本文(教你写代码)、`server/mcp/skills/*/SKILL.md`(应用产物,教下游 Agent 用工具)、SDK README(真值)。不把本文复制成应用 Skill,应用 Skill 不加 `steering: true`。
29
+
30
+ ## 前置检查(一条命令)
31
+
32
+ ```bash
33
+ ls -d node_modules/@lark-apaas/nestjs-mcp node_modules/@lark-apaas/fullstack-vite-preset/lib/vite-plugins/mcp-ui-plugin.js
34
+ ```
35
+
36
+ - 缺 `@lark-apaas/nestjs-mcp` → 当前 `@lark-apaas/fullstack-nestjs-core` 不含 MCP 层(`1.1.62` 起含)。告知用户升级 core,停止;不装 `@modelcontextprotocol/sdk`、不手写端点。
37
+ - 缺 `mcp-ui-plugin.js` → 只能做工具、不能做界面(`@lark-apaas/fullstack-vite-preset` `1.0.39` 起含)。要做界面先让用户升级该预设。Rspack 预设不支持 MCP Apps。
38
+
39
+ ## 任务路由
40
+
41
+ | 任务 | 读 |
42
+ |---|---|
43
+ | 新增 / 修改工具、开通 MCP、维护应用 Skill | `references/tool-authoring.md` |
44
+ | 给工具结果加界面、改界面、界面与工具联动 | `references/mcp-apps.md` |
45
+ | 用 `mcp_call` 核对与调用、按错误定位、本地模式调试 | `references/debugging.md` |
46
+
47
+ 改完必跑 `npx miaoda-mcp validate`,再按 `references/debugging.md` 的回路用 `mcp_call` 验证;三类任务共用。`mcp_call` 报「当前运行环境不支持」是本地 CLI 宿主,走该文件的本地模式。向用户汇报用业务表述(「找到 4 个演示航班」),不贴 JSON。
48
+
49
+ ## 不变量
50
+
51
+ 1. schema 用 zod,提成常量放类上方;方法签名固定 `(input: Infer<typeof In>, ctx: McpContext)`,返回 `McpToolResult<typeof Out>`。签名写错在 `npm run type:check:server` 暴露。
52
+ 2. `description` 面向模型:用途、何时调用、参数来源、返回什么、失败怎样。每个 zod 字段 `.describe()`。消费方 Agent 只靠这些选工具、填参数。
53
+ 3. 四项 `annotations` 显式写出。只读工具必须 `readOnlyHint: true`:缺省会被当成可能写数据,调试时每次都要 `safe: true`,消费方也会额外确认。
54
+ 4. 声明了 `outputSchema` 就返回匹配的 `structuredContent`,对不上时 `mcp_call` 报「输出与其声明的 outputSchema 不符」;列表工具入参带 `limit` 与 `cursor`;写操作的幂等由 Service 保证,不引入幂等键字段。
55
+ 5. 业务失败抛 `McpToolError(message, { code })`,Agent 原样收到;其他异常只落日志、返回通用提示,Agent 看不到原因。
56
+ 6. 身份只从 `ctx.user` 读;权限与行级过滤留在 Service。工具类作为业务模块 provider 注册,单例。
57
+ 7. 工具名 = `prefix + 方法名`,匹配 `^[A-Za-z0-9_.-]{1,128}$`,全应用唯一;用 `域_动作`。
58
+ 8. 界面源码只放 `server/mcp/ui/<entry>/`,类型检查走 `server/mcp/ui/tsconfig.json`,`tsconfig.node.json` 的 `exclude` 加 `server/mcp/ui`。用 `@McpUiResource` + `readMcpUiTemplate('<entry>')` 下发,工具用 `ui: { resourceUri }` 关联。
59
+ 9. 新增、改名、删除工具后同步改对应的 `server/mcp/skills/<name>/SKILL.md`;frontmatter 的 `name` 必须等于目录名。
60
+
61
+ ## 禁止
62
+
63
+ - 从入参接收用户 ID、token、连接串——身份来自网关,入参里的身份可伪造。
64
+ - 把 `requireUser` 设为 `false`,或自己拼一个 `x-larkgw-suda-webuser` 头来让调用通过——SDK 会把它当真实用户,写工具会以这个身份落库、发通知。
65
+ - 手改 `.spark/mcp/manifest.json`——`validate --check` 会判不一致。
66
+ - 服务端 import `server/mcp/ui/` 里的源码,或界面 import `client/`、`server/` 里的业务代码、工具类、Node 模块——子构建的边界检查直接报错,服务端只经 `readMcpUiTemplate` 读构建产物。
67
+ - 界面里存凭证、直连业务系统——沙箱 iframe 是独立 origin,用户登录态带不进来;数据走宿主转发的工具调用。
68
+ - `McpToolError.data` 与 `structuredContent` 里放密钥、内部连接信息——两者原样进 Agent 上下文。
69
+ - 自己实现 MCP 协议、JSON-RPC、`/mcp` 路由、凭证校验——SDK 与网关已做,重复实现会与网关映射冲突。
70
+
71
+ ## 交付前核对
72
+
73
+ 1. `validate` 通过;`list_tools` 与源码里的工具、资源一一对应。
74
+ 2. 每个工具有面向模型的 `description`、四项 `annotations`;写工具有 `outputSchema`。
75
+ 3. 每个 `ui.resourceUri` 能 `read_resource` 读到,界面拿到 `structuredContent` 后能渲染;`npx tsc --noEmit -p server/mcp/ui/tsconfig.json` 通过。
76
+ 4. `server/mcp/skills/` 下每个业务流程一份 SKILL.md,合起来覆盖全部工具:何时调用、如何选工具、调用顺序、约束、失败处理、界面 URI;目录接口的 `prompts[]` 与目录一一对应。
77
+ 5. `.spark/mcp/manifest.json` 随代码提交。
@@ -0,0 +1,81 @@
1
+ # 调试:mcp_call、错误定位、本地模式
2
+
3
+ 本文说的「沙箱」= 工具清单里有 `mcp_call` 的环境(妙搭云端 code-agent);「本地模式」= 没有 `mcp_call`、在开发者本机跑 `npm run dev` 的环境。先看自己有哪个,再读对应部分。
4
+
5
+ ## mcp_call
6
+
7
+ 云端沙箱里的开发态 MCP 调试工具。它经 MCP 网关连当前应用的开发态 MCP Server,以当前用户身份发起,与预览页里操作应用的身份一致。
8
+
9
+ | action | 参数 | 返回 |
10
+ |---|---|---|
11
+ | `list_tools` | 无 | server 名、每个工具的 name / title / description / annotations / `_meta.ui` / inputSchema(长 schema 截断)、资源清单 |
12
+ | `call` | `tool_name`(带 prefix 的完整名)、`arguments`(JSON 对象**字符串**,缺省 `{}`)、`safe` | 文本内容、`structuredContent`(超 12k 字符截断)、`isError`、耗时。脱敏后的完整结果超过 12k 字符时落盘到 `tmp/<会话>/tool/<调用ID>/result.json`,结果尾部给出路径,需要全量数据时 `read_file` 读它,不要缩小入参反复重调 |
13
+ | `read_resource` | `resource_uri`(如 `ui://order/list`) | uri、mimeType、`_meta.ui`、正文前若干字符 |
14
+
15
+ - `safe`:工具未声明 `annotations.readOnlyHint: true` 时,`call` 在发起前被拒为 `requires_safe`。只有这次调用影响的是你自建、且事后能自己清掉的数据时才传 `safe: true`;用户已有的真实数据未经明确要求不动。只读工具反复撞这条,是源码漏了 `readOnlyHint: true`,补注解而不是加 `safe`。
16
+ - 单个子请求 60s 无动静即超时,整次动作 600s 硬上限。server 是无状态 JSON 模式(不开 SSE),`ctx.extra.sendNotification` 发的 `notifications/progress` 到不了客户端、不会重置计时;超时只能靠缩小单次处理范围。
17
+ - 同一工具连续失败 4 次熔断 60s:先改代码或入参,不是等。`requires_safe`、`tool_not_found`、`aborted` 不计入熔断。
18
+ - 失败或 `isError: true` 时结果尾部附 Trace-ID 对应的 `server.log` / `trace.log` 片段。
19
+
20
+ **目录接口**:`GET http://localhost:<CLIENT_DEV_PORT><CLIENT_BASE_PATH>/__innerapi__/mcp/manifest`(`CLIENT_DEV_PORT` 默认 8080;`CLIENT_BASE_PATH` 沙箱里是平台下发的 `/app/<appId>`,漏了前缀拿不到 JSON,取值以 `.env.local` 或 dev server 启动日志为准)返回 `tools` / `resources` / `prompts` / `skills[]`(含 frontmatter 的完整正文)与源码定位,不要求身份,有无 `mcp_call` 都能 curl。应用 Skill 是 Prompt 不是资源,`mcp_call` 的三个动作都碰不到它,核对它只走这里。
21
+
22
+ ## 回路
23
+
24
+ 1. 改工具 / 资源 / 界面。
25
+ 2. `npx miaoda-mcp validate`。失败即改,不进下一步。
26
+ 3. 等 dev server 重启(`nest --watch` 会自动重启;界面改动由 `[mcp-ui]` 插件自动重建)。
27
+ 4. `list_tools` 核对清单与源码一致(`visibility: ['app']` 的工具也在清单里,属正常)。
28
+ 5. `call` 逐个只读工具跑一次真实入参。写工具只在能自己清掉痕迹(有对应删除 / 撤销工具,或业务上可撤回)时才真调并随手清理;否则只验证入参校验与 `McpToolError` 分支,汇报里写明「写入链路未真实验证」。
29
+ 6. 带界面的工具 `read_resource`。
30
+ 7. 每个 `McpToolError` 分支构造一次触发(不存在的 ID、非法状态),确认 `isError: true` 且 `code` 与 `description` 预告一致。
31
+ 8. 更新 `server/mcp/skills/<name>/SKILL.md`,`validate` 通过(frontmatter 不合法在这一步就失败),再 curl 目录接口:`skills[]` 有该 `name`、`content` 是最新正文,`prompts[]` 的 `description` 一致。
32
+
33
+ ## 错误分流
34
+
35
+ | 现象 | 原因 | 动作 |
36
+ |---|---|---|
37
+ | 端点 404「当前工程可能尚未接入 MCP 层,或 dev server 尚未就绪」 | `server/mcp` 不存在;dev server 没起来;零工具零资源无应用 Skill(SDK 此时返回 404) | 确认三者;有工具但 404 看启动日志是否被校验阻断 |
38
+ | `list_tools` 少了某个工具 | 类没进任何模块 `providers`,无任何日志提示 | 对照启动日志「已注册 N 个 MCP 工具:…」,缺的加进所属业务模块的 `providers` |
39
+ | dev server 起不来,报「MCP 工具必须使用单例及单例依赖」 | 工具类或其依赖是 request / transient 作用域 | 改回单例,身份从 `ctx.user` 取 |
40
+ | 启动日志「MCP 定义校验失败」 | 工具名不合法 / 重名、资源 URI 不以 `ui://` 开头 / 重名、`ui.resourceUri` 找不到 `@McpUiResource()`、同一方法同时标两个装饰器 | 按日志逐条修,`validate` 能提前查出 |
41
+ | `tool_not_found` | 名字没带 prefix,或用了 `title` | 用 `list_tools` 里的 name |
42
+ | `requires_safe` | 见上文 `safe` | 只读工具补注解;写工具按回路第 5 步——能清掉痕迹才 `safe: true`,否则只验错误分支 |
43
+ | `isError` + `code: MCP_USER_REQUIRED`(`prompts/get` / `resources/read` 则是 JSON-RPC error) | 请求没带用户身份:有 `mcp_call` 的环境里 curl 直连 dev server / NestJS 端口就是这样 | 无身份的 curl 只做 `tools/list`、`prompts/list`、`resources/list` 与目录接口;`tools/call` / `resources/read` 走 `mcp_call`,Prompt 正文看目录接口的 `skills[].content`。不改 `requireUser`、不拼身份头 |
44
+ | `isError` + 业务 `code` | 工具按设计抛了 `McpToolError` | 对照 `description` 检查是否预告了该 code;入参是否真的该触发 |
45
+ | `isError` + 通用失败提示 | 方法抛了非 `McpToolError` 的异常 | 读结果尾部 Trace-ID 日志定位;该异常若是可预期的业务失败,改抛 `McpToolError` |
46
+ | zod 校验错误 | 入参不符 inputSchema | 对照 `list_tools` 里的 schema 改 `arguments`;schema 本身不合理就改源码 |
47
+ | 「工具已执行,但输出与其声明的 outputSchema 不符」 | `structuredContent` 与 `outputSchema` 对不上 | 工具已跑通:改返回值或改 schema,不重试同一调用 |
48
+ | `timeout` | 单个子请求 60s 无动静,或整次超 600s | 收窄入参 / 分页 / 拆成「发起 + 查状态」两个工具;加进度通知无效(JSON 模式发不出去) |
49
+ | `connect_failed` / `http_error` / `unauthorized` | 网关或预览环境问题;`http_error` 500 先对下面 frontmatter 那行,应用自己也会 500 | 看 statusCode;不是应用代码问题时告知用户,不改代码绕 |
50
+ | 「已连续 4 次调用失败,已暂停对它的重复调用」 | 同一工具连续失败 4 次熔断 | 先修实现或入参,60s 后再验 |
51
+ | 「当前运行环境不支持开发态 MCP 调试」 | 本地 CLI 宿主没有 `mcp_call` 后端 | 走下节本地模式 |
52
+ | `read_resource` 报「读取 MCP Apps 界面产物失败」 | `dist/mcp-ui/<entry>.html` 不存在 | 入口名对齐 `readMcpUiTemplate('<entry>')`;确认 `server/mcp/ui/<entry>/index.html` 存在;看 `[mcp-ui]` 日志是否构建失败 |
53
+ | dev server 日志 `[mcp-ui] 构建失败:MCP UI 不能引用应用或服务端代码 / Node.js 模块` | 界面 import 了 `client/`、`server/` 的业务代码或 Node 内置模块;HTML `src`、CSS `url()` 指到界面目录外也算 | 把依赖挪进 `server/mcp/ui/` 或 `shared/`;不改预设配置 |
54
+ | dev server(`nest start --watch`)日志或 `npm run type:check:server` 在 `server/mcp/ui/**` 报 JSX / DOM 类型错误 | `tsconfig.node.json` 的 `exclude` 没加 `server/mcp/ui`,`nest` 与 type:check 共用这份配置 | 加上;界面用 `npx tsc --noEmit -p server/mcp/ui/tsconfig.json` 单独检查 |
55
+ | `mcp_call` 任一动作 `http_error` 500、目录接口 500,启动日志有「写入 MCP 清单失败:MCP Skill …」 | 某份 `server/mcp/skills/*/SKILL.md` frontmatter 不合法:缺 frontmatter、`name` 与目录名不等、`description` 空、重名、超限 | 按日志文案修 frontmatter;`validate` 会报同一条错 |
56
+
57
+ 同一失败不原样重试。改完代码再验,每轮只改一个变量。
58
+
59
+ ## 本地模式(工具清单里没有 `mcp_call` 时才适用)
60
+
61
+ 本地开发(`MIAODA_LOCAL_DEV=1`,`npm run dev` 走 `dev-local.js`)没有 `mcp_call`,MCP 客户端是你自己或 IDE 里的 Agent。
62
+
63
+ - 带身份的入口只有 dev server:`http://localhost:<CLIENT_DEV_PORT><CLIENT_BASE_PATH>/__innerapi__/mcp`(`CLIENT_BASE_PATH` 以 `.env.local` 为准,`+env-pull` 拉下来的是 `/app/<appId>`)。dev server 代理把 `+env-pull` 拉到的 `SUDA_WEBUSER` 注入为身份头,工具里的 `ctx.user` 就是开发者本人。直连 NestJS 端口没有身份,会撞 `MCP_USER_REQUIRED`。
64
+ - 标准 MCP 客户端配置 Streamable HTTP、URL 填上面地址即可连接。
65
+ - 看原始请求响应:`npx @modelcontextprotocol/inspector`,指向同一地址。
66
+ - 快速验证:
67
+
68
+ ```bash
69
+ curl -s -X POST 'http://localhost:<port><base>/__innerapi__/mcp' \
70
+ -H 'content-type: application/json' \
71
+ -H 'accept: application/json, text/event-stream' \
72
+ -d '{"jsonrpc":"2.0","id":1,"method":"tools/list"}'
73
+ ```
74
+
75
+ `accept` 必须同时含两种类型,否则 406。`GET` / `DELETE` 返回 405,端点只接受 `POST`;目录接口见上文。
76
+
77
+ ## 汇报
78
+
79
+ - 用业务表述:「`order_search` 返回 3 条待支付订单」「取消不存在的订单返回 ORDER_NOT_FOUND,符合预期」;不贴整段 JSON。
80
+ - 写工具真调过的,说明动了哪些数据、是否已清理;没真调的写明「写入链路未真实验证」。
81
+ - 未验证的分支明说未验证,不写「已全部通过」。
@@ -0,0 +1,205 @@
1
+ # MCP Apps:给工具结果加界面
2
+
3
+ 一个 MCP App = 一个 `ui://` 资源(单文件 HTML)+ 至少一个用 `ui.resourceUri` 指向它的工具。宿主调用工具后把 HTML 放进沙箱 iframe 渲染,再把工具入参与结果通过通知推给界面;界面里的操作经宿主回调 server 的工具。
4
+
5
+ ## 先决定要不要界面
6
+
7
+ | 信号 | 做法 |
8
+ |---|---|
9
+ | 结果是列表 / 详情 / 状态,文本 + `structuredContent` 已够 Agent 继续推理 | 不加界面 |
10
+ | 用户要从多条候选里挑一个(航班、订单、文件) | 选择型界面,选中后 `updateModelContext` 同步给模型 |
11
+ | 结果是图表、地图、对比等空间信息 | 展示型界面 |
12
+ | 写操作前要让用户在界面里核对、确认 | 确认型界面,确认动作经 `callServerTool` 调一个 `visibility: ['app']` 的工具 |
13
+
14
+ 不需要的地方不加:文本更快,也没有构建与 CSP 负担。
15
+
16
+ ## 目录与构建
17
+
18
+ ```text
19
+ server/mcp/ui/
20
+ ├── tsconfig.json # 界面独立的 TS 配置,整个 ui/ 共用一份,见下
21
+ └── <entry>/
22
+ ├── index.html # 入口骨架,见下
23
+ └── main.tsx # 或 main.ts;React 或原生 JS 都行
24
+ dist/mcp-ui/<entry>.html # 预设产物,@McpUiResource 经 readMcpUiTemplate 读取
25
+ ```
26
+
27
+ ```html
28
+ <!-- server/mcp/ui/<entry>/index.html -->
29
+ <!doctype html>
30
+ <html><head><meta charset="utf-8" /></head>
31
+ <body><div id="root"></div><script type="module" src="./main.tsx"></script></body></html>
32
+ ```
33
+
34
+ `<div id="root">` 不能少:缺了 `createRoot(document.getElementById('root')!)` 拿到 null,iframe 全白,而 `validate` 与 `read_resource` 都不会报错。
35
+
36
+ - `<entry>` 只允许 `A-Z a-z 0-9 _ -`。
37
+ - `@lark-apaas/fullstack-vite-preset` 的 `mcp-ui` 插件:检测到 `server/mcp/ui/` 就为每个入口跑一次独立子构建,JS / CSS / 资源全部内联成一个 HTML。开发态监听 `server/mcp/ui/` 与 `shared/`,改完自动重建;生产在主构建之后构建,并同步进发布目录。
38
+ - 子构建只带 React 插件与 `@shared` 别名,不加载主应用的 `vite.config.ts`、`.env`、`public/` 与 PostCSS 配置:`@/`、`@client/*`、`@server/*` 解析不到,不支持 styled-jsx、Tailwind 与主应用全局样式。样式写在入口自己的 CSS 里;颜色字体优先读宿主下发的 CSS 变量(`useHostStyles`)。
39
+ - 依赖边界由子构建强制:界面只能 import `server/mcp/ui/` 内的文件、`shared/` 与浏览器可用的 npm 包。引到 `client/`、`server/` 里的业务代码、工具类或服务端实现报「MCP UI 不能引用应用或服务端代码」,引到 `fs`、`path` 等报「MCP UI 不能引用 Node.js 模块」;HTML 的 `src` / `href`、CSS 的 `url()` 指到界面目录外同样被拒。要复用的纯展示组件挪到 `shared/`,且不得依赖应用的 Provider、Router 或登录态。
40
+ - 类型检查单独走:`server/mcp/ui/` 既不在 `tsconfig.app.json`(只含 `client/`、`shared/`)里,也不能进 `tsconfig.node.json`(服务端配置编译 JSX 报错)。首次开通界面做两件事:`tsconfig.node.json` 的 `exclude` 追加 `"server/mcp/ui"`;生成下面这份 `server/mcp/ui/tsconfig.json`。之后每次改界面跑 `npx tsc --noEmit -p server/mcp/ui/tsconfig.json`,`npm run type:check` 不覆盖它。
41
+
42
+ ```json
43
+ {
44
+ "compilerOptions": {
45
+ "target": "ES2022",
46
+ "lib": ["ES2022", "DOM", "DOM.Iterable"],
47
+ "module": "ESNext",
48
+ "moduleResolution": "Bundler",
49
+ "jsx": "react-jsx",
50
+ "strict": true,
51
+ "skipLibCheck": true,
52
+ "noEmit": true,
53
+ "esModuleInterop": true,
54
+ "baseUrl": "../../..",
55
+ "paths": { "@shared/*": ["shared/*"] }
56
+ },
57
+ "include": ["./**/*.ts", "./**/*.tsx"]
58
+ }
59
+ ```
60
+
61
+ - `@modelcontextprotocol/ext-apps` 随 SDK 安装,直接 import。解析失败时把它加进 `package.json` `dependencies`,版本与 `node_modules/@lark-apaas/nestjs-mcp/package.json` 里声明的一致(1.x),不装 2.x。
62
+
63
+ ## server 侧:声明资源并关联工具
64
+
65
+ ```typescript
66
+ import { McpTools, McpTool, McpUiResource, readMcpUiTemplate } from '@lark-apaas/fullstack-nestjs-core';
67
+
68
+ @McpTools({ prefix: 'order_' })
69
+ export class OrderMcpTools {
70
+ @McpTool({
71
+ title: '查询订单',
72
+ description: '…',
73
+ inputSchema: SearchOrdersInput,
74
+ outputSchema: SearchOrdersOutput,
75
+ annotations: { readOnlyHint: true, destructiveHint: false, idempotentHint: true, openWorldHint: false },
76
+ ui: { resourceUri: 'ui://order/list' }, // 结果由该界面渲染;模型与界面都可调
77
+ })
78
+ async search(/* … */) { /* … */ }
79
+
80
+ @McpTool({
81
+ description: '按 ID 取一条订单明细,供订单列表界面展开详情时调用。',
82
+ inputSchema: GetOrderInput,
83
+ outputSchema: GetOrderOutput,
84
+ annotations: { readOnlyHint: true, destructiveHint: false, idempotentHint: true, openWorldHint: false },
85
+ ui: { resourceUri: 'ui://order/list', visibility: ['app'] }, // 只供界面回调,模型工具清单里隐藏
86
+ })
87
+ async detail(/* … */) { /* … */ }
88
+
89
+ @McpUiResource({
90
+ uri: 'ui://order/list',
91
+ title: '订单列表',
92
+ description: '分页订单列表,可展开详情、勾选后取消。',
93
+ csp: { connectDomains: [], resourceDomains: [] }, // 界面要访问的外部域名写这里,默认全禁
94
+ })
95
+ listView() {
96
+ return readMcpUiTemplate('order-list'); // 读 dist/mcp-ui/order-list.html
97
+ }
98
+ }
99
+ ```
100
+
101
+ - `uri` 必须以 `ui://` 开头,全应用唯一;`ui.resourceUri` 找不到对应 `@McpUiResource()` 时 `validate` 与启动都会报错。
102
+ - `visibility` 默认 `['model', 'app']`。只给界面用的取数 / 刷新工具写 `['app']`,避免污染模型的工具清单。隐藏由宿主做,server 不过滤:`mcp_call` 的 `list_tools` 仍会列出它,`_meta.ui.visibility` 为 `['app']` 即正确,不要因为「还在清单里」去改代码。
103
+ - 一个工具既返回 `structuredContent` 又绑界面是常态;模型还需要纯数据继续推理时,拆成「取数工具(无 ui)」+「展示工具(绑 ui)」。
104
+ - 资源读取沿用 `requireUser`:无身份的 `resources/read` 会被拒。
105
+
106
+ ## 界面侧:接结果、回调工具
107
+
108
+ React 写法(`@modelcontextprotocol/ext-apps/react`):
109
+
110
+ ```tsx
111
+ // server/mcp/ui/order-list/main.tsx
112
+ import { useState } from 'react';
113
+ import { createRoot } from 'react-dom/client';
114
+ import { useApp, useHostStyles } from '@modelcontextprotocol/ext-apps/react';
115
+ // 与 outputSchema 对齐的 TS 类型放 shared/(如 shared/mcp-types.ts),server 与界面共用;@shared 是子构建唯一可用别名
116
+ import type { OrderPage as Page } from '@shared/mcp-types';
117
+
118
+ function OrderList() {
119
+ const [page, setPage] = useState<Page | null>(null);
120
+ const [error, setError] = useState<string | null>(null);
121
+
122
+ const { app, isConnected } = useApp({
123
+ appInfo: { name: 'order-list', version: '1.0.0' },
124
+ capabilities: {},
125
+ onAppCreated: (app) => {
126
+ // 宿主推送:工具入参(可先渲染骨架)、工具结果、取消
127
+ app.ontoolinput = ({ arguments: args }) => console.debug('input', args);
128
+ app.ontoolresult = (result) => {
129
+ if (result.isError) setError(textOf(result));
130
+ else setPage(result.structuredContent as Page);
131
+ };
132
+ app.ontoolcancelled = () => setError('调用已取消');
133
+ },
134
+ });
135
+ useHostStyles(app, app?.getHostContext()); // 应用宿主主题、CSS 变量与字体;第二参数让首帧就生效
136
+
137
+ async function cancel(orderId: string) {
138
+ if (!app) return;
139
+ const res = await app.callServerTool({ name: 'order_cancel', arguments: { orderId } });
140
+ if (res.isError) return setError(textOf(res));
141
+ // 把用户在界面里做的选择同步给模型,模型下一轮据此继续
142
+ await app.updateModelContext({
143
+ content: [{ type: 'text', text: `用户已在界面中取消订单 ${orderId}` }],
144
+ structuredContent: { cancelledOrderId: orderId },
145
+ });
146
+ setPage((p) => p && { ...p, items: p.items.filter((i) => i.id !== orderId) });
147
+ }
148
+
149
+ if (!isConnected) return <p>连接宿主中…</p>;
150
+ if (error) return <p role="alert">{error}</p>;
151
+ if (!page) return <p>等待查询结果…</p>;
152
+ return (
153
+ <ul>
154
+ {page.items.map((o) => (
155
+ <li key={o.id}>
156
+ {o.customer} · {o.amount} 元 · {o.status}
157
+ {o.status === 'pending' && <button onClick={() => cancel(o.id)}>取消</button>}
158
+ </li>
159
+ ))}
160
+ </ul>
161
+ );
162
+ }
163
+
164
+ function textOf(result: { content?: Array<{ type: string; text?: string }> }) {
165
+ return result.content?.find((c) => c.type === 'text')?.text ?? '调用失败';
166
+ }
167
+
168
+ createRoot(document.getElementById('root')!).render(<OrderList />);
169
+ ```
170
+
171
+ 原生 JS 写法(`@modelcontextprotocol/ext-apps`):
172
+
173
+ ```typescript
174
+ import { App } from '@modelcontextprotocol/ext-apps';
175
+ const app = new App({ name: 'order-list', version: '1.0.0' }, {});
176
+ app.ontoolresult = (result) => render(result.structuredContent);
177
+ await app.connect();
178
+ ```
179
+
180
+ 宿主能力速查(`App` 实例方法):
181
+
182
+ | 方法 | 用途 |
183
+ |---|---|
184
+ | `ontoolinput` / `ontoolinputpartial` / `ontoolresult` / `ontoolcancelled` | 宿主推送的入参(完整 / 流式)、结果、取消 |
185
+ | `callServerTool({ name, arguments })` | 经宿主调本 server 的工具;工具名带 prefix;返回标准 `CallToolResult` |
186
+ | `updateModelContext({ content?, structuredContent? })` | 把界面状态同步给模型,不触发模型立刻回复 |
187
+ | `sendMessage({ role: 'user', content })` | 以用户身份发一条消息,触发模型回复 |
188
+ | `getHostContext()` / `onhostcontextchanged` | 主题、`displayMode`、`containerDimensions`、`locale`、`timeZone`、发起本次渲染的 `toolInfo` |
189
+ | `requestDisplayMode({ mode })` | 请求 inline / fullscreen 等展示模式,以 `availableDisplayModes` 为限 |
190
+
191
+ `useApp` 默认开自动调高(`autoResize`),内容变化不用手动发尺寸。
192
+
193
+ ## 界面约束
194
+
195
+ - 不存凭证、不读 cookie / localStorage 里的登录态:iframe 是独立 origin,用户在业务系统的登录态带不进来。所有数据走 `callServerTool`,身份由宿主转发。
196
+ - 外部域名写进 `@McpUiResource` 的 `csp`:`connectDomains`(fetch / WebSocket)、`resourceDomains`(图片、脚本、样式)、`frameDomains`(内嵌 iframe)、`baseUriDomains`;默认全禁,漏写表现为资源静默加载失败。
197
+ - 业务返回值用 `textContent` 或 JSX 文本渲染,不拼 `innerHTML`。
198
+ - 每次调用重新注入数据;界面不假设自己能跨调用保留状态。
199
+ - 宿主不支持 MCP Apps 时只显示 `content` 文本,所以带界面的工具也要返回可读的文本摘要。
200
+
201
+ ## 调试
202
+
203
+ - `mcp_call` `read_resource` 读 `ui://…`:成功返回 `text/html;profile=mcp-app` 与正文开头;报「读取 MCP Apps 界面产物失败」→ `dist/mcp-ui/<entry>.html` 不存在:入口名与 `readMcpUiTemplate('<entry>')` 不一致、`server/mcp/ui/<entry>/index.html` 缺失、或 dev server 还没重建,看 dev server 日志里 `[mcp-ui]` 前缀的行。构建失败行里出现「MCP UI 不能引用…」是依赖越界,按上文边界规则改 import,不改预设。
204
+ - 界面逻辑用 `mcp_call` 看不到;先用 `call` 确认 `structuredContent` 形状正确,再在预览里看渲染。宿主渲染失败时保留工具结果,只重试界面。
205
+ - 界面里调 `callServerTool` 失败,错误也走 server 日志:按 Trace-ID 查。