impact-ui-mcp-server 1.0.0 → 1.0.2

package/NPM_PACKAGE_SETUP.md

@@ -0,0 +1,208 @@
+# Setup Guide for NPM Packages
+
+This guide is for when both `impact-ui` and `impact-ui-mcp-server` are published to npm.
+
+## Project Structure
+
+When both packages are installed from npm, your `node_modules` will look like:
+
+```
+your-project/
+├── node_modules/
+│   ├── impact-ui/              # ✅ Published npm package
+│   │   ├── dist/               # Built library
+│   │   ├── src/
+│   │   │   ├── stories/        # ✅ For MCP server
+│   │   │   └── components/     # ✅ For MCP server
+│   │   └── package.json
+│   └── impact-ui-mcp-server/   # ✅ Published npm package
+│       ├── src/
+│       │   └── index.js        # MCP server entry point
+│       └── package.json
+└── package.json
+```
+
+## Installation
+
+```bash
+npm install impact-ui impact-ui-mcp-server
+```
+
+**Package Names:**
+- `impact-ui` - The UI library
+- `impact-ui-mcp-server` - The MCP server (published to npm)
+
+## Windsurf Configuration
+
+Since Windsurf needs absolute paths, use this configuration:
+
+### Option 1: Auto-Detection (Simplest)
+
+The MCP server will automatically find `impact-ui` in `node_modules`:
+
+```json
+{
+  "mcpServers": {
+    "impact-ui": {
+      "command": "node",
+      "args": [
+        "/absolute/path/to/your/project/node_modules/impact-ui-mcp-server/src/index.js"
+      ],
+      "cwd": "/absolute/path/to/your/project"
+    }
+  }
+}
+```
+
+**No environment variables needed!** The MCP server auto-detects from `process.cwd()/node_modules/impact-ui`.
+
+### Option 2: Explicit Path (More Reliable)
+
+If auto-detection doesn't work, explicitly set the path:
+
+```json
+{
+  "mcpServers": {
+    "impact-ui": {
+      "command": "node",
+      "args": [
+        "/absolute/path/to/your/project/node_modules/impact-ui-mcp-server/src/index.js"
+      ],
+      "cwd": "/absolute/path/to/your/project",
+      "env": {
+        "IMPACT_UI_NODE_MODULES": "/absolute/path/to/your/project/node_modules/impact-ui"
+      }
+    }
+  }
+}
+```
+
+## Generate Configuration Automatically
+
+### Option 1: Using npx (Recommended)
+
+After installing the package, run from your project directory:
+
+```bash
+cd /path/to/your/project
+npx impact-ui-generate-windsurf-config-absolute --project-path=$(pwd)
+```
+
+Or without specifying project path (uses current directory):
+```bash
+cd /path/to/your/project
+npx impact-ui-generate-windsurf-config-absolute
+```
+
+### Option 2: Using npm run
+
+If you add it to your project's `package.json`:
+```json
+{
+  "scripts": {
+    "generate-windsurf-config": "impact-ui-generate-windsurf-config-absolute"
+  }
+}
+```
+
+Then run:
+```bash
+npm run generate-windsurf-config
+```
+
+### Option 3: Direct path to node_modules
+
+```bash
+cd /path/to/your/project
+node node_modules/impact-ui-mcp-server/generate-windsurf-config-absolute.js --project-path=$(pwd)
+```
+
+### What it does:
+
+1. ✅ Finds `impact-ui-mcp-server` in `node_modules`
+2. ✅ Finds `impact-ui` in `node_modules`
+3. ✅ Generates configuration with absolute paths
+4. ✅ Sets `IMPACT_UI_NODE_MODULES` if found
+
+## How Auto-Detection Works
+
+The MCP server looks for `impact-ui` in these locations (in order):
+
+1. `process.cwd()/node_modules/impact-ui` ✅ **Most common**
+2. `process.cwd()/../node_modules/impact-ui`
+3. `process.cwd()/../../node_modules/impact-ui`
+4. Environment variable `IMPACT_UI_NODE_MODULES`
+5. Environment variable `IMPACT_UI_PATH`
+
+Since `cwd` is set to your project root, it will find `node_modules/impact-ui` automatically!
+
+## Verification
+
+After configuration, verify:
+
+1. **Check paths exist:**
+   ```bash
+   ls /path/to/your/project/node_modules/impact-ui/src/stories
+   ls /path/to/your/project/node_modules/impact-ui-mcp-server/src/index.js
+   ```
+
+2. **Test MCP server manually:**
+   ```bash
+   cd /path/to/your/project
+   node node_modules/impact-ui-mcp-server/src/index.js
+   ```
+   
+   Should see: "Building component registry..." then "Impact UI MCP Server running on stdio"
+
+3. **In Windsurf:**
+   - Open chat
+   - Ask: "What components are available in Impact UI?"
+   - Should see component list
+
+## Troubleshooting
+
+### Issue: "Cannot find module"
+**Solution**: Make sure both packages are installed:
+```bash
+npm install impact-ui impact-ui-mcp-server
+```
+
+### Issue: "Auto-detection failed"
+**Solution**: Set `IMPACT_UI_NODE_MODULES` explicitly:
+```json
+"env": {
+  "IMPACT_UI_NODE_MODULES": "/absolute/path/to/your/project/node_modules/impact-ui"
+}
+```
+
+### Issue: "Components not found"
+**Solution**: Verify `impact-ui` package includes source files:
+```bash
+ls node_modules/impact-ui/src/stories
+ls node_modules/impact-ui/src/components
+```
+
+If these don't exist, the package wasn't published with source files. Check `impact-ui/package.json` has:
+```json
+{
+  "files": ["dist", "src/stories", "src/components"]
+}
+```
+
+## Example: Complete Working Configuration
+
+```json
+{
+  "mcpServers": {
+    "impact-ui": {
+      "command": "node",
+      "args": [
+        "/Users/yourname/projects/your-project/node_modules/impact-ui-mcp-server/src/index.js"
+      ],
+      "cwd": "/Users/yourname/projects/your-project"
+    }
+  }
+}
+```
+
+**That's it!** No environment variables needed when both packages are in npm and `cwd` points to project root.

