Medula

medula

[](https://npmx.dev/package/medula) [](https://github.com/posva/medula/actions/workflows/ci.yml)

> Change your web app's state from within it

medula lets your coding agent inspect and change the internal state of a running web app through MCP. Ask it to check a component, change a value, or navigate to another route, and see the result in your browser.

It supports Vue 3, React, Svelte 5, and Solid, with integrations for Vite, Nuxt, and Next.js. Vue apps also get support for Pinia and Vue Router. Add medula to your dev server, it infiltrates your app so you don't need to adapt anything in it.

| Framework | What your agent can do | | --------- | --------------------------------------------------------------------------------------------------------- | | Vue 3 | Inspect the component tree, read and edit component state and Pinia stores, and navigate with Vue Router. | | React | Inspect components, read and edit hook state, and override props. | | Svelte 5 | Inspect components, read props and derived values, and edit $state. | | Solid 1.9 | Inspect components, read props and memos, and edit signals and stores. |

medula runs during development and uses devframe to connect your app to your agent.

Setup

Vue, React, Svelte, and Solid with Vite 8

Install medula and Vite DevTools in your app:

pnpm add -D medula @vitejs/devtools

Enable Vite DevTools and add medula() next to your existing framework plugin. For example, with Vue:

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { medula } from 'medula/vite'

export default defineConfig({
  devtools: true,
  plugins: [vue(), medula()],
})

For React, Svelte, or Solid, use the same config with your framework's import and plugins entry:

// React
import react from '@vitejs/plugin-react'
// plugins: [react(), medula()]

// Svelte 5
import { svelte } from '@sveltejs/vite-plugin-svelte'
// plugins: [svelte(), medula()]

// Solid
import solid from 'vite-plugin-solid'
// plugins: [solid(), medula()]

Nuxt

Install medula:

pnpm add -D medula

Add the module to your Nuxt config. This requires Nuxt DevTools 4.

// nuxt.config.ts
export default defineNuxtConfig({
  devtools: { enabled: true },
  modules: ['medula/nuxt'],
})

Next.js (App Router)

Install medula and the devframe packages:

pnpm add -D medula @devframes/next @devframes/hub-ui

Wrap your Next.js config with withDevframe:

// next.config.ts
import { withDevframe } from '@devframes/next/single'

export default withDevframe({})

Create the route below to serve the devtools. Use the folder name %5F_devframes exactly as shown: Next.js treats folders that start with _ as private.

// app/%5F_devframes/[[...path]]/route.ts
import { nextDevframeHub } from '@devframes/next/hub'

export const runtime = 'nodejs'
export const dynamic = 'force-dynamic'

const hub = nextDevframeHub({
  devframes: [
    () =>
      import(/* webpackIgnore: true */ /* turbopackIgnore: true */ 'medula').then((m) =>
        m.medulaHubEntry(),
      ),
  ],
  auth: false, // for local development on a single-user machine
  register: true,
})

const handler = (request: Request) => hub.handler(request)

export { handler as DELETE, handler as GET, handler as POST }

Keep the import comments: they let medula load its assets correctly with Webpack and Turbopack. register: true lets your agent discover the dev server.

Add `` to the head of your root layout and the devtools script to the body:

// app/layout.tsx
import type { ReactNode } from 'react'
import { Medula } from 'medula/next'

export default function RootLayout({ children }: { children: ReactNode }) {
  return (
    
      
        
      
      
        {children}
        {process.env.NODE_ENV === 'development' && (
          
        )}
      
    
  )
}

Connect your agent

Add this server to your agent's MCP configuration:

{
  "mcpServers": {
    "devframe": {
      "command": "npx",
      "args": ["devframe", "connect"]
    }
  }
}

devframe connect finds your running dev servers, so you do not need to configure a URL or port for each app.

Start your dev server and open the app in your browser. If DevTools asks for a connection code, complete that step. Keep the app tab visible while your agent works: its tools are available while the page is connected. With several app tabs open, medula uses the tab you focused last.

Try asking your agent:

• “Show me the components on this page and their current state.”
• “Set the cart quantity to 3 so I can check the total.”
• “Open the settings route.” (Vue Router)

Your agent can call medula_help for guidance and discover the tools for your app. Changes affect the running page; they do not edit your source files.

Contributing

See [CONTRIBUTING.md](./CONTRIBUTING.md) for local setup, playgrounds, and checks.

License

[MIT](./LICENSE)

Source & license

This open-source MCP server is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: posva
• Source: posva/medula
• License: MIT

Install and usage instructions live in the source repository linked above.