Update to user-wide Claude MCP configuration

Author: elieteyssedou

.mcp.json

@@ -28,7 +28,21 @@ npm install -g @mcp-pointer/server
 npx @mcp-pointer/server start
 ```
 
-### 2. Install Chrome Extension
+### 2. Configure with Claude Code
+
+**Recommended (User-wide configuration):**
+```bash
+# Configure MCP Pointer for all your projects
+claude mcp add pointer -s user --env MCP_POINTER_PORT=7007 -- mcp-pointer start
+```
+
+**Alternative (Project-specific configuration):**
+```bash
+# Configure MCP Pointer for current project only
+claude mcp add pointer --env MCP_POINTER_PORT=7007 -- mcp-pointer start
+```
+
+### 3. Install Chrome Extension
 
 **For end users** (when available):
 - Install from Chrome Web Store (coming soon)
@@ -43,9 +57,9 @@ npx @mcp-pointer/server start
 3. Open Chrome → Extensions → Developer mode → Load Unpacked
 4. Select `packages/chrome-extension/dist/` folder
 
-### 3. Start Using
+### 4. Start Using
 
-1. **Start the server**: `mcp-pointer start`
+1. **Start the server**: `mcp-pointer start` (or let Claude Code start it automatically)
 2. **Navigate to any webpage** 
 3. **Option+Click** any element to select it
 4. **Ask your AI** to analyze the targeted element!
@@ -56,7 +70,7 @@ npx @mcp-pointer/server start
 
 ```bash
 mcp-pointer start         # 👆 Start pointing at elements (start server)
-mcp-pointer configure         # Auto-configure AI tools  
+mcp-pointer configure     # Show Claude MCP configuration command
 mcp-pointer show-config   # Show manual configuration
 ```
 
@@ -124,28 +138,39 @@ packages/
 
 ## 🔧 Configuration
 
-### Auto Configuration
+### Recommended Configuration
 
 ```bash
-mcp-pointer configure
+# User-wide configuration (recommended)
+claude mcp add pointer -s user --env MCP_POINTER_PORT=7007 -- mcp-pointer start
+
+# Project-specific configuration  
+claude mcp add pointer --env MCP_POINTER_PORT=7007 -- mcp-pointer start
 ```
 
 ### Manual Configuration
 
-Add to your AI tool's MCP settings (e.g., `~/.claude/settings.json`):
+For non-Claude MCP tools, add to your AI tool's MCP settings (e.g., `~/.claude/settings.json`):
 
 ```json
 {
   "mcpServers": {
     "@mcp-pointer/server": {
       "command": "mcp-pointer",
       "args": ["start"],
-      "env": {}
+      "env": {
+        "MCP_POINTER_PORT": "7007"
+      }
     }
   }
 }
 ```
 
+Get this configuration by running:
+```bash
+mcp-pointer show-config
+```
+
 ## 🎯 How It Works
 
 1. **Element Selection**: Content script captures Option+Click events

README.md

@@ -43,41 +43,25 @@ pnpm -C packages/chrome-extension build
 3. Select the `packages/chrome-extension/dist/` folder
 4. The MCP Pointer extension should appear in your extensions list
 
-### 3. Configure Your Working Project
+### 3. Configure Claude Code for Testing
 
-Navigate to any project where you want to use MCP Pointer:
+**For Contributors/Testers** (after linking the MCP server):
 
 ```bash
-cd /path/to/your/frontend-project
-
-# Auto-configure Claude Code for this project
-mcp-pointer configure
-
-# This creates a .mcp.json file in your project
+# Configure MCP Pointer user-wide for testing
+claude mcp add pointer -s user --env MCP_POINTER_PORT=7007 -- mcp-pointer start
 ```
 
-The `.mcp.json` will look like:
-```json
-{
-  "mcpServers": {
-    "@mcp-pointer/server": {
-      "command": "mcp-pointer",
-      "args": ["start"],
-      "env": {
-        "MCP_POINTER_PORT": "7007"
-      }
-    }
-  }
-}
-```
+**Important for Contributors:**
+- Since you linked the MCP server globally in step 1, this will use your local development build
+- The configuration is user-wide, so it works across all your projects
+- No need to create `.mcp.json` files in individual projects
 
 ### 4. Start Using MCP Pointer
 
 ```bash
-# In your working project, start the MCP server
+# Start the MCP server (Claude Code will start it automatically when needed)
 mcp-pointer start
-
-# Or let Claude Code start it automatically
 ```
 
 Now you can:
@@ -104,8 +88,8 @@ pnpm -C packages/chrome-extension build
 # Remove the global link
 npm unlink -g @mcp-pointer/server
 
-# Remove from your projects
-rm .mcp.json  # In each project that used it
+# Remove from Claude Code
+claude mcp remove pointer
 ```
 
 ## 🐛 Troubleshooting
@@ -143,8 +127,8 @@ mcp-pointer start --log-level debug
 ### Claude Code Integration
 
 1. **Tools not appearing:**