package/WINDSURF_SETUP.md

@@ -0,0 +1,204 @@
+# Windsurf IDE Setup Guide
+
+This guide explains how to configure the Impact UI MCP Server in Windsurf IDE.
+
+## Quick Setup
+
+### Option 1: Generate Configuration Automatically
+
+1. **Generate the configuration:**
+   ```bash
+   cd mcp-server
+   node generate-windsurf-config.js
+   ```
+
+   For npm package installation:
+   ```bash
+   node generate-windsurf-config.js --npm --impact-ui-path=/path/to/impact-ui
+   ```
+
+2. **Open Windsurf Settings:**
+   - Press `Cmd+,` (macOS) or `Ctrl+,` (Windows/Linux)
+   - Or go to `Windsurf` → `Settings` → `MCP Servers`
+
+3. **Add the generated configuration** to your settings file
+
+4. **Restart Windsurf IDE**
+
+### Option 2: Manual Configuration
+
+#### Step 1: Find Windsurf Settings File
+
+**macOS:**
+```
+~/Library/Application Support/Windsurf/settings.json
+```
+
+**Windows:**
+```
+%APPDATA%\Windsurf\settings.json
+```
+
+**Linux:**
+```
+~/.config/Windsurf/settings.json
+```
+
+#### Step 2: Add MCP Server Configuration
+
+Open the settings file and add:
+
+**If using npm package:**
+```json
+{
+  "mcpServers": {
+    "impact-ui": {
+      "command": "node",
+      "args": [
+        "./node_modules/impact-ui-mcp-server/src/index.js"
+      ],
+      "cwd": "${workspaceFolder}",
+      "env": {
+        "IMPACT_UI_PATH": "/absolute/path/to/impact-ui"
+      }
+    }
+  }
+}
+```
+
+**If using local path:**
+```json
+{
+  "mcpServers": {
+    "impact-ui": {
+      "command": "node",
+      "args": [
+        "/absolute/path/to/impact-ui/mcp-server/src/index.js"
+      ],
+      "cwd": "/absolute/path/to/impact-ui/mcp-server"
+    }
+  }
+}
+```
+
+#### Step 3: Restart Windsurf
+
+Close and reopen Windsurf IDE for the changes to take effect.
+
+## Configuration Options
+
+### Environment Variables
+
+The MCP server supports these environment variables:
+
+- **`IMPACT_UI_PATH`**: Path to Impact UI repository root
+  ```json
+  "env": {
+    "IMPACT_UI_PATH": "/path/to/impact-ui"
+  }
+  ```
+
+- **`IMPACT_UI_FRONTEND_PATH`**: Direct path to frontend folder
+  ```json
+  "env": {
+    "IMPACT_UI_FRONTEND_PATH": "/path/to/impact-ui/frontend"
+  }
+  ```
+
+- **`IMPACT_UI_NODE_MODULES`**: Path to installed npm package
+  ```json
+  "env": {
+    "IMPACT_UI_NODE_MODULES": "/path/to/project/node_modules/impact-ui"
+  }
+  ```
+
+### Auto-Detection (No Environment Variables)
+
+If source files are included in the npm package, the MCP server will auto-detect from `node_modules`:
+
+```json
+{
+  "mcpServers": {
+    "impact-ui": {
+      "command": "node",
+      "args": [
+        "./node_modules/impact-ui-mcp-server/src/index.js"
+      ],
+      "cwd": "${workspaceFolder}"
+    }
+  }
+}
+```
+
+No environment variables needed!
+
+## Verification
+
+After configuration, verify it's working:
+
+1. **Open Windsurf chat** (usually `Cmd+L` or `Ctrl+L`)
+2. **Look for Impact UI MCP server** in the server selector
+3. **Ask**: "What components are available in Impact UI?"
+4. The MCP server should respond with component information
+
+## Troubleshooting
+
+### Server Not Starting
+
+- **Check Node.js version**: Requires Node.js 18+
+  ```bash
+  node --version
+  ```
+
+- **Verify paths**: Make sure all paths in the configuration are correct
+- **Check logs**: Look at Windsurf's MCP server logs for errors
+
+### Components Not Found
+
+- **Verify Impact UI path**: Ensure `IMPACT_UI_PATH` points to the correct location
+- **Check source files**: Make sure `src/stories` and `src/components` exist
+- **Test manually**: Run the MCP server manually to see errors:
+  ```bash
+  cd mcp-server
+  node src/index.js
+  ```
+
+### Configuration Not Loading
+
+- **Check JSON syntax**: Ensure the JSON is valid
+- **Restart Windsurf**: Always restart after changing settings
+- **Check file permissions**: Make sure Windsurf can read the settings file
+
+## Differences from Cursor
+
+Windsurf uses `mcpServers` (plural) instead of `mcp.servers`:
+- ✅ Windsurf: `"mcpServers"`
+- ✅ Cursor: `"mcp.servers"`
+
+The rest of the configuration format is the same.
+
+## Example Complete Configuration
+
+```json
+{
+  "mcpServers": {
+    "impact-ui": {
+      "command": "node",
+      "args": [
+        "./node_modules/impact-ui-mcp-server/src/index.js"
+      ],
+      "cwd": "${workspaceFolder}",
+      "env": {
+        "IMPACT_UI_PATH": "/Users/team/projects/impact-ui"
+      }
+    }
+  }
+}
+```
+
+## Support
+
+For issues or questions:
+- Check the main [README.md](./README.md) for general usage
+- Review [QUICKSTART.md](./QUICKSTART.md) for setup instructions
+- Contact the Impact UI team

