Devframe Inspector

A self-inspector for any devframe connection, including the host framework's: a Vue SPA.

Package: @devframes/plugin-inspect · framework: Vue + Vite

RPC functions list

Agent tools

History panels

What it does

• Functions: type, flags, JSON Schema, agent exposure; read-only query / static invokable inline.
• Client: the browser side of the connection: client RPC functions (invoked locally in the page) and the page's WebMCP tools, live from the model context's getTools() when the browser supports discovery, otherwise projected from agent-flagged client functions.
• State: shared-state keys in a live JSON tree that flashes changes.
• Agent: tools and resources for agents.
• History: a timeline of RPC calls and shared-state updates.

Standalone

pnpx @devframes/plugin-inspect

Mount into a Vite host

For a Vite DevTools app:

// vite.config.ts
import createInspectDevframe from '@devframes/plugin-inspect'
import { createPluginFromDevframe } from '@vitejs/devtools-kit/node'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    createPluginFromDevframe(createInspectDevframe()),
  ],
})

Or mount directly with devframeVite from @devframes/vite/single:

// vite.config.ts
import createInspectDevframe from '@devframes/plugin-inspect'
import { devframeVite } from '@devframes/vite/single'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    devframeVite(createInspectDevframe()),
  ],
})

Programmatic

createInspectDevframe(options) returns a definition for any adapter:

import { createInspectDevframe } from '@devframes/plugin-inspect'
import { createCac } from 'devframe/adapters/cac'

await createCac(createInspectDevframe({ port: 9100 })).parse()

RPC

All functions are namespaced devframes:plugin:inspect:*:

Source

plugins/inspect