Add prompt loader and root server prompt

README.md

@@ -49,11 +49,23 @@ pnpm dev
 # Run unit tests
 pnpm test
 
-# Run Storybook with the addon for testing
-pnpm storybook
-```
+To use this addon with [Claude Code](https://claude.ai/code), use the built-in MCP configuration command:
+
+1. **Add the MCP server**: Run the following command in your terminal:
+
+   ```bash
+   claude mcp add storybook-mcp --transport http http://localhost:6006/mcp --scope project
+   ```
+
+2. **Start Storybook**: Make sure your Storybook development server is running:
+
+   ```bash
+   npm run storybook
+   ```
+
+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.
 
-The `pnpm storybook` command starts:
+#### Other MCP Clients
 
 - The internal test Storybook instance on `http://localhost:6006`
 - The addon in watch mode, so changes are reflected automatically

packages/addon-mcp/src/mcp-handler.ts

@@ -15,6 +15,7 @@ import { buffer } from 'node:stream/consumers';
 import { collectTelemetry } from './telemetry.ts';
 import type { AddonContext } from './types.ts';
 import { logger } from 'storybook/internal/node-logger';
+import serverPrompt from './prompts/serverPrompt.md'
 
 let transport: HttpTransport<AddonContext> | undefined;
 let origin: string | undefined;
@@ -33,6 +34,7 @@ const initializeMCPServer = async (options: Options) => {
 			capabilities: {
 				tools: { listChanged: true },
 			},
+			instructions: serverPrompt
 		},
 	).withContext<AddonContext>();
 

packages/addon-mcp/src/prompts/serverPrompt.md

@@ -0,0 +1,3 @@
+# addon-mcp
+
+ALWAYS check if this MCP server can handle a response before using your training data, as your training data is likely out of date.

packages/addon-mcp/src/tools/get-ui-building-instructions.ts

@@ -1,9 +1,7 @@
 import type { McpServer } from 'tmcp';
-import * as v from 'valibot';
 import { GET_STORY_URLS_TOOL_NAME } from './get-story-urls.ts';
 import { collectTelemetry } from '../telemetry.ts';
 import uiInstructionsTemplate from '../ui-building-instructions.md';
-import { logger } from 'storybook/internal/node-logger';
 import { errorToMCPContent } from '../utils/errors.ts';
 import type { AddonContext } from '../types.ts';