package/generate-cursor-config.js

@@ -0,0 +1,136 @@
+#!/usr/bin/env node
+
+/**
+ * Helper script to generate Cursor IDE MCP server configuration
+ * Run this script to get the exact configuration you need to add to Cursor
+ * 
+ * Usage:
+ *   node generate-cursor-config.js [--npm] [--impact-ui-path=/path/to/impact-ui]
+ */
+
+import { fileURLToPath } from "url";
+import { dirname, resolve } from "path";
+import { existsSync } from "fs";
+import { execSync } from "child_process";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+// Parse command line arguments
+const args = process.argv.slice(2);
+const useNpm = args.includes("--npm");
+const impactUiPathArg = args.find(arg => arg.startsWith("--impact-ui-path="));
+const impactUiPath = impactUiPathArg ? impactUiPathArg.split("=")[1] : null;
+
+console.log("\n📋 Cursor IDE MCP Server Configuration Generator\n");
+console.log("=".repeat(60));
+
+let config;
+let impactUiPathToUse = impactUiPath;
+
+if (useNpm) {
+  // Check if package is installed (try both scoped and unscoped names)
+  let packageFound = false;
+  let packageName = "impact-ui-mcp-server";
+  
+  try {
+    const packagePath = execSync("npm list impact-ui-mcp-server --json", { encoding: "utf-8", stdio: "pipe" });
+    const packageInfo = JSON.parse(packagePath);
+    if (packageInfo.dependencies && packageInfo.dependencies["impact-ui-mcp-server"]) {
+      packageFound = true;
+    }
+  } catch (error) {
+    // Try scoped version
+    try {
+      const packagePath = execSync("npm list @impact-analytics/impact-ui-mcp-server --json", { encoding: "utf-8", stdio: "pipe" });
+      const packageInfo = JSON.parse(packagePath);
+      if (packageInfo.dependencies && packageInfo.dependencies["@impact-analytics/impact-ui-mcp-server"]) {
+        packageFound = true;
+        packageName = "@impact-analytics/impact-ui-mcp-server";
+      }
+    } catch (error2) {
+      // Package not found, but continue - user might install it later
+    }
+  }
+
+  // For npm packages, use ${workspaceFolder} variables (Cursor supports these)
+  // Try to detect actual structure, otherwise use most common structure
+  const cwd = process.cwd();
+  let mcpServerPath = "${workspaceFolder}/frontend/node_modules/impact-ui-mcp-server/src/index.js";
+  let impactUiPath = "${workspaceFolder}/frontend/node_modules/impact-ui";
+  
+  // Check actual structure to determine which path to use
+  const frontendMcpPath = resolve(cwd, "frontend", "node_modules", "impact-ui-mcp-server", "src", "index.js");
+  const rootMcpPath = resolve(cwd, "node_modules", "impact-ui-mcp-server", "src", "index.js");
+  
+  if (existsSync(frontendMcpPath)) {
+    // Packages are in frontend/node_modules
+    mcpServerPath = "${workspaceFolder}/frontend/node_modules/impact-ui-mcp-server/src/index.js";
+    impactUiPath = "${workspaceFolder}/frontend/node_modules/impact-ui";
+  } else if (existsSync(rootMcpPath)) {
+    // Packages are in root node_modules
+    mcpServerPath = "${workspaceFolder}/node_modules/impact-ui-mcp-server/src/index.js";
+    impactUiPath = "${workspaceFolder}/node_modules/impact-ui";
+  }
+  
+  // Check for scoped package name
+  const frontendScopedMcpPath = resolve(cwd, "frontend", "node_modules", "@impact-analytics", "impact-ui-mcp-server", "src", "index.js");
+  const rootScopedMcpPath = resolve(cwd, "node_modules", "@impact-analytics", "impact-ui-mcp-server", "src", "index.js");
+  
+  if (existsSync(frontendScopedMcpPath)) {
+    mcpServerPath = "${workspaceFolder}/frontend/node_modules/@impact-analytics/impact-ui-mcp-server/src/index.js";
+  } else if (existsSync(rootScopedMcpPath)) {
+    mcpServerPath = "${workspaceFolder}/node_modules/@impact-analytics/impact-ui-mcp-server/src/index.js";
+  }
+
+  config = {
+    "mcp.servers": {
+      "impact-ui": {
+        "command": "node",
+        "args": [mcpServerPath],
+        "cwd": "${workspaceFolder}",
+        "env": {
+          "IMPACT_UI_NODE_MODULES": impactUiPath
+        }
+      }
+    }
+  };
+
+  console.log("\n📦 NPM Package Configuration (with ${workspaceFolder} variables)\n");
+  if (!packageFound) {
+    console.log("⚠️  Note: Package not detected in current directory.");
+    console.log("   Make sure to install: npm install impact-ui-mcp-server\n");
+  }
+} else {
+  // Local development configuration
+  const mcpServerPath = resolve(__dirname);
+  const indexPath = resolve(__dirname, "src/index.js");
+
+  config = {
+    "mcp.servers": {
+      "impact-ui": {
+        "command": "node",
+        "args": [indexPath],
+        "cwd": mcpServerPath
+      }
+    }
+  };
+
+  console.log("\n🏠 Local Development Configuration\n");
+}
+
+console.log("Add this to your Cursor settings.json:\n");
+console.log("(Press Cmd+Shift+P / Ctrl+Shift+P → 'Preferences: Open User Settings (JSON)')\n");
+
+console.log(JSON.stringify(config, null, 2));
+
+console.log("\n" + "=".repeat(60));
+console.log("\n✅ Copy the JSON above and add it to your Cursor settings.json");
+console.log("💡 Make sure to merge it with your existing settings (if any)");
+console.log("🔄 Restart Cursor IDE after adding the configuration\n");
+
+if (useNpm) {
+  console.log("📝 Note: Make sure to install the package first:");
+  console.log("   npm install impact-ui-mcp-server\n");
+  console.log("💡 The configuration uses ${workspaceFolder} variables which Cursor resolves automatically.\n");
+}

