ambleloftBring business interfaces into chat
Turn a request into a workflow users can fill in, review and submit.
Outcome: Choose a host form or custom chat interface for your workflow.
Before you begin: Prepare the files and tools specified on this page. The previous page in the learning path is not automatically a dependency.
On this page
01Try the complete expense workflow
This sample uses a host-rendered three-step form and writes confirmed data to a local demo service. Prepare an extension-enabled Ambleloft host, then run these commands.
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 service02Install it and open the form
Keep the service running. Open Settings → Extensions → Install and select dist/expense-workflow.amble-extension. Confirm trust, then set serviceUrl to http://127.0.0.1:47832 in extension settings. Connect a model with compatible tool calling. Ask to claim CNY 1,280 for a Shanghai customer visit. Complete and confirm the form, then inspect records in the extension home.
03Choose a host form or a custom page
For standard data collection, declare YAML fields, steps and operation mappings for Ambleloft to render. For custom layouts and controls, follow mcp-apps-card and its HTML/CSS/JS page using the MCP Apps UI protocol. That sample saves to extension-local storage.
Open the complete sample and instructions04Connect the interaction to an operation
The agent calls tools to display the form or page; the host or extension renders controls. Form submissions can map to Node operations. Custom chat pages request operations with tools/call. Independent extension homes use the webview bridge; do not mix their initialization code.
05Connect your production service
Replace the demo service and implement business rules, persistence, idempotency and result lookup. The expense sample does not yet integrate progress messages or an enterprise finance adapter; use the separate capability samples. Some YAML forms and demo controls are Chinese. Bilingual READMEs do not imply automatic UI localization.
Check the result and troubleshoot
Choose a host form or custom chat interface for your workflow.
Check actual results using this page’s verification steps. For business integrations, inspect UI submission, tool receipts and server records separately.
Open the error reference →