# AI use cases for Medula (posva/medula)

Repo: [posva/medula](https://github.com/posva/medula) | Use cases: 3 | Page: https://dedupedai.com/use-cases/posva-medula/

medula is a headless devtools package that lets a coding agent inspect and change the internal state of a running web app through MCP.

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

- Verify a bug fix by reading live component state: https://dedupedai.com/use-cases/posva-medula/verify-bug-fix-with-live-state/
- Test cart edge cases by editing live state: https://dedupedai.com/use-cases/posva-medula/test-cart-edge-cases-live/
- Inspect Vue Pinia stores and walk routes with an agent: https://dedupedai.com/use-cases/posva-medula/inspect-vue-stores-and-routes/

## How to verify a bug fix by reading live component state with Medula

Repo: [posva/medula](https://github.com/posva/medula) | Difficulty: Intermediate | Time: 30 minutes | Basis: From the README

Let an agent read and check a running app's component state after a fix, without editing source files.

**Who it is for:** A developer or coding agent fixing a production bug in a Vue, React, Svelte, or Solid web app, who needs to confirm the fix at the verification step.

**The problem:** Checking a bug fix often means clicking through the running app by hand to see what state the components hold, which is slow and easy to miss.

**The outcome:** The agent reports the current component tree and state of the running page, so the fix can be confirmed against what the app actually holds.

### Steps

1. Install Medula and Vite DevTools with `pnpm add -D medula @vitejs/devtools`.
2. In vite.config.ts, set `devtools: true` and add `medula()` next to your framework plugin.
3. Add the MCP server to your agent's configuration with command `npx` and args `devframe connect`.
4. Start your dev server, open the app in your browser, and complete any DevTools connection code prompt.
5. Keep the app tab visible while the agent works, then ask it to show the components on the page and their current state.

### Prompt to paste into your agent

```text
Using the medula MCP tools from the medula repo, connect to the running dev server for <app-port> and list the components on the current page with their state. Expected output: a list of components with their state values. Verify that the values match what the open browser tab shows.
```

### Caveat

Changes affect only the running page and do not edit your source files, so any real fix still has to be made in code.

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/posva-medula/verify-bug-fix-with-live-state/

## How to test cart edge cases by editing live state with Medula

Repo: [posva/medula](https://github.com/posva/medula) | Difficulty: Intermediate | Time: 30 minutes | Basis: From the README

Set state values in a running app to reproduce edge cases that are hard to build in automated tests.

**Who it is for:** A developer or QA-minded agent exploring edge cases in a shop or form flow that is awkward to reproduce with automated tests.

**The problem:** Some edge cases, such as a specific quantity or an unusual combination of values, take many clicks to reach and are rarely covered by automated tests.

**The outcome:** The agent sets the state directly, such as a cart quantity, and reports what the page shows, such as the total.

### Steps

1. Install Medula and Vite DevTools with `pnpm add -D medula @vitejs/devtools`.
2. In vite.config.ts, set `devtools: true` and add `medula()` next to your framework plugin.
3. Add the MCP server to your agent's configuration with command `npx` and args `devframe connect`.
4. Start your dev server, open the app in your browser, and complete any DevTools connection code prompt.
5. Ask the agent to set the cart quantity to a chosen value and check the total shown on the page.

### Prompt to paste into your agent

```text
Using the medula MCP tools from the medula repo, connect to the running dev server for <app-port> and set the cart quantity to <quantity>. Expected output: the cart state after the change and the total it produces. Verify that the total shown in the browser tab matches the value the agent reports.
```

### Caveat

State edits exist only in the running page, so a value set this way is lost on reload and must be reproduced again to repeat the 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/posva-medula/test-cart-edge-cases-live/

## How to inspect Vue Pinia stores and walk routes with an agent with Medula

Repo: [posva/medula](https://github.com/posva/medula) | Difficulty: Intermediate | Time: 30 minutes | Basis: From the README

Let an agent read Pinia store state and open Vue Router routes in a running Vue app.

**Who it is for:** A Vue 3 developer whose bug depends on Pinia store values or a specific route, and who wants an agent to check both on the running app.

**The problem:** Reproducing a bug that depends on store contents or a deep route means navigating the app manually and reading state from browser tools.

**The outcome:** The agent reads the Pinia store values, moves the app to the requested Vue Router route, and reports what it finds.

### Steps

1. Install Medula and Vite DevTools with `pnpm add -D medula @vitejs/devtools`.
2. In vite.config.ts, set `devtools: true` and add `medula()` next to `vue()` in plugins.
3. Add the MCP server to your agent's configuration with command `npx` and args `devframe connect`.
4. Start your dev server, open the app in your browser, and complete any DevTools connection code prompt.
5. Ask the agent to read a Pinia store or open a named route, then compare the result with the page.

### Prompt to paste into your agent

```text
Using the medula MCP tools from the medula repo, connect to the running Vue dev server for <app-port>, read the state of the Pinia store named <store-name>, then open the route <route-path>. Expected output: the store state and the route the page now shows. Verify that the page displays the same route the agent reports.
```

### Caveat

Pinia and Vue Router support is listed only for Vue apps, so this use case does not apply to React, Svelte, or Solid projects.

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/posva-medula/inspect-vue-stores-and-routes/