add prompt loader and root server prompt

Author: ax-vasquez

.claude/settings.local.json

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

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}`);
+	}
+}