VS Extension for MCP Server

.vscode/mcp.json

@@ -0,0 +1,33 @@
+{
+  "inputs": [
+    {
+      "type": "promptString",
+      "id": "wordpress-api-url",
+      "description": "WordPress API URL",
+      "default": "https://your-wordpress-site.com"
+    },
+    {
+      "type": "promptString",
+      "id": "wordpress-username",
+      "description": "WordPress Username"
+    },
+    {
+      "type": "promptString",
+      "id": "wordpress-password",
+      "description": "WordPress Application Password",
+      "password": true
+    }
+  ],
+  "servers": {
+    "WordPress MCP": {
+      "type": "stdio",
+      "command": "npx",
+      "args": ["-y", "@instawp/mcp-wp"],
+      "env": {
+        "WORDPRESS_API_URL": "${input:wordpress-api-url}",
+        "WORDPRESS_USERNAME": "${input:wordpress-username}",
+        "WORDPRESS_PASSWORD": "${input:wordpress-password}"
+      }
+    }
+  }
+}

README.md

@@ -1,10 +1,20 @@
 # WordPress MCP Server
 
-This is a Model Context Protocol (MCP) server for WordPress, allowing you to interact with your WordPress site using natural language via an MCP-compatible client like Claude for Desktop. This server exposes various WordPress data and functionality as MCP tools.
+This is a Model Context Protocol (MCP) server for WordPress, allowing you to interact with your WordPress site using natural language via MCP-compatible clients like Claude for Desktop and Visual Studio Code. This server exposes various WordPress data and functionality as MCP tools.
 
-## Usage 
+## Usage
 