-   - Restart Claude Code after running `mcp-pointer configure`
-   - Check that `.mcp.json` exists in your project root
+   - Restart Claude Code after configuring the MCP server
+   - Check that the MCP server is configured with `claude mcp list`
    - Verify MCP server is running
 
 2. **"Command not found: mcp-pointer":**
@@ -163,7 +147,6 @@ mcp-pointer/
 │   │   ├── dist/              # Built extension (created by pnpm build)
 │   │   └── src/               # Source code
 │   └── shared/                # Shared TypeScript types
-└── .mcp.json                  # Local MCP configuration (created by mcp-pointer configure)
 ```
 
 ## 🎯 Testing Checklist

SETUP_FOR_TESTERS.md

@@ -1,38 +1,16 @@
-import { readFileSync, writeFileSync } from 'fs';
-import { join } from 'path';
 import logger from './logger';
 
 async function configure() {
-  try {
-    const mcpConfigPath = join(process.cwd(), '.mcp.json');
-    let config: any = {};
-
-    try {
-      const existingConfig = readFileSync(mcpConfigPath, 'utf8');
-      config = JSON.parse(existingConfig);
-    } catch {
-      config = {};
-    }
-
-    if (!config.mcpServers) {
-      config.mcpServers = {};
-    }
-
-    config.mcpServers['@mcp-pointer/server'] = {
-      command: 'mcp-pointer',
-      args: ['start'],
-      env: {
-        MCP_POINTER_PORT: '7007',
-      },
-    };
-
-    writeFileSync(mcpConfigPath, JSON.stringify(config, null, 2));
-    logger.info('✅ MCP Pointer configured for Claude Code in current project!');
-    logger.info('Created .mcp.json with pointer configuration.');
-  } catch (error) {
-    logger.error('Failed to configure Claude Code:', error);
-    process.exit(1);
-  }
+  logger.info('🔧 To configure MCP Pointer with Claude Code, run this command:');
+  logger.info('');
+  logger.info('claude mcp add pointer -s user --env MCP_POINTER_PORT=7007 -- mcp-pointer start');
+  logger.info('');
+  logger.info('This will configure MCP Pointer user-wide across all your projects.');
+  logger.info('');
+  logger.info('Alternative: For project-specific configuration, use:');
+  logger.info('claude mcp add pointer --env MCP_POINTER_PORT=7007 -- mcp-pointer start');
+  logger.info('');
+  logger.info('💡 You can customize the port by changing MCP_POINTER_PORT=7007 to your preferred port.');
 }
 
 export default configure;

packages/server/src/configure.ts

@@ -8,7 +8,7 @@ import { version } from 'process';
 import type PointerWebSocketServer from './websocket-server';
 
 enum MCPToolName {
-  GET_TARGETED_ELEMENT = 'get-targeted-element',
+  GET_POINTED_ELEMENT = 'get-pointed-element',
 }
 
 enum MCPServerName {
@@ -46,8 +46,8 @@ export default class MCPHandler {
     return {
       tools: [
         {
-          name: MCPToolName.GET_TARGETED_ELEMENT,
-          description: 'Get information about the currently targeted DOM element from the browser extension, in order to let you see a specific element the user is pointing on his/her the browser.',
+          name: MCPToolName.GET_POINTED_ELEMENT,
+          description: 'Get information about the currently pointed/shown DOM element from the browser extension, in order to let you see a specific element the user is showing you on his/her the browser.',
           inputSchema: {
             type: 'object',
             properties: {},
@@ -59,7 +59,7 @@ export default class MCPHandler {
   }
 
   private async handleCallTool(request: any) {
-    if (request.params.name === MCPToolName.GET_TARGETED_ELEMENT) {
+    if (request.params.name === MCPToolName.GET_POINTED_ELEMENT) {
       return this.getTargetedElement();
     }
 
@@ -74,8 +74,8 @@ export default class MCPHandler {
         content: [
           {
             type: 'text',
-            text: 'No element is currently targeted. '
-              + 'The user needs to select an element in their browser using Option+Click.',
+            text: 'No element is currently pointed. '
+              + 'The user needs to point an element in their browser using Option+Click.',
           },
         ],
       };

packages/server/src/mcp-handler.ts

@@ -7,11 +7,19 @@ export default function showConfig() {
       '@mcp-pointer/server': {
         command: 'mcp-pointer',
         args: [CLICommand.START],
-        env: {},
+        env: {
+          MCP_POINTER_PORT: '7007',
+        },
       },
     },
   };
 
-  logger.info('Add this to your AI tool\'s MCP settings:');
+  logger.info('📋 Manual MCP configuration for your AI tool:');
+  logger.info('');
+  logger.info('Add this to your AI tool\'s MCP settings (e.g., ~/.claude/settings.json):');
+  logger.info('');
   logger.info(JSON.stringify(config, null, 2));
+  logger.info('');
+  logger.info('💡 Recommended: Use Claude MCP CLI instead:');
+  logger.info('claude mcp add pointer -s user --env MCP_POINTER_PORT=7007 -- mcp-pointer start');
 }