Example 01: Todo
A normal Vue todo page with filters, editing, completion, and cleanup. Ask the assistant to do the work instead of watching a scripted recording.
Open live example Source & guideExamples
These are working application pages, not recordings. Each one keeps its own components, state, and business handlers; Pling adds a small capability surface and connects it to a real model.
Open a live example first, then read its integration guide and source. The guide points to the exact lines that create the runtime, declare actions, expose records, or add a confirmation gate.
The public demos send model requests through a server-side gateway. The browser receives a same-origin endpoint and a model name; provider credentials stay on the server.
Every tutorial chapter also has a complete runnable page. To inspect the result before reading the code, open the chapter preview gallery. Each tutorial page repeats its own live preview and local command at the top.
Five classic examples
These five cover the product from different angles: the smallest working integration, a business workspace, a task that crosses client-side routes, a task that survives a full page navigation, and a capability surface for an agent outside the page.
Example 02: Order workspace
A real model operating a business queue with filters, order details, editable follow-up notes, record-aware actions, and a confirmation gate.
Open live example Source & guideExample 03: Single-page route workspace
A Vue 3 single-page workspace with list, detail, and activity routes. The assistant filters accounts, opens one, changes its review state, and reports the result without losing task context.
Open live example Source & guideExample 04: Multi-page workspace
A server-rendered list and detail page. One task survives the full document navigation, finishes on the detail page, and returns to the list.
Open live example Source & guideExample 05: Expose capabilities
One business page has three working views: the Todo itself, a protocol inspector, and a public Surface. Codex, Claude, Hermes Agent, or WorkBuddy connects over HTTPS MCP while records, approvals, and business handlers stay in the page.
Open live example Source & guideFourteen runnable recipes
Each recipe below has its own page, source tree, local command, and failure path. The model gateway and local access service start with the same command.
bash
pnpm dev:examplesRecipe 01: Login and protected pages
An HttpOnly demo session protects invoice records. Expiring or signing out removes both the records and the declared actions.
Open live example Source & guideRecipe 02: Table rows and batch actions
Stable row ids, a selected set, stale-id handling, and two bounded batch tools over a changing order list.
Open live example Source & guideRecipe 03: Form validation and submit
Parameter checks, field validation, a submitting state, and a business-policy rejection all happen before the form clears.
Open live example Source & guideRecipe 04: Multi-step modal and wizard
A three-step supplier flow with async options and an approval chain. Each step declares only the controls that exist in that state.
Open live example Source & guideRecipe 05: Dangerous actions and confirmation
Archive actions require a human decision. Rejection leaves the record untouched; approval runs the business function once and records it.
Open live example Source & guideRecipe 06: Upload and asynchronous work
Real file bytes create a server-side job with progress, cancellation, failure, and retry. The model sees job metadata, not the file.
Open live example Source & guideRecipe 07: Search, filters, and long lists
A bounded ticket view separates total, matched, and rendered counts, with search, status filtering, records, and paged rendering.
Open live example Source & guideRecipe 08: Multi-page task continuity
A full document navigation replaces the page. The pending task resumes on the detail document and returns to the list when done.
Open live example Source & guideRecipe 09: Expose three safe capabilities
An editorial queue exposes list, approve, and comment to an external client. A delete action remains available to the page assistant but is rejected by the external allowlist.
Open live example Source & guideRecipe 10: Connect an external agent through MCP
A real stdio MCP process connects to an open ticket page over loopback. The client receives describe and invoke, not the DOM or model credentials.
Open live example Source & guideRecipe 11: Delegated access with user consent
A signed-in user chooses an agent, scopes, and lifetime. The server returns a short-lived token once; expiry and revocation fail before any business handler.
Open live example Source & guideRecipe 12: Approval, audit, and revocation
An agent requests deletion of an invoice, a person approves or rejects it, and the audit trail records the request and decision. Revoked external calls fail closed.
Open live example Source & guideRecipe 13: Use your own model key
The built-in Activity settings accept a compatible endpoint, model, and key. The key stays in runtime storage and is never exposed through records, page state, or model messages.
Open live example Source & guideRecipe 14: Surface conformance vectors
A fresh fixture runs nine protocol vectors covering version, method, record identity, schema, exposure, and replay. It is a repository check, not a certification.
Open live example Source & guideHow to read an example
- Open the live page. Try the same task through the human interface and through the assistant.
- Switch to Integration. Follow the short sequence from configuration to the final assistant entry.
- Inspect the source. Highlighted lines mark imports, runtime setup, declarations, and assistant entry points.
Each example has its own page, live application, full source, and integration notes. Example 05 connects the same Todo capabilities to a hosted Surface Gateway, so Codex, Claude, and other MCP clients can operate the live page with a short-lived access token. The page prepares a complete command for the user to copy; the source also keeps a loopback bridge for local development.
If you are ready to modify your own application, continue to the Vue quick start or the React quick start.