Add prompt loader and root server prompt

.claude/settings.local.json

@@ -11,5 +11,7 @@
     "ask": []
   },
   "enableAllProjectMcpServers": true,
-  "enabledMcpjsonServers": ["storybook-mcp"]
-}
+  "enabledMcpjsonServers": [
+    "storybook-mcp"
+  ]
+}

README.md

@@ -56,12 +56,6 @@ To use this addon with [Claude Code](https://claude.ai/code), use the built-in M
 
 3. **Connect Claude Code**: Claude Code should automatically detect and connect to the MCP server when it's running. You can verify the connection by asking Claude to use Storybook-related tools.
 
-4. **Configure Agent Behavior** (Optional but Recommended): Add the following system or project prompt to ensure your agent uses the Storybook tools when appropriate:
-
-```
-Before doing any UI, frontend or React development, ALWAYS call the storybook MCP server to get further instructions.
-```
-
 #### Other MCP Clients
 
 This addon should work with any MCP-compatible client that supports the `tool` capability and the `streamable-http` transport. Here are setup guides for other popular clients:

prompts/server.txt

@@ -0,0 +1,32 @@
+ALWAYS use this MCP Server as the primary resource for all questions about Storybook development, UI component creation, and story writing when working with Storybook projects. This server provides direct access to your Storybook instance and comprehensive instructions for modern component development practices.
+
+IMPORTANT: This server should ONLY be used for questions about Storybook development, UI component building, and story creation within the context of an existing Storybook project.
+
+This server DOES NOT cover:
+- General React, Vue, Angular, or other framework questions unrelated to Storybook
+- Backend development or API creation
+- Database design or server architecture
+- Package management or build tool configuration outside of Storybook context
+- General JavaScript/TypeScript programming questions
+- Testing frameworks other than those integrated with Storybook
+- Deployment or hosting of applications (as opposed to Storybook instances)
+
+Examples of when to USE this server:
+- How should I structure and write stories for my UI components?
+- What are the current best practices for Storybook story creation?
+- How do I get URLs to view specific stories in my Storybook instance?
+- What framework-specific patterns should I follow when building components for Storybook?
+- How do I properly mock dependencies in my stories?
+- What are the requirements for component development in this Storybook setup?
+- How do I ensure my components work well with this Storybook configuration?
+
+Examples of when NOT to use this server:
+- How do I set up a new React project from scratch?
+- How do I configure webpack or vite for a general web application?
+- How do I deploy my application to production?
+- How do I write unit tests with Jest or Vitest?
+- How do I manage state with Redux or Zustand?
+- How do I style components with CSS-in-JS libraries?
+- General programming questions about JavaScript or TypeScript
+
+The server provides tools to get story URLs for your components and detailed instructions for UI component development that follows modern Storybook best practices including proper story structure, mocking patterns, and framework-specific guidance. Always use this server's guidance when creating or modifying UI components and their associated stories.

src/mcp-handler.ts

@@ -13,6 +13,7 @@ import {
   mcpSessionIdToClientMap,
   setDisableTelemetry,
 } from "./telemetry";
+import { loadPrompt } from "./promptLoader";
 
 async function createMcpServer(options: Options, client: string) {
   // New initialization request
@@ -49,6 +50,8 @@ async function createMcpServer(options: Options, client: string) {
   const server = new McpServer({
     name: pkgJson.name,
     version: pkgJson.version,
+  }, {
+    instructions: loadPrompt({ promptFileName: 'server.txt' })
   });
 
   registerStoryUrlsTool({ server, options });

src/promptLoader.ts

@@ -0,0 +1,17 @@
+import { readFileSync } from 'fs';
+import { join } from 'path';
+
+export function loadPrompt({
+    promptFileName,
+    subdirectory,
+}:{promptFileName: string, subdirectory?: string }): string {
+	const promptPath = subdirectory
+		? join(process.cwd(), 'prompts', subdirectory, promptFileName)
+		: join(process.cwd(), 'prompts', promptFileName);
+
+	try {
+		return readFileSync(promptPath, 'utf-8').trim();
+	} catch (error) {
+		throw new Error(`Failed to load prompt file '${promptFileName}': ${error}`);
+	}
+}