Who it is forA developer or QA-minded agent exploring edge cases in a shop or form flow that is awkward to reproduce with automated tests.
The problemSome 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 outcomeThe agent sets the state directly, such as a cart quantity, and reports what the page shows, such as the total.
What you need first
- A web app built with Vue 3, React, Svelte 5, or Solid, run through Vite 8, Nuxt (with Nuxt DevTools 4), or Next.js (App Router)
- pnpm and Node.js available to install the package
- An MCP-capable coding agent to connect to devframe
- A browser tab open to the running app
Steps
- Install Medula and Vite DevTools with
pnpm add -D medula @vitejs/devtools. - In vite.config.ts, set
devtools: trueand addmedula()next to your framework plugin. - Add the MCP server to your agent's configuration with command
npxand argsdevframe connect. - Start your dev server, open the app in your browser, and complete any DevTools connection code prompt.
- Ask the agent to set the cart quantity to a chosen value and check the total shown on the page.
Prompt for your agent
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.
Get 5 new use cases every morning. Free, one short email, unsubscribe anytime.
Get them freeShare: X LinkedIn Hacker News Email Copy link
Disclaimer
Deduped lists open-source repositories that belong to other people. We do not own, maintain, audit, or vouch for any of them, and a repo appearing here is not an endorsement or a safety check. The use cases, steps, and prompts are written by AI and may be incomplete, outdated, or just wrong. Where a use case is marked "Seen in the wild", we link to public posts where someone described something similar, but we have not verified those posts and the use case itself is still our AI's own write-up. Use all of this at your own risk. Only run code, commands, or agents on systems and accounts you are authorized to use, and read the code and every command before you run it, especially anything that touches credentials, files, or the network. Nothing here is professional, security, legal, or financial advice. All trademarks and project names belong to their respective owners, and their use here does not imply affiliation. Content is provided as is, without warranties of any kind. Found a mistake, a safety problem, or something you want removed? Email [email protected] and we will look at it promptly. Full disclaimer page