Simple Storybook Preview
Supports UIby matipojo
Render Storybook component previews directly inside your IDE as AI edits them, eliminating window switching.
What it does
This MCP App renders Storybook component previews live inside the IDE. It allows developers to see the immediate visual impact of AI-driven component edits without leaving their coding environment.
Key features
- Live IDE Previews: Component renders appear automatically as the AI modifies the code.
- Zero Window Switching: Eliminates the need to toggle between the IDE and a browser tab.
- Story ID Mapping: Intelligently derives Story IDs from the project file structure.
- Debug Mode: Integrated debug log panel for troubleshooting rendering issues.
Installation
- Cursor: Add the following to
.cursor/mcp.json:
{
"mcpServers": {
"storybook-preview": {
"command": "npx",
"args": ["-y", "simple-storybook-preview-mcp"],
"env": {
"STORYBOOK_URL": "http://localhost:6006"
}
}
}
}
Supported hosts
- cursor
Quick install
npx -y simple-storybook-preview-mcpInformation
- Pricing
- free
- Published
- 5/16/2026
- stars
- 0
Categories
Choose your AI client and follow the steps below.
Cursor
Add to .cursor/mcp.json with STORYBOOK_URL env var.Related Apps
FinanceToolkit
MCP ServerProfessional-grade financial analysis toolkit for equities, options, and risk management.
DiffSitter MCP
MCP ServerAI-powered structural code navigation using tree-sitter ASTs for semantic understanding across 14+ languages.
OpenAI Apps SDK Examples
MCP AppOfficial example gallery of interactive MCP widgets for ChatGPT — 3D viewers, maps, carousels, shopping carts, and more.
Human MCP
MCP ServerGive AI agents human-like senses: visual analysis, image/video generation, speech synthesis, browser automation, and advanced reasoning — 29 MCP tools in one se
Shopify MCP Server
MCP ServerDirect interaction with Shopify store data via GraphQL API for managing products, customers, and orders.
Git MCP Server
MCP ServerFull-featured Git MCP server exposing 28 tools for AI agents to clone, commit, branch, diff, merge, rebase, and more via STDIO or Streamable HTTP.
CodexPotter
MCP ServerAutonomous reconciliation loop that drives Codex to align your codebase with instructed states.
Smart Coding MCP
MCP ServerSemantic code search for AI assistants using local embeddings — find code by meaning, not just keywords.