-### Claude Desktop 
+### Visual Studio Code
+
+1. Make sure you have VS Code version 1.99 or later installed.
+2. Ensure you have GitHub Copilot Chat extension installed and configured.
+3. In your workspace, create a `.vscode/mcp.json` file (or use the one provided in this repository).
+4. When you first use the MCP server, VS Code will prompt you for your WordPress credentials.
+5. Open the Command Palette (Ctrl+Shift+P / Cmd+Shift+P) and run **MCP: List Servers** to verify the server is configured.
+6. Open the Chat view (Ctrl+Alt+I / Cmd+Option+I) and select **Agent** mode from the dropdown.
+7. You can now interact with your WordPress site through the chat interface.
+
+### Claude Desktop
 
 1. Download and install [Claude Desktop](https://claude.ai/download).
 2. Open Claude Desktop settings and navigate to the "Developer" tab.
@@ -60,7 +70,7 @@ This server currently provides tools to interact with core WordPress data:
     *   `activate_plugin`: Activate a plugin.
     *   `deactivate_plugin`: Deactivate a plugin.
     *   `create_plugin`: Create a new plugin.
-    
+
 
 More features and endpoints will be added in future updates.
 
@@ -87,7 +97,9 @@ WORDPRESS_PASSWORD=wp_app_password
 *   **Node.js and npm:** Ensure you have Node.js (version 18 or higher) and npm installed.
 *   **WordPress Site:** You need an active WordPress site with the REST API enabled.
 *   **WordPress API Authentication:** Set up authentication for the WordPress REST API. This typically requires an authentication plugin or method (like Application Passwords).
-*   **MCP Client:** You need an application that can communicate with the MCP Server. Currently, Claude Desktop is recommended.
+*   **MCP Client:** You need an application that can communicate with the MCP Server. Supported clients include:
+    * **Visual Studio Code** (version 1.99+) with GitHub Copilot Chat extension
+    * **Claude Desktop**
 
 ### Installation and Setup
 
@@ -122,7 +134,47 @@ WORDPRESS_PASSWORD=wp_app_password
     npm run build
     ```
 
-5. **Configure Claude Desktop:**
+5. **Configure VS Code:**
+
+   * Create a `.vscode/mcp.json` file in your workspace with the following content:
+     ```json
+     {
+       "inputs": [
+         {
+           "type": "promptString",
+           "id": "wordpress-api-url",
+           "description": "WordPress API URL",
+           "default": "https://your-wordpress-site.com"
+         },
+         {
+           "type": "promptString",
+           "id": "wordpress-username",
+           "description": "WordPress Username"
+         },
+         {
+           "type": "promptString",
+           "id": "wordpress-password",
+           "description": "WordPress Application Password",
+           "password": true
+         }
+       ],
+       "servers": {
+         "WordPress MCP": {
+           "type": "stdio",
+           "command": "npx",
+           "args": ["-y", "@instawp/mcp-wp"],
+           "env": {
+             "WORDPRESS_API_URL": "${input:wordpress-api-url}",
+             "WORDPRESS_USERNAME": "${input:wordpress-username}",
+             "WORDPRESS_PASSWORD": "${input:wordpress-password}"
+           }
+         }
+       }
+     }
+     ```
+   * VS Code will prompt you for your WordPress credentials when you first use the MCP server.
+
+6. **Configure Claude Desktop (Optional):**
 
    * Open Claude Desktop settings and navigate to the "Developer" tab.
    * Click "Edit Config" to open the `claude_desktop_config.json` file.
@@ -131,8 +183,19 @@ WORDPRESS_PASSWORD=wp_app_password
 
 ### Running the Server
 
+#### With VS Code
+
+1. Open the Command Palette (Ctrl+Shift+P / Cmd+Shift+P) and run **MCP: List Servers**.
+2. Select the "WordPress MCP" server and click "Start".
+3. Open the Chat view (Ctrl+Alt+I / Cmd+Option+I) and select **Agent** mode from the dropdown.
+4. You can now interact with your WordPress site through the chat interface.
+
+#### With Claude Desktop
+
 Once you've configured Claude Desktop, the server should start automatically whenever Claude Desktop starts.
 
+#### From Command Line
+
 You can also run the server directly from the command line for testing:
 
 ```bash
@@ -177,3 +240,44 @@ wp/
 ### Contribution
 
 Feel free to open issues or make pull requests to improve this project.
+
+## Using MCP Tools in VS Code
+
+### VS Code Extension
+
+This project includes a dedicated VS Code extension that makes it even easier to work with the WordPress MCP server. The extension provides:
+
+- Easy configuration of WordPress credentials
+- Commands for common WordPress operations
+- Automatic MCP server management
+- Seamless integration with GitHub Copilot Chat
+
+To use the extension:
+
+1. Navigate to the `vscode-extension` directory
+2. Run `npm install` to install dependencies
+3. Run `npm run compile` to build the extension
+4. Press F5 in VS Code to launch a new window with the extension loaded
+5. Use the "WordPress MCP: Configure Server" command to set up your WordPress credentials
+6. Use the "WordPress MCP: Start Server" command to start the MCP server
+
+For more details, see the [VS Code Extension README](./vscode-extension/README.md).
+
+### Using with GitHub Copilot Chat
+
+When using the WordPress MCP server with VS Code, you can interact with your WordPress site through the GitHub Copilot Chat interface in agent mode. Here are some example prompts you can use:
+
+- "List all posts on my WordPress site"
+- "Create a new page titled 'About Us' with the following content: ..."
+- "Show me all active plugins on my WordPress site"
+- "Upload a new media item from this URL: ..."
+- "List all users with administrator role"
+- "Create a new category called 'Tutorials'"
+- "Update the post with ID 123 to change its title to 'New Title'"
+
+VS Code will automatically invoke the appropriate MCP tools based on your natural language requests. You can also directly reference specific tools by using the `#` symbol followed by the tool name, for example:
+
+- "Use #list_posts to show me all published posts"
+- "Use #create_page to create a new page"
+
+For more information on using MCP tools in VS Code, refer to the [VS Code MCP documentation](https://code.visualstudio.com/docs/copilot/chat/mcp-servers).

package.json

@@ -16,15 +16,20 @@
     "start": "node ./build/server.js",
     "dev": "tsx watch src/server.ts",
     "clean": "rimraf build",
-    "prepare": "npm run build"
+    "prepare": "npm run build",
+    "build:extension": "cd vscode-extension && npm run compile",
+    "package:extension": "cd vscode-extension && npm run package",
+    "vscode:prepublish": "npm run build && npm run build:extension"
   },
   "keywords": [
     "wordpress",
     "mcp",
     "server",
     "claude",
     "ai",
-    "instawp"
+    "instawp",
+    "vscode",
+    "vscode-extension"
   ],
   "author": "Claude",
   "license": "GPL-3.0-or-later",
@@ -49,6 +54,7 @@
   "files": [
     "build",
     "README.md",
-    "LICENSE"
+    "LICENSE",
+    "vscode-extension"
   ]
 }

vscode-extension/.gitignore

@@ -0,0 +1,5 @@
+out
+node_modules
+.vscode-test/
+*.vsix
+dist

vscode-extension/.vscode/launch.json