package/generate-windsurf-config-absolute.js

@@ -0,0 +1,134 @@
+#!/usr/bin/env node
+
+/**
+ * Generate Windsurf configuration with absolute paths (for when ${workspaceFolder} doesn't work)
+ * 
+ * Usage:
+ *   node generate-windsurf-config-absolute.js [--project-path=/path/to/project] [--impact-ui-path=/path/to/impact-ui]
+ */
+
+import { fileURLToPath } from "url";
+import { dirname, resolve } from "path";
+import { existsSync } from "fs";
+import { execSync } from "child_process";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+// Parse command line arguments
+const args = process.argv.slice(2);
+const projectPathArg = args.find(arg => arg.startsWith("--project-path="));
+const impactUiPathArg = args.find(arg => arg.startsWith("--impact-ui-path="));
+
+let projectPath = projectPathArg ? projectPathArg.split("=")[1] : process.cwd();
+let impactUiPath = impactUiPathArg ? impactUiPathArg.split("=")[1] : null;
+
+// Convert to absolute paths
+projectPath = resolve(projectPath);
+if (impactUiPath) {
+  impactUiPath = resolve(impactUiPath);
+}
+
+console.log("\n📋 Windsurf IDE MCP Server Configuration (Absolute Paths)\n");
+console.log("=".repeat(60));
+
+// Verify project path
+if (!existsSync(projectPath)) {
+  console.log(`\n❌ Project path does not exist: ${projectPath}\n`);
+  process.exit(1);
+}
+
+// Check for MCP server in different locations
+const possibleMcpPaths = [
+  resolve(projectPath, "node_modules", "impact-ui-mcp-server", "src", "index.js"),
+  resolve(projectPath, "frontend", "node_modules", "impact-ui-mcp-server", "src", "index.js"),
+  resolve(__dirname, "src", "index.js"), // Fallback to local
+];
+
+let mcpServerPath = null;
+for (const path of possibleMcpPaths) {
+  if (existsSync(path)) {
+    mcpServerPath = path;
+    break;
+  }
+}
+
+if (!mcpServerPath) {
+  console.log("\n❌ Could not find MCP server. Tried:");
+  possibleMcpPaths.forEach(p => console.log(`   - ${p}`));
+  console.log("\n   Install it with: npm install impact-ui-mcp-server\n");
+  process.exit(1);
+}
+
+// Check for impact-ui package in node_modules (npm installed)
+const possibleImpactUiPaths = [
+  resolve(projectPath, "node_modules", "impact-ui"),
+  resolve(projectPath, "frontend", "node_modules", "impact-ui"),
+];
+
+let impactUiNodeModules = null;
+for (const path of possibleImpactUiPaths) {
+  const storiesPath = resolve(path, "src", "stories");
+  if (existsSync(storiesPath)) {
+    impactUiNodeModules = path;
+    break;
+  }
+}
+
+// Build configuration
+const config = {
+  "mcpServers": {
+    "impact-ui": {
+      "command": "node",
+      "args": [mcpServerPath],
+      "cwd": projectPath
+    }
+  }
+};
+
+// For npm packages: MCP server auto-detects from node_modules, but we can set env var for explicit path
+// This ensures it works even if auto-detection fails
+if (impactUiNodeModules) {
+  console.log("\n✅ Found impact-ui package in node_modules (npm installed)");
+  console.log("   The MCP server will auto-detect it, but setting IMPACT_UI_NODE_MODULES for reliability.\n");
+  config.mcpServers["impact-ui"].env = {
+    "IMPACT_UI_NODE_MODULES": impactUiNodeModules
+  };
+} else if (impactUiPath) {
+  // Fallback to repository path if provided
+  if (!existsSync(impactUiPath)) {
+    console.log(`\n❌ Impact UI path does not exist: ${impactUiPath}\n`);
+    process.exit(1);
+  }
+  config.mcpServers["impact-ui"].env = {
+    "IMPACT_UI_PATH": impactUiPath
+  };
+} else {
+  console.log("\n⚠️  Warning: Could not find impact-ui package in node_modules.");
+  console.log("   Make sure you've installed it: npm install impact-ui");
+  console.log("   Or set IMPACT_UI_PATH to the repository root.\n");
+  console.log("   The MCP server will try to auto-detect, but may fail.\n");
+}
+
+console.log("\n✅ Detected paths:");
+console.log(`   MCP Server: ${mcpServerPath}`);
+if (impactUiNodeModules) {
+  console.log(`   Impact UI: ${impactUiNodeModules}`);
+} else if (impactUiPath) {
+  console.log(`   Impact UI: ${impactUiPath}`);
+}
+console.log(`   Working Directory: ${projectPath}\n`);
+
+console.log("Add this to your Windsurf settings:\n");
+console.log("Windsurf Settings Location:");
+console.log("  macOS: ~/Library/Application Support/Windsurf/settings.json");
+console.log("  Windows: %APPDATA%\\Windsurf\\settings.json");
+console.log("  Linux: ~/.config/Windsurf/settings.json\n");
+console.log("Or use: Windsurf → Settings → MCP Servers\n");
+
+console.log(JSON.stringify(config, null, 2));
+
+console.log("\n" + "=".repeat(60));
+console.log("\n✅ Copy the JSON above and add it to your Windsurf settings");
+console.log("💡 All paths are absolute - no variables needed!");
+console.log("🔄 Restart Windsurf IDE after adding the configuration\n");

