Package Exports

devframe
devframe/adapters/build
devframe/adapters/cli
devframe/adapters/dev
devframe/adapters/embedded
devframe/adapters/mcp
devframe/client
devframe/constants
devframe/helpers/vite
devframe/node
devframe/node/auth
devframe/node/internal
devframe/package.json
devframe/recipes/open-helpers
devframe/rpc
devframe/rpc/client
devframe/rpc/server
devframe/rpc/transports/ws-client
devframe/rpc/transports/ws-server
devframe/types
devframe/utils/colors
devframe/utils/events
devframe/utils/hash
devframe/utils/human-id
devframe/utils/launch-editor
devframe/utils/nanoid
devframe/utils/open
devframe/utils/promise
devframe/utils/serve-static
devframe/utils/shared-state
devframe/utils/streaming-channel
devframe/utils/structured-clone
devframe/utils/when

Readme

devframe

Framework- and build-tool-agnostic foundation for building generic DevTools. Define your devtool once — its RPC, its data, its SPA, its CLI shape — and deploy the same definition anywhere through a set of pluggable adapters.

Full documentation: https://devfra.me/.

Install

pnpm add devframe

Hello, Devframe

import { defineDevframe, defineRpcFunction } from 'devframe'
import { createCli } from 'devframe/adapters/cli'

const devframe = defineDevframe({
  id: 'my-devframe',
  name: 'My Devframe',
  setup(ctx) {
    ctx.rpc.register(defineRpcFunction({
      name: 'my-devframe:hello',
      type: 'static',
      jsonSerializable: true,
      handler: () => ({ message: 'hello' }),
    }))
  },
})

await createCli(devframe).parse()

Adapters

Adapter	Use case
`cli`	Standalone CLI tool with `dev` / `build` / `mcp` subcommands.
`build`	Generates a static, self-contained SPA snapshot.
`vite`	Mounts the devframe into Vite DevTools (or any compatible host) via `@vitejs/devtools-kit`.
`embedded`	Overlays inside another devtool's UI.
`mcp`	Surfaces the devframe's RPC to coding agents over MCP.

Agent-Native (experimental)

[!WARNING] The agent-native surface — the agent field on defineRpcFunction, DevToolsAgentHost, and the devframe/adapters/mcp adapter — may change without a major version bump until it stabilizes.

Devframe surfaces a devframe's RPC functions, tools, and resources to coding agents over MCP. Flag an RPC function with agent: { description } to expose it, then spin up an MCP server:

import { defineDevframe, defineRpcFunction } from 'devframe'
import { createMcpServer } from 'devframe/adapters/mcp'

const getSummary = defineRpcFunction({
  name: 'my-plugin:get-summary',
  type: 'query',
  agent: {
    description: 'Return a short summary of the current build state.',
  },
  setup: ctx => ({ handler: async () => buildSummary() }),
})

const devframe = defineDevframe({
  id: 'my-plugin',
  setup(ctx) {
    ctx.rpc.register(getSummary)
    ctx.agent.registerResource({
      id: 'latest-build',
      name: 'Latest build',
      read: () => ({ text: renderMarkdown(latestBuild) }),
    })
  },
})

await createMcpServer(devframe, { transport: 'stdio' })

Or via the CLI: devframe mcp. @modelcontextprotocol/sdk is a peer dependency — add it when you want MCP support. See the Agent-Native guide for the full API and Claude Desktop integration example.

License

MIT