Your agent shouldn't have its own Storybook. It should work in yours.

A Manager-side Storybook addon that turns the story you have open, with its controls, globals and viewport, into WebMCP tools for browser agents. No MCP server, no shadow state, no DOM automation.

try the live demoget startedgithub

npm install -D storybook-addon-webmcp

The WebMCP panel in the demo Storybook, after an agent set the review rating to 1.

install ​

Published on npm as storybook-addon-webmcp. ESM-only, requires Storybook ^10.0.0. Register it:

// .storybook/main.ts
export default {
  addons: ["storybook-addon-webmcp"],
};

No Preview entry or backend is required. In browsers without document.modelContext.registerTool, Storybook runs as normal and the WebMCP panel reports that WebMCP is unavailable. See Getting started.

try it now ​

This is the deployed Storybook, running the addon against a demo host (MealDrop). Open the WebMCP panel to see the tools. Agent calls work in a browser that implements WebMCP; the panel and ordinary Storybook controls work everywhere.

Prefer a full tab? Open the demo. The overview walks through a six-step flow to try with an agent.

what you get ​

one state

Human and agent use the same Storybook Manager APIs. Drag a control yourself and the agent's next call sees it.

six tools

Three stable (get_context, find_stories, open_story) and three contextual tools for controls and globals that follow the open story.

generated schemas

ArgTypes and globals become bounded JSON Schema. Controls that are unsafe to expose are excluded.

versioned names

Contextual tool names carry a hash of the story and schema, so an old capability cannot silently point at a new schema.

honest annotations

All tools are marked as returning untrusted content, and read-only annotations match their behavior.

degrades quietly

Without WebMCP support Storybook continues normally and the panel says so.

docs ​

Start with Getting started, then what it does, the tools, how it works, and security. Source is on GitHub (MIT).