What you can do with Medula

3 use cases

• Verify a bug fix by reading live component state

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

  • Medula
  • Software and DevOps
  • Intermediate
  View prompt

  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.

  Share Save

• Test cart edge cases by editing live state

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

  • Medula
  • Software and DevOps
  • Intermediate
  View prompt

  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.

  Share Save

• Inspect Vue Pinia stores and walk routes with an agent

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

  • Medula
  • Software and DevOps
  • Intermediate
  View prompt

  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.

  Share Save

How to use Medula

1. Check you have what it needs: 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.
2. Open posva/medula on GitHub and read the README and license.
3. Install Medula and Vite DevTools with pnpm add -D medula @vitejs/devtools.
4. In vite.config.ts, set devtools: true and add medula() next to your framework plugin.
5. Add the MCP server to your agent's configuration with command npx and args devframe connect.
6. Start your dev server, open the app in your browser, and complete any DevTools connection code prompt.

These steps come from our top use case, Verify a bug fix by reading live component state, which also has a copy-paste agent prompt.

Medula alternatives · Best AI repos for Software and DevOps

About this repo

• Who it is forWeb developers and their AI coding agents who need to verify fixes or explore edge cases in a live app running on Vite, Nuxt, or Next.js.
• Why it is hot
• LanguageTypeScript
• Sourcegithub.com/posva/medula · Back to Hot repos

Requirements

• 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

Related repos

• #1 this week Harness2 Harness² is a Python framework from Google Research that refines the harness around a fixed model (prompts, tools, memory, skills, orchestration) so it performs better on agent tasks.
• #8 this week iFixAi iFixAi is an open-source Python tool that audits whether an AI agent is doing the job it is supposed to do, using 60 inspections that combine red-teaming with operational checks.
• #9 this week Orca Orca is a desktop app, with a mobile companion, for running several CLI coding agents side by side, each in its own git worktree, and tracking them in one place.