ambleloft把业务界面放进聊天
让用户从一句需求进入可以填写、核对和提交的业务流程。
实践指南
完成后：选择适合业务的聊天表单或自定义界面。
前置条件：按本页具体步骤准备所需文件与工具；学习路线中的上一页不自动构成依赖。
本页内容
01先体验完整报销流程
该案例使用宿主渲染的三步表单，把确认后的数据写入本地演示服务。先安装当前支持扩展的 Ambleloft，再运行以下命令。
代码示例
cd ambleloft-extension-samples/expense-workflow
npm install --save-dev "$AMBLELOFT_PACKS/ambleloft-extension-sdk-0.1.0-alpha.9.tgz" "$AMBLELOFT_PACKS/ambleloft-extension-core-0.1.0-alpha.9.tgz" "$AMBLELOFT_PACKS/ambleloft-extension-cli-0.1.0-alpha.9.tgz"
npm run build
npm run validate
npm test
npm run pack
npm run service02安装并打开表单
保持演示服务运行。在「设置 → 扩展 → 安装」安装 dist/expense-workflow.amble-extension，按提示确认信任。在扩展配置中设置 serviceUrl 为 http://127.0.0.1:47832。连接支持工具调用的模型，在聊天里输入「帮我报销上海客户拜访的差旅费，共 1280 元」。按三步表单填写并确认，再从插件首页查询记录。
03选择宿主表单或自定义页面
常规资料收集可用 YAML 声明字段、步骤和操作映射，由 Ambleloft 渲染。需要自定义布局或控件时，使用 mcp-apps-card 的 HTML/CSS/JS 页面，通过 MCP Apps UI 协议在聊天内交互。它当前保存的是插件本地记录。
查看完整案例与运行说明04把交互接到业务操作
Agent 调用工具来显示表单或页面；控件由宿主或插件页面渲染。表单提交可以映射到 Node 后台操作，自定义页面通过 tools/call 请求操作。独立插件首页使用 webview 桥接，不能混用两套初始化代码。
05从演示接到真实业务
用自己的服务替换演示服务，并实现业务规则、持久化、幂等和结果查询。报销示例尚未整合消息通知与企业财务适配，可参考对应独立案例组合开发。表单 YAML 与部分界面为中文，双语 README 不等于界面自动本地化。
检查结果与排错
选择适合业务的聊天表单或自定义界面。
按本页的验证步骤核对实际结果。涉及业务服务时，分别检查界面提交、工具回执与服务端记录。
打开错误代码与排错 →