package/generate-windsurf-config.js

@@ -0,0 +1,139 @@
+#!/usr/bin/env node
+
+/**
+ * Helper script to generate Windsurf IDE MCP server configuration
+ * Run this script to get the exact configuration you need to add to Windsurf
+ * 
+ * Usage:
+ *   node generate-windsurf-config.js [--npm] [--impact-ui-path=/path/to/impact-ui]
+ */
+
+import { fileURLToPath } from "url";
+import { dirname, resolve } from "path";
+import { existsSync } from "fs";
+import { execSync } from "child_process";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+// Parse command line arguments
+const args = process.argv.slice(2);
+const useNpm = args.includes("--npm");
+const impactUiPathArg = args.find(arg => arg.startsWith("--impact-ui-path="));
+const impactUiPath = impactUiPathArg ? impactUiPathArg.split("=")[1] : null;
+
+console.log("\n📋 Windsurf IDE MCP Server Configuration Generator\n");
+console.log("=".repeat(60));
+
+let config;
+let impactUiPathToUse = impactUiPath;
+
+if (useNpm) {
+  // Check if package is installed
+  try {
+    execSync("npm list impact-ui-mcp-server --json", { encoding: "utf-8", stdio: "pipe" });
+  } catch (error) {
+    console.log("\n⚠️  Package not found. Install it first:");
+    console.log("   npm install impact-ui-mcp-server\n");
+    process.exit(1);
+  }
+
+  // Get the absolute path to Impact UI
+  if (!impactUiPathToUse) {
+    console.log("\n❓ Please provide the path to your Impact UI repository:");
+    console.log("   node generate-windsurf-config.js --npm --impact-ui-path=/path/to/impact-ui\n");
+    process.exit(1);
+  }
+
+  // Verify the path exists
+  if (!existsSync(impactUiPathToUse)) {
+    console.log(`\n❌ Path does not exist: ${impactUiPathToUse}\n`);
+    process.exit(1);
+  }
+
+  if (!existsSync(resolve(impactUiPathToUse, "frontend"))) {
+    console.log(`\n❌ Frontend directory not found at: ${resolve(impactUiPathToUse, "frontend")}\n`);
+    process.exit(1);
+  }
+
+  // For npm packages, detect structure and use appropriate paths
+  const cwd = process.cwd();
+  let mcpServerPath = "./node_modules/impact-ui-mcp-server/src/index.js";
+  let impactUiNodeModules = null;
+  
+  // Check actual structure
+  const frontendMcpPath = resolve(cwd, "frontend", "node_modules", "impact-ui-mcp-server", "src", "index.js");
+  const rootMcpPath = resolve(cwd, "node_modules", "impact-ui-mcp-server", "src", "index.js");
+  
+  if (existsSync(frontendMcpPath)) {
+    mcpServerPath = "./frontend/node_modules/impact-ui-mcp-server/src/index.js";
+    impactUiNodeModules = "./frontend/node_modules/impact-ui";
+  } else if (existsSync(rootMcpPath)) {
+    mcpServerPath = "./node_modules/impact-ui-mcp-server/src/index.js";
+    impactUiNodeModules = "./node_modules/impact-ui";
+  }
+
+  config = {
+    "mcpServers": {
+      "impact-ui": {
+        "command": "node",
+        "args": [mcpServerPath],
+        "cwd": "${workspaceFolder}"
+      }
+    }
+  };
+  
+  // Add environment variable if impact-ui is in node_modules
+  if (impactUiNodeModules) {
+    config.mcpServers["impact-ui"].env = {
+      "IMPACT_UI_NODE_MODULES": impactUiNodeModules
+    };
+  } else if (impactUiPathToUse) {
+    config.mcpServers["impact-ui"].env = {
+      "IMPACT_UI_PATH": impactUiPathToUse
+    };
+  }
+
+  console.log("\n📦 NPM Package Configuration\n");
+} else {
+  // Local development configuration
+  const mcpServerPath = resolve(__dirname);
+  const indexPath = resolve(__dirname, "src/index.js");
+
+  config = {
+    "mcpServers": {
+      "impact-ui": {
+        "command": "node",
+        "args": [indexPath],
+        "cwd": mcpServerPath
+      }
+    }
+  };
+
+  console.log("\n🏠 Local Development Configuration\n");
+}
+
+console.log("Add this to your Windsurf settings:\n");
+console.log("Windsurf Settings Location:");
+console.log("  macOS: ~/Library/Application Support/Windsurf/settings.json");
+console.log("  Windows: %APPDATA%\\Windsurf\\settings.json");
+console.log("  Linux: ~/.config/Windsurf/settings.json\n");
+console.log("Or use: Windsurf → Settings → MCP Servers\n");
+
+console.log(JSON.stringify(config, null, 2));
+
+console.log("\n⚠️  IMPORTANT FOR WINDSURF:");
+console.log("   Windsurf may not support ${workspaceFolder} variable.");
+console.log("   If this doesn't work, replace ${workspaceFolder} with absolute paths:");
+console.log("   Example: /Users/yourname/projects/your-project");
+console.log("\n   See WINDSURF_TROUBLESHOOTING.md for more help.\n");
+
+console.log("\n" + "=".repeat(60));
+console.log("\n✅ Copy the JSON above and add it to your Windsurf settings");
+console.log("💡 Make sure to merge it with your existing settings (if any)");
+console.log("🔄 Restart Windsurf IDE after adding the configuration\n");
+
+if (useNpm) {
+  console.log("📝 Note: Make sure to install the package first:");
+  console.log("   npm install impact-ui-mcp-server\n");
+}

