Examples and recipes index
Examples show complete applications; task recipes address reusable interface boundaries. Both are now grounded in runnable pages: every recipe has its own page, source, start path, and verification steps instead of sending several problems to one shared demo.
Five classic examples
- Example 01: Todo covers create, complete, edit, filter, and cleanup.
- Example 02: Order workspace covers a business queue, records, row actions, and confirmation.
- Example 03: Single-page route workspace continues a task across client-side routes.
- Example 04: Multi-page workspace continues a task across full document navigation.
- Example 05: Expose capabilities exposes named capabilities to an agent outside the page.
Every example page includes an operable preview, marked source, and integration notes. Model requests go through a server-side gateway; the browser does not hold a provider key.
Run a recipe
From the repository root:
pnpm dev:examplesThe command starts the example pages, model gateway, and local access service. A page is served at http://localhost:5191/demos/<recipe>/. Each recipe also embeds its current page near the top, with tabs for the preview, source, and integration notes. Recipes involving upload, sign-in, delegation, or approval use examples/recipe-backends/access-service/; its routes, demo account, and limits are documented in the directory README. The MCP recipe documents a separate stdio server command; it is not started by the shared command.
Identity and protected data
- Login, session, and protected pages — preview · source
examples/demos/recipe-login-session/· backendexamples/recipe-backends/access-service/ - Delegated access with user consent — preview · source
examples/demos/recipe-delegation/· backendexamples/recipe-backends/access-service/
Forms and consequential actions
- Form fill, validation, and submit — preview · source
examples/demos/recipe-form-validation/· no backend - Multi-step modal and wizard — preview · source
examples/demos/recipe-wizard/· no backend - Dangerous actions and confirmation — preview · source
examples/demos/recipe-danger-confirm/· no backend
Tables, search, and asynchronous work
- Table rows and batch actions — preview · source
examples/demos/recipe-table-batch/· no backend - Search, filters, and long lists — preview · source
examples/demos/recipe-search-long-list/· no backend - File upload and asynchronous work — preview · source
examples/demos/recipe-upload-async/· backendexamples/recipe-backends/access-service/ - Multi-page task continuity — preview · source
examples/demos/recipe-continuity/· no backend
External agents and operations
- Expose three safe capabilities to an external agent — preview · source
examples/demos/recipe-external-surface/· no backend - Connect an external agent through MCP — preview · source
examples/demos/recipe-mcp/· stdio serverexamples/demos/external-agent-surface/mcp-server.mjs - Approval, audit, and revocation for agent actions — preview · source
examples/demos/recipe-approval-audit/· backendexamples/recipe-backends/access-service/ - Pass Surface conformance with another implementation — preview · source
examples/demos/recipe-conformance/· no backend
Model access
- Use your own model key — preview · source
examples/demos/recipe-model-key/· local model gateway
Follow a framework path
To modify your own application, continue with the tutorial for its framework:
Source layout
Recipe pages live in examples/demos/; the shared shell and local API client live in examples/recipe-shared/; recipes that need a server share examples/recipe-backends/access-service/. Framework code remains in packages/, and examples do not copy execution logic.
If a recipe depends on a capability that your application does not have, adapt the business handler rather than adding a generic DOM escape hatch. Pling exposes operations the page already authorizes; it does not create a second automation channel around the page.