Storybook MCP

Created By
storybookjs9 months ago
Help agents automatically write and test stories for your UI components. Storybook MCP enables a workflow where for each UI component created, the agent will automatically generate and link to example stories. These stories let you visually verify the new UI in each of its key states, and provide documentation and component tests.
Overview

what is Storybook MCP?

Storybook MCP is a tool that helps agents automatically write and test stories for UI components, enhancing the development workflow by generating example stories for visual verification and documentation.

how to use Storybook MCP?

To use Storybook MCP, clone the repository, install dependencies using pnpm, and start the development server. You can then run Storybook with the addon to test and verify UI components.

key features of Storybook MCP?

  • Automatic generation of example stories for UI components.
  • Integration with Storybook for visual testing.
  • Development workflow enhancements for UI component testing.

use cases of Storybook MCP?

  1. Automatically generating documentation for UI components.
  2. Visual verification of UI components in different states.
  3. Streamlining the testing process for UI components.

FAQ from Storybook MCP?

  • Can Storybook MCP be used independently?

Yes! The MCP library can be used independently of Storybook.

  • What are the prerequisites for using Storybook MCP?

You need Node.js 24+ and pnpm 10.19.0+ to run the project.

  • Is Storybook MCP suitable for all UI frameworks?

Storybook MCP is designed to work with Storybook, which supports various UI frameworks.

Project Info
Created At
9 months ago
Updated At
7 months ago
Author Name
storybookjs
Star
-
Language
-
License
-

Recommend Servers

View All
Wpnews

10 hours ago
Trainzilla Mcp

3 hours ago
Shippo
@Shippo

a day ago
//beforeyouship — LLM Cost Modeling From Your Editor
@Indiegoing

Query realistic LLM cost models without leaving your editor. beforeyouship models the **true monthly cost** of an LLM app architecture — retries, prompt caching, batch discounts, infra overhead, and 3×/10× growth — across GPT-5.x, Claude, Gemini, DeepSeek, and more. Not a token calculator: a planning tool for the design phase, before you commit to a stack. **No API key needed to try it** — demo mode covers the six free-tier models. A Pro key from [beforeyouship.dev](https://beforeyouship.dev) unlocks the full 18-model catalog. ## What you can ask - "How much will a RAG chatbot cost at 10,000 requests/day?" - "Compare Claude Haiku vs Gemini Flash pricing for my workload" - "What's the cheapest model for a multi-step agent at scale?" - "Show me current per-token prices for Anthropic models" ## Tools ### `estimate_cost` Full cost model for an architecture at a given usage level. Returns Naive / Realistic / Worst Case monthly cost per model, 3×/10× growth scenarios, and an opinionated recommendation with reasoning. ### `get_model_prices` Current per-1M-token pricing — input, output, cached input, batch — with context windows and staleness metadata. ### `list_archetypes` Seven preset architecture patterns (simple chatbot, chatbot with history, RAG pipeline, multi-model router, coding assistant, document processor, multi-step agent) used as starting points for estimates. ## Setup **Claude Code:** ​```bash claude mcp add --transport http beforeyouship https://beforeyouship.dev/api/mcp ​``` **Cursor / other clients** — add a remote server: ​```json { "mcpServers": { "beforeyouship": { "type": "streamable-http", "url": "https://beforeyouship.dev/api/mcp" } } } ​``` Add an `Authorization: Bearer bys_...` header with a Pro key for the full catalog. ## Try it > Estimate the monthly cost of a RAG pipeline at 10,000 requests/day

a day ago