# AI use cases for Vitre (ggoggam/vitre)

Repo: [ggoggam/vitre](https://github.com/ggoggam/vitre) | Use cases: 5 | Page: https://dedupedai.com/use-cases/ggoggam-vitre/

Vitre is a Kotlin Multiplatform library that runs step-by-step workflows inside an embedded WebView on Android, iOS and desktop, callable from app code, tests, or LLM agents over MCP or Koog.

This file holds every use case of this repo. Each one starts with a "## " heading and ends with its URL.

- Read a value from a page your app does not own: https://dedupedai.com/use-cases/ggoggam-vitre/read-page-data-in-app/
- Pull a whole results table into JSON in one step: https://dedupedai.com/use-cases/ggoggam-vitre/extract-table-rows-as-json/
- Visit every search result and collect details from each: https://dedupedai.com/use-cases/ggoggam-vitre/fan-out-search-results-to-detail-pages/
- Exchange typed messages with a page you own: https://dedupedai.com/use-cases/ggoggam-vitre/bridge-with-own-hybrid-page/
- Let an LLM agent drive an embedded page through MCP tools: https://dedupedai.com/use-cases/ggoggam-vitre/let-llm-agent-drive-webview-over-mcp/

## How to read a value from a page your app does not own with Vitre

Repo: [ggoggam/vitre](https://github.com/ggoggam/vitre) | Difficulty: Intermediate | Time: 1 hour | Basis: From the README

Navigate to a page, wait for a marker element, and extract text or an href into workflow variables.

**Who it is for:** A Kotlin Multiplatform developer who needs one fact from a third-party page shown inside their app.

**The problem:** Reading a page inside a WebView usually means one-off evaluateJavascript calls that race each other and the UI.

**The outcome:** A workflow that returns a named variable such as a headline and its URL in a Completed event.

### Steps

1. Add vitre-core to commonMain dependencies from Maven Central as dev.ggoggam.vitre:vitre-core:0.2.0.
2. Declare a workflow with navigate, then waitFor on the element that means the page is ready.
3. Add extract steps for the text you need, and use Source.Attribute("href") for link targets.
4. Mount a WebView, take its controller, and call WorkflowEngine(controller).run(workflow).collect.
5. Read event.variables in the WorkflowEvent.Completed branch.

### Prompt to paste into your agent

```text
In the Kotlin project at <project-path>, add dev.ggoggam.vitre:vitre-core:0.2.0 from Maven Central and write a workflow that navigates to <target-url>, waits for <ready-selector>, and extracts <field-selector> into a variable. Expected output: the extracted value printed from WorkflowEvent.Completed. Verify that the Completed event contains a non-empty value for that variable.
```

### Caveat

Vitre targets embedded WebViews on Android, iOS and desktop, and the README states that web is out of scope as a target.

Dual-use notice: only use this on software, sites and systems you own or are authorized to test.

Disclaimer: Third-party repos we don't own or vouch for. AI-generated use cases can be wrong: review everything and run at your own risk. Full text: https://dedupedai.com/disclaimer/

URL: https://dedupedai.com/use-cases/ggoggam-vitre/read-page-data-in-app/

## How to pull a whole results table into JSON in one step with Vitre

Repo: [ggoggam/vitre](https://github.com/ggoggam/vitre) | Difficulty: Intermediate | Time: 1 hour | Basis: From the README

Use extractRows to get one record per matching row, with each column scoped to its own row.

**Who it is for:** A developer or data analyst who needs structured rows from a page rendered in an app WebView.

**The problem:** Per-field extraction loses row alignment when one row is missing a value, so later records land on the wrong item.

**The outcome:** A JSON array of records in the workflow variable named by into, with missing values as empty strings inside their own row.

### Steps

1. Add vitre-core to your commonMain dependencies as in the first use case.
2. Write extractRows with a row locator, for example xpath("//li[@data-sku]"), and a limit.
3. Add column entries with their own locators, using xpath(".") to read the row itself.
4. Run the workflow with WorkflowEngine and read the variable named in into from the Completed event.

### Prompt to paste into your agent

```text
Using the vitre-core dependency in <project-path>, write an extractRows step over <row-xpath> with columns <column-list> and a limit of <n>. Expected output: a JSON array with one record per matched row. Verify that a row lacking a column value has an empty string for that column and does not shift the other records.
```

### Caveat

The README describes ExtractRows for matching rows on the page, but you must confirm the target page's markup supports the chosen XPath expressions before relying on the output.

Dual-use notice: only use this on software, sites and systems you own or are authorized to test.

Disclaimer: Third-party repos we don't own or vouch for. AI-generated use cases can be wrong: review everything and run at your own risk. Full text: https://dedupedai.com/disclaimer/

URL: https://dedupedai.com/use-cases/ggoggam-vitre/extract-table-rows-as-json/

## How to visit every search result and collect details from each with Vitre

Repo: [ggoggam/vitre](https://github.com/ggoggam/vitre) | Difficulty: Advanced | Time: 2 hours | Basis: From the README

Use forEach to open each result page on a lane pool and gather extracted fields in row order.

**Who it is for:** A developer building a price or listing monitor who needs detail data for each row a search page produced.

**The problem:** Opening many pages one by one in a single WebView is slow, and parallel WebView calls race each other.

**The outcome:** A details variable holding one extracted record per item, in row order, with failed items recorded instead of stopping the run.

### Steps

1. Extract the result rows with extractRows into a named variable such as results.
2. Add forEach over that variable with an item name such as product and a limit.
3. Inside the body, navigate to template("{product.url}"), waitFor the detail element, and add extract steps.
4. Provide a LaneSource with more than one lane if you want items to run in parallel, then read the details variable from Completed.

### Prompt to paste into your agent

```text
In <project-path>, build a Vitre workflow that extracts rows from <search-url> into results, then uses forEach to visit each row URL and extract <detail-selectors>. Expected output: a details array in row order with one entry per item. Verify that any failed item appears as a recorded failure rather than aborting the whole run.
```

### Caveat

The README says a fan-out is a page barrier, so the step after forEach starts on a blank page with variables intact, and lanes must be configured in your own app.

Risk, account pooling: Running many lanes against the same site may conflict with that site's terms, so check them before fanning out at volume.

Dual-use notice: only use this on software, sites and systems you own or are authorized to test.

Disclaimer: Third-party repos we don't own or vouch for. AI-generated use cases can be wrong: review everything and run at your own risk. Full text: https://dedupedai.com/disclaimer/

URL: https://dedupedai.com/use-cases/ggoggam-vitre/fan-out-search-results-to-detail-pages/

## How to exchange typed messages with a page you own with Vitre

Repo: [ggoggam/vitre](https://github.com/ggoggam/vitre) | Difficulty: Advanced | Time: 2 hours | Basis: From the README

Send and await postMessage payloads between the workflow and your hybrid web page.

**Who it is for:** A mobile developer who ships a checkout or form page inside the app and wants the native side to react to it.

**The problem:** Messages sent from a page handler can be lost when the native side starts waiting after they arrive.

**The outcome:** A workflow that clicks a button, receives a typed payload through awaitMessage, and posts an acknowledgement back into the page.

### Steps

1. Add vitre-core to commonMain dependencies.
2. Define @Serializable payload classes for the messages you send and receive.
3. Load your page with loadHtml or navigate, then waitFor and click the target element.
4. Add awaitMessage with a type and a timeoutMs, then postMessage with an id and typed payload.
5. On Completed, call event.decodePayload for the awaited variable.

### Prompt to paste into your agent

```text
In <project-path>, write a Vitre workflow that loads <page-html>, clicks <button-selector>, awaits a payload of type <message-type>, and posts an acknowledgement back. Expected output: the decoded payload in the Completed event. Verify that the message is received even when the page posts it synchronously on click.
```

### Caveat

The README says click dispatches a synthetic DOM click that does not prove the site's operation completed, so verify results with waitFor, extraction, or the bridge acknowledgement.

Dual-use notice: only use this on software, sites and systems you own or are authorized to test.

Disclaimer: Third-party repos we don't own or vouch for. AI-generated use cases can be wrong: review everything and run at your own risk. Full text: https://dedupedai.com/disclaimer/

URL: https://dedupedai.com/use-cases/ggoggam-vitre/bridge-with-own-hybrid-page/

## How to let an LLM agent drive an embedded page through MCP tools with Vitre

Repo: [ggoggam/vitre](https://github.com/ggoggam/vitre) | Difficulty: Advanced | Time: 3 hours | Basis: From the README

Expose the Vitre step vocabulary to an agent as MCP tools so it can navigate, read and act on a page.

**Who it is for:** An AI or platform engineer who wants an agent to operate a page in the app without writing Kotlin for each task.

**The problem:** An agent that has never seen a page needs a safe, readable way to act on it and see what each action returned.

**The outcome:** An agent session where each page action appears as an MCP tools/call with the JSON response, and the page stays under control of the app.

### Steps

1. Add vitre-mcp and vitre-core to your commonMain dependencies from Maven Central.
2. Start the in-process MCP transport that vitre-mcp provides in your app.
3. Connect your MCP-capable model client to that transport.
4. Ask the agent for a task on the page, then review each tools/call result it returns.

### Prompt to paste into your agent

```text
Using the vitre-mcp module in <project-path>, connect an MCP client to the in-process Vitre server and ask it to <task-on-page>. Expected output: a sequence of tools/call requests and JSON results, ending in a final answer. Verify that each step's JSON result matches the actual page state shown in the WebView.
```

### Caveat

The README says the Koog tools are a separate delivery, and this MCP path is an in-process transport, so wire up your own model client rather than expecting a hosted service.

Risk, credentials: If the agent reads cookies or drives a logged-in session, it can access session data such as HttpOnly cookies, so limit what the page can expose.

Dual-use notice: only use this on software, sites and systems you own or are authorized to test.

Disclaimer: Third-party repos we don't own or vouch for. AI-generated use cases can be wrong: review everything and run at your own risk. Full text: https://dedupedai.com/disclaimer/

URL: https://dedupedai.com/use-cases/ggoggam-vitre/let-llm-agent-drive-webview-over-mcp/
