wonder-blocks: Instructions file for Codex

Wonder Blocks – Agentic Workflows & Storybook MCP

This file helps AI agents and tools work with the Wonder Blocks design system, including the Storybook MCP server.

Installing the MCP (consumer setup)

If you want to use the Wonder Blocks Storybook MCP from another project (e.g. Cursor, Claude Desktop), you run Wonder Blocks locally and point your MCP client at it.

1. Clone the Wonder Blocks repo (if you haven’t already):

   git clone [email protected]:Khan/wonder-blocks.git
   cd wonder-blocks
   

2. Install dependencies and start Storybook (the MCP server runs inside Storybook):

   pnpm install
   pnpm start
   

   Keep this process running. Storybook (and the MCP) will be available at http://localhost:6061.

3. Configure your MCP client to use the local MCP endpoint. Add a server entry that uses the HTTP transport and the URL below.

   Example mcp.json (Cursor and other clients that support HTTP):

   {
     "mcpServers": {
       "wonder-blocks": {
         "url": "http://localhost:6061/mcp"
       }
     }
   }
   

   Use http://localhost:6061/mcp as the MCP server URL. No API keys or auth are required for local use.

Note: The MCP is only available while Storybook is running (pnpm start). If you stop Storybook, your MCP client will lose the connection until you start it again.

Storybook MCP server

Wonder Blocks uses @storybook/addon-mcp so agents can discover components, list stories, and use docs tooling.

When it’s available

• The MCP server runs inside the Storybook dev server.
• Start Storybook with: pnpm start (or pnpm start:storybook).
• Storybook (and the MCP endpoint) are only available while that process is running.

MCP endpoint

Environment	Storybook UI	MCP endpoint
Local dev	http://localhost:6061	http://localhost:6061/mcp