medula MCP
A Vite, Nuxt and Next.js plugin that exposes the state of a running Vue, React, Svelte or Solid app to an agent over MCP.
- 127 ★ on the repository
- Last commit
- MIT
Extended access
Why this level
- The agent reads and changes state of the running app, including store data and props.
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add mcp/medulaDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewExtended accessThe tool runs code or makes network calls and only reads external data.
- The agent reads and changes state of the running app, including store data and props.
This is third-party code. Review the repository files before installing.
What it does
medula plugs into an app's dev server and lets a coding agent inspect and change the internal state of the live page over MCP. It supports Vue 3, React, Svelte 5 and Solid, with Vite, Nuxt and Next.js App Router integrations. In Vue the agent reads the component tree, state and Pinia stores and navigates Vue Router routes. In React it sees components, hook state and overrides props. In Svelte it edits `$state`, and in Solid it reads signals and stores. Changes affect the open page and never reach source files. Calling `medula_help` tells the agent which tools are available.
Who it is for. Frontend developers on Vue, React, Svelte and Solid who verify fixes in the browser together with an agent.
Good fit when
- An agent fixed a bug and you verify the result on the live page without re-creating the scenario by hand.
- A rare state is hard to reproduce in an automated test, for example a cart quantity of 3.
- An agent must see the component tree with current data.
- A Vue app needs a Vue Router navigation check.
Not a fit when
- Debugging happens in production, while the plugin runs in development only.
- The app uses a framework outside the list, so Angular and others are unsupported.
- You want to edit source files, since medula changes page state and not files.
Example request
Show the components on this page and their state, then set the cart quantity to 3 so I can check the total.MCP
- Transport
- stdio
- Authentication
- not required
Limitations
The plugin runs only during development and attaches to the dev server. Keep the app tab open and visible while the agent works; if devtools asks for a connection code, enter it by hand. Vite needs Vite 8 with Vite DevTools, and Nuxt needs Nuxt DevTools 4. Solid 2 support is tested against 2.0.0-rc.13. In Next.js the README recommends `auth: false` only for local work on a single-user machine, so do not leave it on a shared server. Page state changes directly, so reload the tab after verification.
How to disable. Remove `medula()` from the Vite plugins or the `medula/nuxt` module from the Nuxt config, uninstall the package and delete the `devframe` entry from the agent's MCP configuration.
FAQ
Which frameworks does medula support?
Vue 3, React, Svelte 5 and Solid 1.9 or 2 RC, with Vite, Nuxt and Next.js integrations.
How do I connect an agent to medula?
Add a `devframe` server to the MCP configuration with the command `npx` and arguments `devframe connect`. It finds all running dev servers by itself.
Does medula change source code?
No. Changes affect only the running page and project files stay as they are.
What if the tools do not appear?
Start the dev server, open the app in a browser and keep the tab visible. If devtools asks for a connection code, enter it.
Do I need to change app code?
No. Add `medula()` to the bundler config and the tool attaches to the app without edits to components.
Discussion
No questions or reviews yet.
Related
MCP serversA Vite plugin with an MCP server that shows the agent the components, routes and Pinia stores of a running Vue app
Nuxt MCP Dev
nuxt-mcp-dev / vite-plugin-mcp
A Nuxt module and a Vite plugin start an MCP server on the dev server port so the agent sees config, pages, components, auto-imports and the module graph
Connects an agent to a running Next.js 16+ dev server: errors, routes, logs and docs for your installed version
Vuetify MCP server: the agent pulls component APIs, guides, release notes and the v2 to v3 upgrade playbook from it
Ties a running frontend to an agent: a click leads to the source line, and the agent sees live DOM, props and state.
Svelte's official MCP server and plugin: current docs, component autofixing and Svelte 5 skills
Comparison with similar tools
Cards that share the main search query, and how they differ.
| Tool | Official | Authentication | Repository stars | Main difference |
|---|---|---|---|---|
| medula (this card) | no | not required | 127 | |
| agent-react-devtools | no | 252 | limited to React; medula also covers Vue, Svelte and Solid and attaches to the dev server | |
| Chrome DevTools MCP | yes | not required | 55,199 | drives the browser through the DevTools Protocol; medula reads component and store state inside the framework |
README in short
Covers setup for Vite, Nuxt and Next.js, the MCP entry for an agent and sample prompts. A table lists what the agent reads and edits in each framework.