devtools-webmcp

devtools-webmcp

An agent in the browser cannot see the internals of your library. WebMCP tools give that agent a way to read those internals during development.

The package is @tanstack/devtools-webmcp. It has no runtime dependencies. These tools do not appear in a devtools panel.

Register

Paste this call into the library.

import { registerDevtoolsTools } from '@tanstack/devtools-webmcp'

const stop = registerDevtoolsTools({
  pluginId: 'tanstack.query',
  instanceId: 'main',
  tools: [
    {
      name: 'getQueryCache',
      description: 'Return a JSON summary of the query cache.',
      inputSchema: {
        type: 'object',
        properties: {
          queryHash: { type: 'string' },
        },
      },
      execute: (input) => summarize(client, input),
    },
  ],
})

stop()

summarize and client are your own library code. This sample does not define them.

If the tools must stay, do not call stop(). When the tools must leave the page, call stop().

The call returns stop at once. The call does not return the registerTool promise.

Names

pluginId is required. instanceId is optional.

An empty instanceId means the same thing as no instanceId. An empty instanceId is legal.

The browser tool name is pluginId.name. When instanceId is a non-empty string, the browser tool name is pluginId.instanceId.name.

In the sample, the browser tool name is tanstack.query.main.getQueryCache.

A part is pluginId or name. When instanceId is a non-empty string, that value is also a part.

Each part is a non-empty string. Each part uses only ASCII letters (A-Z and a-z), digits, _, -, and ..

The full tool name has 1 to 128 characters.

Tool fields

A tool needs name, description, and execute.

• name: the last part of the browser tool name.
• description: the text that the agent reads.
• title: an optional string.
• inputSchema: an optional JSON Schema.
• execute: the function that returns the data.