@@ -0,0 +1,30 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "Run Extension",
+      "type": "extensionHost",
+      "request": "launch",
+      "args": [
+        "--extensionDevelopmentPath=${workspaceFolder}"
+      ],
+      "outFiles": [
+        "${workspaceFolder}/dist/**/*.js"
+      ],
+      "preLaunchTask": "${defaultBuildTask}"
+    },
+    {
+      "name": "Extension Tests",
+      "type": "extensionHost",
+      "request": "launch",
+      "args": [
+        "--extensionDevelopmentPath=${workspaceFolder}",
+        "--extensionTestsPath=${workspaceFolder}/out/test/suite/index"
+      ],
+      "outFiles": [
+        "${workspaceFolder}/out/test/**/*.js"
+      ],
+      "preLaunchTask": "npm: test-watch"
+    }
+  ]
+}

vscode-extension/.vscode/tasks.json

@@ -0,0 +1,28 @@
+{
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "type": "npm",
+      "script": "watch",
+      "problemMatcher": "$ts-webpack-watch",
+      "isBackground": true,
+      "presentation": {
+        "reveal": "never"
+      },
+      "group": {
+        "kind": "build",
+        "isDefault": true
+      }
+    },
+    {
+      "type": "npm",
+      "script": "test-watch",
+      "problemMatcher": "$tsc-watch",
+      "isBackground": true,
+      "presentation": {
+        "reveal": "never"
+      },
+      "group": "build"
+    }
+  ]
+}

vscode-extension/.vscodeignore

@@ -0,0 +1,11 @@
+.vscode/**
+.vscode-test/**
+src/**
+.gitignore
+.yarnrc
+webpack.config.js
+vsc-extension-quickstart.md
+**/tsconfig.json
+**/.eslintrc.json
+**/*.map
+**/*.ts

vscode-extension/README.md

@@ -0,0 +1,92 @@
+# WordPress MCP for VS Code
+
+This extension integrates WordPress with Visual Studio Code using the Machine Conversation Protocol (MCP). It allows you to interact with your WordPress site directly from VS Code using natural language through GitHub Copilot Chat.
+
+## Features
+
+- Seamless integration with GitHub Copilot Chat in VS Code
+- Easy configuration of WordPress credentials
+- Commands for common WordPress operations
+- Automatic MCP server management
+
+## Requirements
+
+- Visual Studio Code 1.99.0 or higher
+- GitHub Copilot Chat extension
+- Node.js 18.0.0 or higher
+- A WordPress site with REST API enabled
+- WordPress application password for authentication
+
+## Installation
+
+1. Install this extension from the VS Code Marketplace
+2. Configure your WordPress credentials using the "WordPress MCP: Configure Server" command
+3. Start the MCP server using the "WordPress MCP: Start Server" command
+
+## Usage
+
+### Configuration
+
+1. Open the Command Palette (Ctrl+Shift+P / Cmd+Shift+P)
+2. Run "WordPress MCP: Configure Server"
+3. Enter your WordPress API URL, username, and application password
+
+### Starting the Server
+
+1. Open the Command Palette
+2. Run "WordPress MCP: Start Server"
+
+### Using with GitHub Copilot Chat
+
+1. Open the Chat view (Ctrl+Alt+I / Cmd+Option+I)
+2. Select "Agent" mode from the dropdown
+3. Enter natural language queries about your WordPress site
+
+Example queries:
+- "List all posts on my WordPress site"
+- "Create a new page titled 'About Us'"
+- "Show me all active plugins"
+- "Upload a new media item from this URL: ..."
+
+### Quick Commands
+
+This extension provides several commands for common WordPress operations:
+
+- **WordPress MCP: List Posts** - Shows all posts on your site
+- **WordPress MCP: Create New Post** - Creates a new post
+- **WordPress MCP: List Pages** - Shows all pages on your site
+- **WordPress MCP: Create New Page** - Creates a new page
+- **WordPress MCP: List Plugins** - Shows all plugins on your site
+- **WordPress MCP: List Media** - Shows all media items on your site
+
+## Extension Settings
+
+This extension contributes the following settings:
+
+* `wordpress-mcp.apiUrl`: WordPress API URL
+* `wordpress-mcp.username`: WordPress Username
+* `wordpress-mcp.password`: WordPress Application Password
+* `wordpress-mcp.autoStart`: Automatically start the WordPress MCP server when VS Code starts
+
+## Known Issues
+
+- The extension requires GitHub Copilot Chat to be installed and configured
+- Some WordPress operations may require administrator privileges
+
+## Release Notes
+
+### 0.1.0
+
+Initial release of WordPress MCP for VS Code
+
+## Contributing
+
+Contributions are welcome! Please feel free to submit a Pull Request.
+
+## License
+
+This extension is licensed under the GPL-3.0 License.
+
+---
+
+**Powered by [InstaWP](https://instawp.com/)**