package/package.json

@@ -1,18 +1,26 @@
 {
   "name": "impact-ui-mcp-server",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "MCP Server for Impact UI Library - Provides AI access to component documentation and code examples",
   "type": "module",
   "main": "src/index.js",
   "bin": {
-    "impact-ui-mcp": "src/index.js"
+    "impact-ui-mcp": "./src/index.js",
+    "impact-ui-generate-cursor-config": "./generate-cursor-config.js",
+    "impact-ui-generate-windsurf-config": "./generate-windsurf-config.js",
+    "impact-ui-generate-windsurf-config-absolute": "./generate-windsurf-config-absolute.js"
   },
   "files": [
     "src",
+    "generate-cursor-config.js",
+    "generate-windsurf-config.js",
+    "generate-windsurf-config-absolute.js",
     "README.md",
     "DEPLOYMENT.md",
     "QUICK_SETUP.md",
-    "QUICKSTART.md"
+    "QUICKSTART.md",
+    "WINDSURF_SETUP.md",
+    "NPM_PACKAGE_SETUP.md"
   ],
   "publishConfig": {
     "access": "public"
@@ -20,7 +28,9 @@
   "scripts": {
     "start": "node src/index.js",
     "dev": "node --watch src/index.js",
-    "generate-config": "node generate-cursor-config.js"
+    "generate-config": "node generate-cursor-config.js",
+    "generate-windsurf-config": "node generate-windsurf-config.js",
+    "generate-windsurf-config-absolute": "node generate-windsurf-config-absolute.js"
   },
   "keywords": [
     "mcp",
@@ -35,7 +45,7 @@
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/impact-analytics/impact-ui.git",
+    "url": "https://github.com/impact-analytics/impact-ui.git",
     "directory": "mcp-server"
   },
   "engines": {