Skip to main content
Glama
Sign In
simple-storybook-preview-mcp

simple-storybook-preview-mcp

by matipojo
OverviewSchemaSourceRelated ServersDiscussionsAdmin
TypeScript
Local

Simple Storybook Preview MCP

See your components render live inside the IDE as the AI edits them. No switching windows.

Documentation & Live Demo

MCP Apps TypeScript Node 18+

Quick Start

Add to .cursor/mcp.json:

{
  "mcpServers": {
    "storybook-preview": {
      "command": "npx",
      "args": ["-y", "simple-storybook-preview-mcp"],
      "env": {
        "STORYBOOK_URL": "http://localhost:6006"
      }
    }
  }
}

Start your Storybook dev server (npm run storybook), then ask the AI to edit a component — the preview appears automatically.

Related MCP server: Storybook MCP

Configuration

Env Variable

Default

Description

STORYBOOK_URL

http://localhost:6006

Base URL of your running Storybook dev server

DEBUG

false

Set to true or 1 to show a debug log panel

How Story IDs Work

The AI derives story IDs from your Storybook file structure:

title segments lowercased, joined by dashes + double-dash + story export name

"Components/Button" + "Primary" → components-button--primary
"Forms/Input" + "WithLabel"     → forms-input--withlabel

Requirements

  • Node.js 18+

  • Storybook 7+ dev server running

  • IDE with MCP Apps support (e.g. Cursor)

Works with any framework Storybook supports (React, Vue, Angular, Svelte, etc.).

Links

License

MIT

Available Tools

1 tool
render_componentRender ComponentA

Renders a Storybook story in an inline preview panel. Use after editing a component file to show the updated result. The storyId follows Storybook convention: title segments joined by dashes, double-dash before story name (e.g. "example-button--primary" for title "Example/Button", export "Primary").

Inputs: storyId (required), theme. Returns: url, story, theme, storyId

Tool Schema Changelog

Recent tool additions, removals, and schema changes observed during successful MCP inspections.

Loading tool schema changelog…

    Deploy Server
    Claude Code, inside the Godot 4 editorFlockbay puts an AI agent in the real Godot 4 editor: it writes GDScript, runs your game and fixes what breaks. Free, or bring your own Claude Code or Codex.flockbay.comAd

    TDQS

    A4.4/5.0

    Scored across 1 tool

    Disambiguation5/5

    With only one tool there is no possibility of confusion or overlap with other tools. The single purpose of rendering a Storybook story is clearly defined.

    Naming Consistency5/5

    The tool name 'render_component' follows a clear verb_noun pattern, which is consistent and predictable. Even as a lone tool, the naming convention is clear and readable.

    Tool Count3/5

    A single tool for a very narrow 'simple storybook preview' purpose is borderline. It is not trivial, but the surface feels thin and lacks supplementary functionality that might be expected in a fuller server.

    Completeness4/5

    The tool fully covers the core rendering action, and the convention-based storyId allows agents to target stories. A notable gap is the absence of a discovery mechanism to list available stories or validate storyIds, but for a 'simple' preview server this is a minor limitation.

    Maintenance

    ActivityInactive
    ResponsivenessNo recent community issues

    Resources

    Related MCP Connectors

    Related MCP Servers