案例01：待办事项
一个普通 Vue Todo 页面，包含筛选、编辑、完成与清理。直接让助手完成任务，而不是看一段预录演示。
打开在线案例 源码与说明在线案例
这些是可运行的页面，不是录屏。每个示例都保留自己的组件、状态与业务处理函数；Pling 只增加一小块能力面，并把页面接到真实模型。
建议先打开在线案例，再阅读接入说明和源码。接入说明会直接对应到具体代码行：在哪创建运行时、在哪声明动作、在哪暴露记录、在哪加入确认闸门。
公开示例的模型请求都经过服务端网关。浏览器只拿到同源地址和模型名，供应商凭据留在服务端。
教程中的每一章也有对应的完整页面。需要先看运行结果、再读代码时，可以打开全部章节示例；每个教程页顶部同样提供该章的在线预览与本地命令。
五个经典案例
这五个案例分别覆盖最小接入、真实业务工作台、Vue 3 单页内跨路由操作、整页导航后的任务连续性，以及向页面之外的 Agent 开放能力。
案例02：订单工作台
让真实模型操作业务队列，包含筛选、订单详情、可编辑回访备注、记录级动作与确认闸门。
打开在线案例 源码与说明案例03：单页多路由工作台
一个包含列表、详情与活动记录三条路由的 Vue 3 单页工作台。助手可以筛选账户、打开详情、修改复核状态，并在同一会话中汇报结果。
打开在线案例 源码与说明案例04：多页工作台
普通的服务端多页列表与详情页。一条任务跨过整页跳转，在详情页继续完成，然后回到列表。
打开在线案例 源码与说明案例05：暴露能力给外部
同一个业务页面分成三个工作区：Todo 本体、协议检查器，以及公网 Surface。Codex、Claude、Hermes Agent 或 WorkBuddy 通过 HTTPS MCP 接入，记录、审批与业务处理仍留在页面内。
打开在线案例 源码与说明十四项可运行方案
每项方案都有独立页面、源码目录、本地命令与失败路径。模型网关和本地 access service 由同一条命令启动。
bash
pnpm dev:examples方案01：登录与受保护页面
HttpOnly 示例会话保护发票记录。会话过期或退出后，记录与已声明动作都会消失。
打开在线案例 源码与说明方案02：表格行与批量操作
稳定行 id、选中集合、旧 id 处理，以及两个有边界的批量工具。
打开在线案例 源码与说明方案03：表单校验与提交
参数检查、字段校验、提交中状态与业务策略拒绝，都在表单清空之前发生。
打开在线案例 源码与说明方案04：多步弹窗与向导
三步供应商流程，包含异步选项与审批链。每一步只声明该状态真实存在的控件。
打开在线案例 源码与说明方案05：危险操作与确认
归档动作需要真人决定。拒绝时记录不变；允许时才执行一次业务函数并留下结果。
打开在线案例 源码与说明方案06：上传与异步任务
真实文件字节创建服务端任务，包含进度、取消、失败与重试。模型看到任务元数据，而不是文件内容。
打开在线案例 源码与说明方案07：搜索、筛选与长列表
有界工单视图区分总数、匹配数与已渲染数，包含搜索、状态筛选、记录与分页渲染。
打开在线案例 源码与说明方案08：多页任务连续性
整页导航替换 document。待完成任务在详情文档恢复，完成后返回列表。
打开在线案例 源码与说明方案09：向外部 Agent 开放三个安全能力
编辑队列只向外部客户端暴露列表、通过与备注三项能力。删除仍可由页面内助手使用，但不在外部白名单中，因此会被协议拒绝。
打开在线案例 源码与说明方案10：通过 MCP 接入外部 Agent
真实 stdio MCP 进程通过回环地址连接打开中的工单页面。客户端拿到 describe 与 invoke，而不是 DOM 或模型凭据。
打开在线案例 源码与说明方案11：经用户同意的委托访问
已登录用户选择 Agent、能力范围与有效期。服务端只返回一次短期凭证；过期或撤销后，请求会在业务函数之前失败。
打开在线案例 源码与说明方案12：审批、审计与撤销
Agent 请求删除发票，真人允许或拒绝，审计记录请求与决定。撤销后的外部调用会失败关闭。
打开在线案例 源码与说明方案13：使用自己的模型密钥
内置 Activity 设置接受兼容端点、模型与密钥。密钥留在运行时存储中，不进入记录、页面状态或模型消息。
打开在线案例 源码与说明方案14：Surface 一致性请求向量
全新夹具运行九组协议向量，覆盖版本、方法、记录身份、schema、暴露范围与重放。这是仓库检查，不是认证。
打开在线案例 源码与说明如何阅读示例
- 打开在线案例。 先用人工界面完成一次操作，再让助手完成同一件事。
- 切换到接入说明。 按顺序看配置、运行时、动作声明和助手入口。
- 查看源码。 高亮行分别标出导入、运行时初始化、动作声明和助手入口。
每个案例都有独立说明页、在线案例、完整源码与逐行走查。案例05把同一组 Todo 能力接到公网 Surface Gateway，页面会生成短时访问 token，并给出可直接复制的 Codex 命令；源码另保留本地回环桥供开发调试。
准备修改自己的应用时，继续进入 Vue 快速上手或 React 快速上手。